For this implementation you will need to install Colorbox and Colorbox Inline module on a Drupal 8.1 site or higher.  For this exercise I wanted to create the portfolio page on this site, so that when I click on an image on the page I get a lightbox with the image, title (with link) and description of the item.  First create a block View with the image and the desired fields.  If you are displaying more than one image, as I am, using masonry, then you will need to get the ID field (hidden) to use as an identifier.  I have also obtained the image field twice.  You will see why shortly.


The View for this exercise


The only field not hidden, apart from our image, is the body field, but in fact we still hide it using css.

.views-field-body { display: none; }

We do this because we need the content on the page so that we can use it later for our colorbox.

Now configure the fields:The image field (Content: Thumbnail).  


Configuring the image field


We use an image formatter but override the field with a link as follows:

<a data-colorbox-inline="#views-colorbox-{{ nid }}" data-width="600">{{ field_project_thumbnail }}</a>

This will cause Colorbox Inline to serve up the contents of the element with the id #views-colorbox-{{ nid }} with a width of 600px when the image is clicked on.  Now we have to make sure that the target element is in place.  Let's configure the body field.  This is where we identify the target element with <div id="views-colorbox-{{ nid }}" class="views-colorbox"> and determine the content of the colorbox.  In our case we put an extra div round the title so we can do some extra theming.  There is pretty much full control of what you want to put into the colorbox.


Configure the body field



User login