In this video I explain how to create a simple custom template for the Image block in concrete5.7 that enables a lightbox effect.

Please note: since making this video it has become apparent that using the line:
$view->requireAsset('core/lightbox');
directly within the template only works when caching is off.

The code below has been updated to provide a current working solution.

The recently released 5.7 version of concrete5 includes a large number of changes, especially in term of the underlying codebase. The standard 'Image' block has also been re-factored, opening up new possibilities such as creating a simple custom template that enables a lightbox.

In concrete5.6, such a custom template wasn't possible, as the output from the block would mostly be generated from within the controller. In 5.7, the controller simply passes to the template of the block the file object, meaning it is now trivial to output whatever markup is desired.

Asset Framework

A new feature in 5.7 is the 'Asset Framework' - this is a mechanism to both use and declare common javascript and css libraries, instead of having to incorporate your own copies/versions. In the example in the video, I pull in assets for the included lightbox script (in this case 'Magnific Popup'), so the custom block template doesn't need to include its own copies. If you are a developer, it's worth checking out Andrew's video on this new feature.

Code used in the video

To keep things simple In the video I omitted code  to resize the larger version of the image down to something more appropriate for web use. In the code snippets below I've included such extra lines to resize the image. The numbers to change if you want to adjust the image size should be obvious.

Step 1 - create the block template

Create the following custom block template in /application/blocks/image/templates/magnific_pop/view.php :

<?php defined('C5_EXECUTE') or die("Access Denied.");

$c = Page::getCurrentPage();
if (is_object($f)) {
    $tag = Core::make('html/image', array($f, false))->getTag();
    $tag->addClass('ccm-image-block img-responsive');
    if ($altText) {
        $tag->alt($altText);
    }
    if ($title) {
        $tag->title($title);
    }

    $ih = Core::make('helper/image');
    $large = $ih->getThumbnail($f, 940, 705, false);

    print '<a title="'.$title.'" class="magnific-popup-image" href="' .$large->src . '">';
    print $tag;
    print '</a>';

} else if ($c->isEditMode()) { ?>

    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Image Block.')?></div>

<?php } ?>

... and in the same folder as the view.php file, create a view.js file and place the following code:

$(document).ready(function() {
    $('a.magnific-popup-image').magnificPopup({
        type:'image',
        gallery:{enabled:true}
    });
});

Step 2 - extend the block controller

To trigger the loading of the magnific lightbox script and css files, we need to create a small override of the image block's controller.php file, only to be able to override the registerViewAssets function.

Note though that this is unnecessary if your theme already includes the lightbox files.

We can create the file controller.php in the /application/blocks/image folder, with the following code:

<?php
namespace Application\Block\Image;

class Controller extends \Concrete\Block\Image\Controller {
    public function registerViewAssets() {
        // Ensure we have JQuery if we have an onState image
        $this->requireAsset('core/lightbox');

        if(is_object($this->getFileOnstateObject())) {
            $this->requireAsset('javascript', 'jquery');
        }
    }
}

With this in place, when an image block is used it will also trigger the inclusion of the required lightbox files.

This is also a good example of how to override a block's controller - note in particular the namespaces used and how this class extends the existing class. Like in 5.6, we can still create an override of a block controller, only overriding the specific functions we want to touch (instead of having to override all functions of the class).

Keep in mind that concrete5.7 is still being refined (and the current Image block isn't 100% feature complete), so there is a chance that the above will need to be adjusted in future updates. So perhaps treat it as an example of what is now possible with the image block than anything else.

We really like the fact that we'll be able to add a lightbox effect to the sites by simple dropping in this custom template. It means one less package/block to maintain.

-Ryan