If you came here first before reading about the image renditions in the previous chapter: exit immediately, read about renditions. In most cases, the image renditions used in a theme should be all you need to use when you are working with template files. Rule of thumb: if you introduce a new image size, expand the renditions in the theme rather than putting into your individual templates. This is the more efficient way of managing server load and it is the better way to manage a theme.
If you still want to display and scale images "the old way" Newscoop has couple options for You.
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.
You can point to an image in two ways, either:
<img src="{{ $gimme->article->image1->imageurl }}" alt="{{$gimme->article->image1->caption }}" />
or
<img src="{{ url options="image 1" }}" alt="{{ $gimme->article->image1->caption }} (by {{ $gimme->article->image1->photographer }})" />
You can even validate whether the article has an image or not. The value passed in parentheses correspond to the image index you assign to the image when attaching it to the article.
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.
{{if $gimme->article->has_image(1)}}
<img src="{{ $gimme->article->image1->imageurl }}"/>
{{/if}}
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.
You can resize Your image to a specific size by adding width and height to the options attribute.
{{ url options="image 1 width 300 height 200" }}
Resize with cropping:
{{ url options="image 1 width 300 height 200 crop top" }}
Note: Images will NOT be resized to fit an area of 300x200, they will be resized to to match only one axis, and the rest will be cropped with the parameter provided.
Possible values for crop location can be: top, bottom, left, right, center.
Note: In case that excess image is horizontal while vertical crop location is provided, they are translated to horizontal (and vice versa) (this means that, if you used left, but you needed to provide either top or bottom, left will be translated to top)
Only cropping:
{{ url options="image 1 width 300 height 200 forcecrop left" }}
No resizing will be done, only the cropped area will be displayed.
Possible values are: top-left, top( - center), top-right, (center - )left, center( - center), (center - )right, bottom-left, bottom( - center), bottom-right.
The following examples us an older version of manipulating images which we only list here to mention all different ways of scaling images.
You can scale image sizes in percent. The following line scales to 70%:
<img src="{{ $gimme->image->imageurl }}&ImageRatio=70" />
Here we just specified a ratio equal to 70, which means the image will be resized to 70 percent of its original size. You also have the option to provide an specific width or height value.
<img src="{{ $gimme->image->imageurl }}&ImageWidth=350&ImageHeight=310" />
Any image provided by $gimme can be scaled as shown above, including the thumbnail and author pictures. The logic of how Newscoop processes the values when both width and height are provided (and even the ratio) at the same time is explained, with more examples, in the wiki page: http://wiki.sourcefabric.org/x/c4EH
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.