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

  Author:
  Last updated: 18-11-2017
  Comments: 0
  http://cms.ms/p3m8

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.




  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}
{else}
  {CGSmartImage src1=$entry->file_location src2=$entry->fields.image->value width='150'}
{/if}
Create only a link when an url is filled in
{if $entry->fields.source_url->value}<a href="{$entry->fields.source_url->value}">{/if}
  {$entry->fields.source_name->value}
{if $entry->fields.source_url->value}</a>{/if}

  Working example





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

Building an image library in CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last updated: 18-11-2017
  Comments: 0
  http://cms.ms/p3m8