#290

Product support

Visit this product's website for support.

Categories

  • Utility

The Gallery Plugin of The Conditional Pixel enables you to easily setup a flexible image gallery that is intended to be customised to suit your needs.

Dependencies

The Builder Plugin.

Categories

Backend users can create an unlimited number of categories and assign an unlimited number of images to categories.

Ordening

Backend users can change the order of the images.

Lightbox

This plugin uses the default template for the Record list component of the builder plugin (builderList) and a bit of vanilla javascript to convert the UL into a gallery. If an image is clicked, the full version of the image will be placed in an overlay.

Conventions

The plugin expects you to save your images in a subfolder of the folder gallery. The full-sized version is saved in gallery/originals and the thumbnail of the same name is saved in gallery/thumbnails.

Usage

Simply add the builderList component to your partial, page or layout and copy the javascript and CSS code below.

Add some javascript

This plugin uses the default template for the Record list component of the builder plugin (builderList) and a bit of vanilla javascript to convert the UL into a gallery. If an image is clicked, the full version of the image will be placed in an overlay. Change it to suit your needs.

if(typeof(String.prototype.trim) === "undefined")
{
    String.prototype.trim = function() 
    {
        return String(this).replace(/^\s+|\s+$/g, '');
    };
}
let thumbs = Array.from(document.querySelectorAll('.record-list li'));
if(thumbs.length>1)
{
    for (var i = 0; i < thumbs.length; i++) 
    {
        thumbs[i].classList.add('thumb');
        thumbs[i].innerHTML = '<img src="/storage/app/media/' + thumbs[i].innerHTML.trim() + '" onClick="pop(\'' + thumbs[i].innerHTML.trim() + '\')">';
    }
}
function pop(src)
{
    poof();
    var src = src.replace("thumbnails", "originals");
    var container = document.createElement('div');
    var img = document.createElement('img');
    container.setAttribute('id', 'full');
    container.addEventListener("click", poof);
    img.setAttribute('src', '/storage/app/media/' + src);
    img.setAttribute('width', '100%');
    document.body.appendChild(container);
    container.appendChild(img);
}
function poof() 
{
    if(document.getElementById("full"))
    {
        var elem = document.getElementById("full");
        elem.parentNode.removeChild(elem);
    }
}

Add some CSS

A bit of CSS is used to style the gallery and lightbox. Change it to suit your needs.

ul.record-list{padding:0;margin:0;list-style-type:none;}ul.record-list:after{content:'';display:block;clear:both;}
li.thumb img{width:120px;height:120px;margin:5px;float:left;cursor:pointer;}
#full{position:fixed;top:0;width:100%;height:100%;background:#5d6568;text-align:center;}
#full img{width:100%;max-width:1200px;}

Scope

When you use the Record list component of the builder plugin you can define a scope to only show images that belong to a certain category. The different options are hardcoded into the Model Image.php. Change them to suit your needs.

You can also use the Scope scopeCategory in combination with the category id. This requires you to change the parameter showExternalParam to true in the function defineProperties() in plugins/rainlab/builder/components/RecordList.php

public function scopeCategory($query,$id)
{
    return $query->where('category_id', $id);
}

Translation

The backend is written in English. The frontend does not use text.

Change the builderList template (optional)

You can add builderList/default.htm to your partials folder to overwrite the template for the builderList component of the builder plugin. In this case, builderList/defaults.htm, expects you to use the default alias builderList that you can set when using the builderList component.

If you use a different alias, like myAlias, simply add myAlias/default.htm to your partials folder instead. Now you can copy the original code from plugins/rainlab/builder/components/recordlist/default.htm, paste it inside your partial, and modify it. Only do this if you want to do more than simply show a list of images (e.g. include image captions).

1.0.11

Updated table tcp_gallery_images

May 06, 2017

1.0.10

Updated table tcp_gallery_images

May 06, 2017

1.0.9

Updated table tcp_gallery_images

May 06, 2017

1.0.8

Updated table tcp_gallery_images

May 06, 2017

1.0.7

Updated table tcp_gallery_images

May 06, 2017

1.0.6

Updated table tcp_gallery_images

May 06, 2017

1.0.5

Updated table tcp_gallery_images

May 06, 2017

1.0.4

Created table tcp_gallery_categories

May 06, 2017

1.0.3

Updated table tcp_gallery_images

May 06, 2017

1.0.2

Created table tcp_gallery_images

May 06, 2017

1.0.1

Initialize plugin.

May 06, 2017