{"id":2849,"date":"2019-05-25T14:10:00","date_gmt":"2019-05-25T14:10:00","guid":{"rendered":"https:\/\/blog.tchop.io\/?p=2849"},"modified":"2024-08-14T06:24:04","modified_gmt":"2024-08-14T06:24:04","slug":"the-new-teaser-templates-make-your-own-newsfeed-even-more-interesting","status":"publish","type":"post","link":"https:\/\/blog.tchop.io\/en\/the-new-teaser-templates-make-your-own-newsfeed-even-more-interesting\/","title":{"rendered":"The new teaser templates &#8211; make your own newsfeed even more interesting!"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"807\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/space-corp.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2850\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/space-corp.png 974w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/space-corp-800x663.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/space-corp-300x249.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/space-corp-768x636.png 768w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><figcaption>Big Image Teaser gives your <a href=\"https:\/\/blog.tchop.io\/en\/how-to-build-a-loyal-digital-community\/\">content<\/a> \u201cstrength\u201d and makes an impression<\/figcaption><\/figure>\n\n\n\n<p>Successful mobile content apps today mainly live from an exciting, current news feed. The user must present relevant content and interesting information to the user in a visually appealing way. A key factor here is the rhythm of uniformity and variety. The content must be quickly and efficiently graspable when scrolling, but it is still important to present editorial content in a varied and exciting way. Finally, this increases the likelihood that users will use the app regularly and intensively.<\/p>\n\n\n\n<p>tchop already offers different templates for displaying the different content types. A mixture of native content such as videos, audio streams, text posts, <a href=\"https:\/\/blog.tchop.io\/en\/how-social-networks-and-platforms-decline\/\">social media<\/a> posts or links to interesting content quickly results in an exciting mix for the user. Nevertheless, we thought: especially the teasers for articles and links of all kinds have even more potential.<\/p>\n\n\n\n<p>Therefore, there is now the possibility to choose between three options in addition to the standard display. And to make the presentation of your own content even higher quality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Big image teaser<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-big-1024x768-1.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-2866\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-big-1024x768-1.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-big-1024x768-1-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-big-1024x768-1-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-big-1024x768-1-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This teaser is especially recommended if you want to emphasize the image with its content. Images with at least one square format are particularly suitable, and even better with a portrait format. Because the headline \u201cin the picture\u201d covers the lower part of the picture (see example). Make sure that the important picture elements are more likely to be found in the upper half of the image.<\/p>\n\n\n\n<p>The intro text of the teaser is not shown in this template for reasons of space. It is therefore important that the headline is meaningful enough.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Small Image Teaser (with intro text)<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-with-text-1024x768-1.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-2868\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-with-text-1024x768-1.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-with-text-1024x768-1-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-with-text-1024x768-1-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-with-text-1024x768-1-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>This teaser focuses on the text, less on the image<\/figcaption><\/figure>\n\n\n\n<p>Often there is no high-quality or sufficiently high-resolution image for the teaser. Then you can use a small teaser. This shows the teaser image smaller on the upper right side as a square (see above). A decisive advantage of this variant: more content can be presented on the same area, i.e. the user has to scroll less.<\/p>\n\n\n\n<p>This format is a common and tried-and-tested format for practically all major news offers. In contrast to the teaser with a large image above, it focuses more on the headline and text. It is particularly suitable for standard news in the news feed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Small Image Teaser (without intro text)<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-without-text-1024x768-1.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-2870\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-without-text-1024x768-1.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-without-text-1024x768-1-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-without-text-1024x768-1-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/small-without-text-1024x768-1-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Image teasers without text create more \u201cdensity\u201d and save space<\/figcaption><\/figure>\n\n\n\n<p>The small teasers are also available as a variant without intro text. This saves you even more space and, as shown in the example, you get three teasers on an iPhone X screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Easy setting in edit mode<\/h2>\n\n\n\n<p>For each article or link teaser with a picture, one of the display formats described above can be selected very easily &#8211; either directly when the card is created or at any time later in edit mode. A prerequisite for all these variants is that an image is available. The setting is made accordingly in the gray box in the middle. After saving the card, a change takes effect immediately.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/Demo-1-1024x650-1-1.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2872\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/Demo-1-1024x650-1-1.png 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/Demo-1-1024x650-1-1-800x508.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/Demo-1-1024x650-1-1-300x190.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/Demo-1-1024x650-1-1-768x488.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Outlook: automatic use of templates<\/h2>\n\n\n\n<p>The possibility of manually determining the display of each teaser opens up many possibilities and is child&#8217;s play. However, it is at least as exciting to automate the assignment of the teaser variants &#8211; so that the <a href=\"https:\/\/blog.tchop.io\/en\/editor-limited-one-user-role-many-exciting-possibilities\/\">editors<\/a> don&#8217;t have to put extra effort.<\/p>\n\n\n\n<p>There is a simple and very efficient solution for this: a teaser design can be selected in the upper area of \u200b\u200bthe Mix column on the right. After setting the teaser style, all the articles with images will have the same teaser format.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"490\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-1-2.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2874\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-1-2.png 710w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2020\/03\/image-1-2-300x207.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<p>Variety and rhythm can be easily \u201cfine-tuned\u201d without any additional manual effort. The result is a visually highly professional offer, which form the provider&#8217;s perspective is both highly flexible and efficient.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Successful mobile content apps today mainly live from an exciting, current news feed. The user must present relevant content and interesting information to the user&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4,172],"tags":[],"coauthors":[131],"class_list":["post-2849","post","type-post","status-publish","format-standard","hentry","category-best-practices","category-tchop-apps","category-using-tchop"],"_links":{"self":[{"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/posts\/2849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/comments?post=2849"}],"version-history":[{"count":5,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/posts\/2849\/revisions"}],"predecessor-version":[{"id":2880,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/posts\/2849\/revisions\/2880"}],"wp:attachment":[{"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/media?parent=2849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/categories?post=2849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/tags?post=2849"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.tchop.io\/en\/wp-json\/wp\/v2\/coauthors?post=2849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}