Template library
Displaying and listing images
This chapter jumps into the deep end of the pool and walks you through a few different ways of displaying images. They cover:
- Display an image attached to an article with a specific number
- Listing all images attached to an article
- Listing images from the media archive
- Thumbnails as generated automatically by Newscoop
- Author picture from the author management
- Scaling images in percent and absolute size
Display image with a specific number
Let's start with a simple example. You have an article with only one image, and you want to display the image when the article is requested.
Inside an article, each image gets assigned a number. You can see this number if you click on the image in the article edit screen. On upload you can also set a specific number as well as editing the number later on. If the image has a number, you can point to an image in two ways (the following is displaying the image with number 1):
<img src="{{ $gimme->article->image1->imageurl }}" alt="{{$gimme->article->image->caption }}" />
or:
<img src="{{ uri options="image 1" }}" alt="{{ $gimme->article->image->caption }}" />
The following code snippet does more, it:
- Gets the URL for an image attached to an article
- Puts the image caption (the description) into the ALT tag
- Puts the photo description into the title tag
- Displays the photographer's name
- Displays the image caption (the description)
<img src="{{ $gimme->article->image->imageurl }}"
alt="{{ $gimme->article->image->caption }}"
title="{{ $gimme->article->image->description }}" />
<span class="img-desc">{{ $gimme->article->image->description }}</span><br />
Photographer: {{ $gimme->article->image->photographer }}<br />
A screenshot of what similar code looks like in the browser is below (taken from the "The Journal" theme):
You can even validate whether the article has an image or not. The value passed in parentheses corresponds to the image number you assign to the image when attaching it to the article.
{{ if $gimme->article->has_image(1) }}
<img src="{{ $gimme->article->image->imageurl }}" />
{{ /if }}
It's also possible to access the image directly by the index number. If an image with the given index number does not exist, then an empty image object is returned, and nothing will be displayed. It is good practice to first validate whether the requested image exists or not, but you already know how to do that!
<img src="{{ $gimme->article->image5->imageurl }}" />
There are more image properties you can display; we've already used some like imageurl, photographer and description, but there'll be more in the following examples. You can read the entire list in the Image chapter in the Template reference - Objects section of this book.
Listing all images attached to an article
This is basically the same as we did before, but within a list of article images. Let's see some code:
{{ list_article_images }}
<figure>
<img src="{{ $gimme->article->image->imageurl }}" />
<figcaption>
<dl>
<dt>Caption:</dt>
<dd>{{ $gimme->article->image->caption }}</dd>
<dt>By:</dt>
<dd>{{ $gimme->article->image->photographer }}</dd>
</dl>
</figcaption>
</figure>
{{ /list_article_images }}
There's no need to use image index numbers, because the list provides iteration over all images attached to the article.
Listing images from the media archive
Now the fun begins :-)
You already know how to work with image objects and how to list images attached to articles; this is very useful and will allow you to use image content all over your publication.
But in specific cases you'll probably want to display images not necessarily related to articles. Remember that Newscoop provides a Media Archive (read more about it in the Newscoop 4 for Journalists and Editors manual), and every image you attached to an article is stored there.
The Newscoop template language provides a function to build lists of images according to different criteria. Let's say you want to build a list of images from a specific photographer. This code snippet can:
- Get a list of images where the photographer name is John Doe
- Order the images by the last updated
- Get the images themselves, based on their URLs
- Get the image descriptions or captions
{{ list_images photographer="John\ Doe" order="byLastUpdate" }}
<img src="{{ $gimme->image->imageurl }}" /><br />
<p>{{ $gimme->image->description }}</p>
{{ /list_images }}
Now here's a list of images where the string "Prague" is matched in the caption:
{{ list_images caption_like="Prague" order="byPhotographer" }}
<img src="{{ $gimme->image->imageurl }}" /><br />
<p>{{ $gimme->image->caption }}</p>
{{ /list_images }}
There are many other criteria you can use. A detailed list can be found in the List Images chapter, in the Template reference - Lists section of this book.
Thumbnails
Newscoop automatically generates a 64-pixel-wide thumbnail for every image when the image file is uploaded into the Media Archive. Displaying a thumbnail is as easy as this:
<img src="{{ $gimme->image->thumbnailurl }}" />
Author picture
The author object has the property picture, which is an image object, so that you can use it as an article image. There's more on this in the chapter Managing multiple authors and articles in this book.