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

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¶

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