Cliche
Cliche is an Image Gallery Component for MODx Revolution 2.2.
Installation
- Install the component via the Package Manager.
- Reload the page
- Select Cliche under Components main menu
- Create an Album and upload some images
- Use the Cliche snippet to display your Albums
Features
- Simple Image Management : The cmp focuses on simplicity
- Multiple File Upload : Batch upload of images and/or zip upload are available for your convenience
- Easy to template: You can use the html markup that you want (either in a tpl file or in a chunk via the manager) along with any CSS style that you need
- Javascript Effect : Use any popular image effect with the library of your choice
Roadmap
- Copy or Move images between albums
- Watermark
- Sorting options
- Tag support
- Custom field
- Meta data (EXIF, IPTC or XMP meta data )
- Cliche Custom Resource types to manage album per resource which can be useful to manage portfolios
- More examples : Coming soon on a dedicated website
- Custom snippet : To allow easy sidebar integration
Before Public release
- Cliche Thumbnail Template variable : An easy way to manage Post thumbnail for your resource
- Gallerific Plugin
- More complete documentation
Usage
Use the Cliche Snippet to show your galleries as you want
Simply drop the following line in your document :
[[Cliche]]
To show all albums list:
[[Cliche? &view=`albums` ]]
To show a specific album:
[[Cliche? &id=`your_album_id` &view=`album` ]]
To show a single image:
[[Cliche? &id=`your_image_id` &view=`image` ]]
Available Parameters
Parameter
|
Description
|
Default Value
|
---|---|---|
thumbWidth | Thumbnail width in pixels
|
120
|
thumbHeight | Thumbnail height in pixels
|
120
|
wrapperTpl | The wrapper html chunk, shared for all view | Albums : albumwrapper
|
itemTpl | Each item html chunk, shared for all view
|
Albums : albumcover
|
plugin | The plugin controller, a PHP file which handle the display options
|
default
|
columns | The number of columns to show
|
3
|
columnBreak | The HTML markup used to break columns with the default viewer
|
<br style="clear: both;"> |
browse
|
Used for Album list and album view.
Tell the script whether the thumbnail should link a page or directly the image |
1
|
loadJquery | Set 0 to avoid loading Jquery by Cliche.
|
1
|
loadCss | Set 1 to load custom css.
|
0
|
css | Path and name to CSS file excluding .css extension.
|
Templates
By default, all chunks are filebased and are located in : "core/components/cliche/controllers/web/plugins/[plugin]/[chunkName].tpl"
However, you still can use any normal chunk if you want.
Cliche will search first for the chunk in the db and if it does not exist, the file in the plugin directory (as a *.tpl file).
You can bypass the search in db to use only filebased chunks by using the parameter "use_filebased_chunks"
Default plugin
default/albumcover.tpl
<dl class="item"> <dt class="album-icon"> <a title="[[+albumname]]" href="[[+url]]"> <img width="[[+width]]" height="[[+height]]" title="[[+albumname]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/> </a> </dt> </dl><!-- End .item -->
default/albumcoverzoom.tpl
<dl class="item"> <dt class="album-icon"> <a class="zoom" title="[[+albumname]]" href="[[+image]]"> <img width="[[+width]]" height="[[+height]]" title="[[+albumname]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/> </a> </dt> </dl><!-- End .item -->
default/albumswrapper.tpl
<div class="cliche" id="albums_list"> [[+items]] </div><!-- End #albums_list -->
default/albumwrapper.tpl
<div class="cliche galleryid-[[+id]]" id="album-[[+id]]"> [[+items]] </div><!-- End #album-[[+id]] -->
default/image.tpl
<div class="cliche"> <div class="item"> <a title="[[+name]]" class="zoom" href="[[+image]]"> <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/> </a> </div> </div>
default/item.tpl
<dl class="item"> <dt class="album-icon"> <a class="zoom" title="[[+name]]" href="[[+image]]"> <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/> </a> </dt> </dl><!-- End .item -->
default/itemzoom.tpl
<dl class="item"> <dt class="album-icon"> <a class="zoom" title="[[+name]]" href="[[+image]]"> <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/> </a> </dt> </dl><!-- End .item -->
default/script.tpl
$("a.zoom").fancybox();
Gallerific plugin
galleriffic/item.tpl
<li> <a class="thumb" name="leaf" href="[[+image]]" title="[[+name]]"> <img src="[[+thumbnail]]" alt="Title #[[+id]]" /> </a> <div class="caption"> <div class="download"> <a href="[[+image]]">Download Original</a> </div> <div class="image-title">[[+name]]</div> <div class="image-desc">[[+description]]</div> </div> </li>
galleriffic/script.tpl
jQuery(document).ready(function($) { $('div.navigation').css({'width' : '220px', 'float' : 'left'}); $('div.content').css('display', 'block'); // Initially set opacity on thumbs and add // additional styling for hover effect on thumbs var onMouseOutOpacity = 0.67; $('#thumbs ul.thumbs li').opacityrollover({ mouseOutOpacity: onMouseOutOpacity, mouseOverOpacity: 1.0, fadeSpeed: 'fast', exemptionSelector: '.selected' }); // Initialize Advanced Galleriffic Gallery var gallery = $('#thumbs').galleriffic({ delay: 2500, numThumbs: 15, preloadAhead: 10, enableTopPager: true, enableBottomPager: true, maxPagesToShow: 7, imageContainerSel: '#slideshow', controlsContainerSel: '#controls', captionContainerSel: '#caption', loadingContainerSel: '#loading', renderSSControls: true, renderNavControls: true, playLinkText: 'Play Slideshow', pauseLinkText: 'Pause Slideshow', prevLinkText: '‹ Previous Photo', nextLinkText: 'Next Photo ›', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: false, autoStart: false, syncTransitions: true, defaultTransitionDuration: 900, onSlideChange: function(prevIndex, nextIndex) { // 'this' refers to the gallery, which is an extension of $('#thumbs') this.find('ul.thumbs').children() .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() .eq(nextIndex).fadeTo('fast', 1.0); }, onPageTransitionOut: function(callback) { this.fadeTo('fast', 0.0, callback); }, onPageTransitionIn: function() { this.fadeTo('fast', 1.0); } }); });
galleriffic/wrapper.tpl
<div id="gallery" class="content"> <div id="controls" class="controls"></div> <div class="slideshow-container"> <div id="loading" class="loader"></div> <div id="slideshow" class="slideshow"></div> </div> <div id="caption" class="caption-container"></div> </div> <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> [[+items]] </ul> </div> <div style="clear: both;"></div>
Bugs and Issues
Cliche is developed on GitHub at this address: https://github.com/argnist/Cliche
The creator's old version: https://github.com/lossendae/Cliche
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).