Sourcefabric Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Template library

Image renditions

Renditions are preset image sizes that come with the theme. The magazine design will possibly require a set from around five to twelve different image sizes. Newscoop allows to set these for the theme in the theme.xml configuration file - these are called renditions. If done so, each time you create an article, the journalist can assign one picture to be automatically cropped and scaled into all renditions of that theme. Each rendition can be manually altered or even replaced with another image, if the journalist decides to do so. 

The workflow goes something like this:

  1. you design and create your publication, and in that process you define some fixed places where you will be presenting images. 
  2. you create a set of image renditions of different sizes which correspond to those fixed places.
  3. you write the templates to render your pages, and in these templates you make use of the renditions. 
  4. then, any time you or any other editor assigns an image to a rendition, that image will be presented where defined in the template. 

The process and purpose of those images is different than the images you insert within the text.

The image handling in Newscoop aims to provide more control over the images displayed in the pages at template level. 

Lets configure new rendition size for section listing in theme.xml 

<renditions>
  <rendition name="section" width="350" height="150" specs="crop"/>
  ...
</renditions>

NOTE: If you are changing the renditions in the theme configuration file remember to reload renditions by going to:

admin panel -> configure -> image rendering.

In next step we want to display rendition images in our template. To do this we will use {{image rendition="<rendition name>"}} block.

{{list_articles}}
  ...
  {{ image rendition="section" }}
    <img src="{{ $image->src }}" alt="{{ $image->caption }} (photo: {{ $image->photographer }})"  />
  {{/image}}
  ...
{{/list_articles}}

 You can use renditions with every article listing. In section pages, article pages, modules, playlists etc.

Falling back to a smaller image

Sometimes the largest image submitted by the journalist may not be large enough, in pixels, for the main rendition of the article. In that case, we don't want to show a blank area instead of the image, so we can fall back to displaying a small image instead:

{{ capture name="image" }}
  {{ image rendition="big" }}
    <img .../>
  {{ /image}}
{{ /capture }}
{{ if ! trim($smarty.capture.image) }}
  {{ capture name="image" }}
    {{ image rendition="small" }}
      <img .../>
    {{ /image }}
  {{ /capture }}
{{ /if }}
{{ $smarty.capture.image }} 

Smarty {{capture}} is used to collect the output of the template between the tags into a variable instead of displaying it.

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.