GDPR privacy disclaimer
This form will send me your email address and your IP address.
If you don't want that, don't use this form!
Building an image library in CMS Made Simple
Previous article Next articleAt 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}
{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}
{$entry->fields.source_name->value}
{if $entry->fields.source_url->value}</a>{/if}
Working example
Comment Form
ReviewManager
ReviewManager
0 Comments
No comments yet...
Building an image library in CMS Made Simple
Article optimized for CMSMS 2.x
Author: RolfLast updated: 23-06-2018
Comments: 0
http://cms.ms/p3m8
