Child pages
  • Image Resizing and Zooming
Skip to end of metadata
Go to start of metadata

This is a new Newscoop feature that allows you to enable article images be enlarged by clicking thumbnails in your website pages. Image original size will pop-up ajax-style.
It works for both images placed by template designers wherever they want and images inserted via editor to article text areas.

How this works

First of all, zooming is optional, you may decide whether you want zooming images or not in your website. On the other hand, resizing is always there and you can use it any time without enabling anything special in Newscoop configuration.

For resizing, there are some rules for this to work, here the logic behind it:

  • You can set image resizing by either Ratio OR Width/Height values.
  • Ratio has higher precedence than Width/Height combo. So, if you set values for Ratio and Width/Height (or only one of them), thumbnails will be generated by Ratio. No matter if Width/Height values are set too, they will be overridden.
  • Value for Ratio must be >= 1 and =< 100. Default value is 100%, which means image will be inserted and shown up in real size, NO resizing.
  • If only Width is set, then Height value will be calculated automatically.
  • If only Height is set, then Width value will be calculated automatically.
  • If both Width and Height are set, then Newscoop will use the one which results in a smaller image size.
  • Value for both Width and Height must be a number >= 1.
  • Images won't be resized, for any means, to a larger size of its original. This for image quality reasons.
  • Because of the previous rule, if you have, let's say, an image with original size 450 (width) x 360 (height) and:
    - you set Width resizing value to 520 and leave Height unset, image won't be resized and will shows up 450 x 360 size.
    - you set Height resizing value to 400 and leave Width unset, image won't be resized and will shows up 450 x 360 size.
    - you set Width and Height resizing values to 520 and 400 respectively, image won't be resized and will shows up 450 x 360 size.
    - you set Width to 520 and Height to any smaller value than original, let's say 315, then image will be resized to auto-calculated-width x 315 size.
    - you set Width to 284 and Height to 510, image will be resized to 284 x auto-calculated-height size.
  • If you set Ratio to 100% and either one or both Width/Height to a smaller size than the original, then image won't be resized by Ratio but Width/Height.

Yep, Newscoop does validate all of this to assure you to get what you want and need (smile)

Resizing: Setting Values

There are two different ways you can follow to set the resizing values: Global and Per-image basis.

Per-image basis values have higher precedence than Global ones.

Global Settings

  • Go to Configure -> System Preferences and look for settings related to thumbnails management for article images (see attachment Figure No. 2):

  • Set values for either Image Resizing Ratio OR Image Resizing Width/Image Resizing Height and save.

Per Image

  • For images you want to display wherever in your templates:
    {{{
    <img src="{{ uri options="image 2" }}&ImageRatio=30" />
    }}}

for setting the Ratio value, or:

{{{
#!css+smarty
<img src="{{ uri options="image 2" }}&ImageWidth=210&ImageHeight=175" />
}}}

to set Width and Height values.

Remember you can set only one of those values, so this would be valid too:

{{{
#!css+smarty
<img src="{{ uri options="image 2" }}&ImageWidth=210" />
}}}

  • For images inserted via editor image plugin to article content:
    - Open the article edit screen for the article you want to work with. Let's say you already have some images linked to this article.
    - Insert an image to the article body by using the Image button from the editor toolbar (see attachment Figure No. 3.)


- A window pops-up to select the image from and you will see there the three options to set Ratio OR Width/Height (see attachment Figure No. 4.)


- Set the values (same rules explained above apply) for the selected image and save.

Zooming: Installation / Configuration

1- Enable Zooming. Go to Configure -> System Preferences in the admin interface menu, look for the "Zoom enabled for images in article content?" setting and mark Yes. (see attachment Figure No. 1.)

If disabled, article images will still be displayed in original size or resized (depends on user choice) but they won't be clickable to zoom.

2- Now you have to include YUI dependencies and photoviewer files into the article template file, let's call it article.tpl for this example.

#!css+smarty
<link rel="stylesheet" type="text/css" href="/javascript/yui/build/container/assets/container.css" >
<link rel="stylesheet" type="text/css" href="/javascript/yui/extend/photoviewer/assets/skins/blackmin/blackmin.css" >

<script type="text/javascript" src="/javascript/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/javascript/yui/build/dragdrop/dragdrop-min.js" ></script>
<script type="text/javascript" src="/javascript/yui/build/animation/animation-min.js" ></script>
<script type="text/javascript" src="/javascript/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="/javascript/yui/build/connection/connection-min.js"></script>
<script type="text/javascript" src="/javascript/yui/extend/photoviewer/build/photoviewer_base-min.js"></script>

3- Next, add these lines below to configure it:

#!javascript
<script type="text/javascript">
// config
YAHOO.photoViewer.config = {
    viewers: {
        "blackmin" : {
            properties: {
                id: "blackmin",
                grow: 0.6,
                fade: 0.6,
                modal: true,
                dragable: false,
                fixedcenter: true,
                xy: [0,0],
                loadFrom: "html",
                position: "absolute",
                easing: YAHOO.util.Easing.easeBothStrong,
                buttonText: {
                    next: "next &#x00BB;",
                    prev: "&#x00AB; prev",
                    close: "Close"
                }
            }
        }
    }
};

4- Last step, this is where you say which images will be affected by the zooming effect, and remember you can do that for images inserted via editor and images coded in templates.

  • Images inserted via editor:
    - Look for the line you use to display article body, which usually looks like this:
    {{{
    #!css+smarty
    <p class="article_fulltext">{{ $gimme->article->full_text }}</p>
    }}}

... and wrap it with a new DIV element for photoviewer. Important: id must match viewer name in configuration (blackmin in this case.) So now, it should look like this:
{{{
#!css+smarty
<div id="blackmin"><p class="article_fulltext">{{ $gimme->article->full_text }}</p></div>
}}}

  • Images coded in template file:
    - Line should be like this:
    {{{
    #!css+smarty
    <div id="blackmin">
    <a href="{{ uri options="image 1" }}" title="Caption goes here" class="photoViewer"><img
    src="{{ uri options="image 1" }}&ImageWidth=180" alt="Image title goes here" /></a>
    </div>
    }}}

title and alt options as part of a and img tags are mandatories, no matter if they are empty.

  • If you want all the images in your article view to be zoomable, just make the div block to wrap everything, like in this simple sample template:
    {{{
    #!css+smarty
    <div class="article_title">{{ $gimme->article->title }}</div>
    <div id="blackmin">
    <div class="article_main_photo">
    <a href="{{ uri options="image 1" }}" title="Caption goes here" class="photoViewer"><img
    src="{{ uri options="image 1" }}&ImageWidth=180" alt="Image title goes here" /></a>
    </div>
    <div class="article_intro">{{ $gimme->article->intro }}</div>
    <div class="article_full_text">{{ $gimme->article->full_text }}</div>
    </div>
    }}}

5. Let's take a look at the result (smile) (see attachment Figure No. 5.)

6. What if you have inserted more than one image to your article? well, photoviewer automatically will add navigation buttons to the window so user can go back and forth through the image gallery (see attachment Figure No. 6.)

That is it, now your website users will enjoy of resizing/zooming for article images !!

Resources

We use YUI PhotoViewer to implement zooming. If you want to make photoviewer look different or customize something else? Please read PhotoViewer documentation in the Website:

http://nicora.net/projects/photoViewer/index.cfm/home

  • No labels

1 Comment

  1. Thanks for these pages!  Will someone please tell me if they are available in a nice printable format, maybe pdf

    like the manuals? Have A Healthy, Prosperous Day!   ---robert (robhwill*AT*yahoo.com)