Building an image library in CMS Made Simple

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
the CGSmartImage module for resizing and watermarking photos
jQuery fancybox code for the photo pop-ups
my TAG solution
my "Call a Smarty tag from a UDT" solution for displaying single images
my dynamic sitemap solution for an outstanding SEO

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

Show related articles:

Comment Form

ReviewManager

Click here to open the form

ReviewManager

0 Comments

No comments yet...

Building an image library in CMS Made Simple

Article optimized for CMSMS 2.x

  Author: Rolf
  Last updated: 23-06-2018
  Comments: 0
  http://cms.ms/p3m8