[SOLVED] Simple way of showing thumbnails with a news summary item

[geeves]

Hi guys.

I figured out a way to include dynamically generated thumbnail images from a news module custom file field for use in News Summary templates.

1. First, download the DynResizer plugin here: http://dev.cmsmadesimple.org/project/files/632

2. Follow instructions here on where to install files: http://s3.amazonaws.com/cmsms/downloads/3300/README.txt

3. Add a custom filed definition of type file in the news module (News > Field Definitions > Add Field Definition). I called my field definition 'article_image'

4. Edit the dynresizer plugin (plugins/function.dynresize.php) and modify the code to allow for the use of alt tags
After line 22 (

Code: Select all

$path = isset($params['path']) ? $params['path']:false;

) add the following line:

Code: Select all

$alt = isset($params['alt']) ? $params['alt']:false;

Modify line 49 from (

Code: Select all

echo "<img src=\"imager.php?id=$encoded_link\" title=\"$title\"/>"

) to:

Code: Select all

echo "<img src=\"imager.php?id=$encoded_link\" title=\"$title\" alt=\"$alt\"/>"

5. In my news summary template, i modified the foreach loop with the extra field code to the following

Code: Select all

    {if isset($entry->fields)}
      {foreach from=$entry->fields item='field'}
         <div class="NewsSummaryField">
            {if $field->type == 'file'}
                {assign var='loc' value=$entry->file_location}
                {assign var='theFile' value=$field->value}
                {dynresize path=$loc|cat:'/'|cat:$theFile width='90' alt=$entry->title|escape:htmlall}
            {else}
              {$field->name}: {eval var=$field->value}
            {/if}
         </div>
      {/foreach}
    {/if}

6. Have a look at the available parameters for dynresize (Extensions > Tags > dynresize). I only used one parameter (width) because I wanted to scale the height proportionally with a width of 90 pixels.

I'm not much of a programmer so please feel free to comment on making this code simpler and cleaner.

Hope this is useful.

[JeremyBASS]

good one... you should ba able to aviod the alt edit via with something like this...


{capture name=some_content assign="imgName"}{dynresize path=$loc|cat:'/'|cat:$theFile width='90' }
{/capture}

{$imgName|replace:"/>":" alt=\"`$entry->title|escape:htmlall`\"/>"}



Cheers
jeremyBass

[nicmare]

thank you very much dude!
is there a way to use it with normal content too??
i am looking for a way to insert multiple images by uploading one large image (800x600) and cmsms resizes it down to a thumbnail. fully automatically!

[applejack]

nicmare

RE:is there a way to use it with normal content too??

Yes it is easy but it depends on how your main image is uploaded.

If you upload it via say the file manager and not via the content block so the img tag is not written in full i.e.

If you create in your template a content block just for the image filename imagename.gif i.e.

{content block="Image File Name" oneline='true' assign="theFile"}
{dynresize path=/uploads/images/|cat:$theFile width='90' alt=title}

Or if you display images based upon the page alias you don't even have to have a content block for it i.e.

{dynresize path=/uploads/images/|cat:$page_alias.gif width='90' alt=title}

or section (requires CGSimpleSmarty and CGExtensions modules)

{dynresize path=/uploads/images/|cat:$cgsimple->get_root_alias().gif width='90' alt=title}

(You may have play around with using |cat for the path and mime extension)

If you are using a textarea content block and so the image has a full image tag i.e.

Then you have to use a reg ex to strip out everything except the filename before you pass it to dynresize

[JeremyBASS]

thank you very much dude!
is there a way to use it with normal content too??
i am looking for a way to insert multiple images by uploading one large image (800x600) and cmsms resizes it down to a thumbnail. fully automatically!

there is a new plug-in I made that I'm using for just this need...

http://forum.cmsmadesimple.org/index.ph ... 094.0.html

just one more way to skin a cat