Posted by on Aug 8, 2013 in How To

Featured Image demonstration

As announced yesterday, the latest release of the TypeEngine web console includes support for Featured Images. Theme developers could access those template tags and start integrating them into custom templates. Today, we’d like to announce an update to the default system template your TypeEngine account is seeded with — you can make use of Featured Images without touching your template at all!

How Do Featured Images Work?

In the Article section of the web console, simply click Assets and upload an image to your article. Next, click Featured Image and choose that image from the drop-down menu. Now, enter a description of that image in the Featured Image Alt Text field. This description will not be shown in your article, but it will be read aloud to visually impaired readers using VoiceOver.

The implementation of Featured Image in the new default article template will make the image appear at the top of your article. If you upload an image that is 2048px wide, it will extend full bleed from edge-to-edge on all supported iOS devices. If you upload an image that is less than 2048px wide, it will appear centered at the top of the article.

I Know HTML/CSS — How Do I Use a Featured Image in a Custom Template?

Easy! The two new template tags are ${{FeaturedImgSrc}} and ${{FeaturedImgAlt}}. When the author selects an image in the web console, the file name replaces the ${{FeaturedImgSrc}} token and the description replaces the ${{FeaturedImgAlt}} token. Feel free to download the default template here. It includes both the CSS and the SASS files (for those of you who like using CSS preprocessors like we do).

Here’s sample code to get Featured Images rendering in your article template:


  ?{{FeaturedImgSrc}}
    <section class="featured-img">
      <img src="${{FeaturedImgSrc}}" ?{{FeaturedImgAlt}} alt="${{FeaturedImgAlt}}" ?{{/FeaturedImgAlt}}>
    </section>
  ?{{/FeaturedImgSrc}}  

There are a ton of different styles to explore with Featured Images. We’d love to see what you come up with! Hit us up any time with your ideas on Twitter and App.net.