Newscoop 4.1 Cookbook
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 }}" />
by {{ $gimme->article->image->description }}
{{ $gimme->article->image->photographer }}
An example of what similar code looks like in the browser is below (taken from the "The Journal" template pack):
You can even validate whether the article has an image or not. The value passed in parentheses correspond 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 that given index 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 chapter Template Objects -> Image of the Newscoop Template Reference.
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 indexes, 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 site.
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 update
- Get the images themselves based on their URLs
- Get the image captions (descriptions)
{{ list_images photographer="John\ Doe" order="byLastUpdate" }}
<img src="{{ $gimme->image->imageurl }}" /><br />
<p>{{ $gimme->image->description }}</p>
{{ /list_images }}
Now here's list of images where the string "Prague" is present:
{{ 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 Newscoop Template Reference in the List Images chapter.
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 exactly as an article image. There's more on this in the chapter Managing multiple authors and articles in this Cookbook.