Building an image library in CMS Made Simple

  Previous article Next article  

Building an image library in CMS Made Simple

  Article optimized for CMSMS 2.x

  Last updated: 03-04-2015
  Comments: 0

At my Pneumatic Tube website I show lots of photos. In order to meet all ownership laws (at least try to) I must find a way to document the source information of the photos at my website. Just a photo album module isn't enough...

I needed an Image Library at my website! But there isn't an out-of-the-box CMSMS module for that... I had to think something out myself! And if I say so myself, I have succeeded! :) I will briefly describe what I used and did.

What I used is:

The Products module is the basis, the photos are my "products".
With custom field definitions I added text fields for:

  • source name
  • source URL
  • name copyright owner
  • hidden text area for private notes
  • list of comma seperated tags

A dropdown field for:

  • the license type

And a checkbox for:

  • adding a watermark to the photo or not. You can't add a watermark to i.e. Public Domain images.

In the summary and detail template I use Smarty logic to display the filled in fields, create a working link to the source and depending on the checkbox add a watermark to the image or not...

With the "short" detail tag {ShowProduct id=foo} I can show the same image at different places at the website, very efficient.

A2 Webhosting CMS Made Simple

  How to use

When I figured out what I need to build the image library, the building itself wasn't that hard. Simple HTML/Smarty templating and CSS styling. Large parts of what you need are described in other posts of mine. Here a few snippets of Smarty code I used in the Products templates:

Checkbox watermark
{if $entry->fields.watermark->value == 'true'}
  {CGSmartImage src1=$entry->file_location src2=$entry->fields.image->value width='150' filter_watermark=1}
  {CGSmartImage src1=$entry->file_location src2=$entry->fields.image->value width='150'}
Create only a link when an url is filled in
{if $entry->fields.source_url->value}<a href="{$entry->fields.source_url->value}">{/if}
{if $entry->fields.source_url->value}</a>{/if}

  Working example

A2 Webhosting CMS Made Simple


  Click here to leave a comment

This is a captcha-picture. It is used to prevent mass-access by robots. (see:
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!

Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


No comments yet...

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Building an image library in CMS Made Simple

  Article optimized for CMSMS 2.x

  Last updated: 03-04-2015
  Comments: 0

A2 Webhosting CMS Made Simple