Skip to main content

Colorbox

Submitted by rnsrk on

 

Colorbox opens the possibility to display Images, iframed or inline content etc. in a overlay above the current page. It's suitable for small and medium images or galleries without the need of zooming.

Prerequisites

  • Image effects needs to be installed with composer, so if you haven't a installed version >=2, please follow the instructions for your OS on the composer site.
  • ImageMagick binaries (Ubuntu, Window, MacOS and others) have to be installed on your OS.
  • Colorbox library can be downloaded it via the link and must be saved and unziped in root-dir ...is the directory, where your Drupal website files and folders are stored (core, modules, sites, themes, .htaccess etc.), if you follow the recommended project structure it's the web folder of your project directory, i.e. /var/www/html/wisski.com/web, or C:/xampp/htdocs/wisski.com/web. /libraries/colorbox, so that the path root-dir ...is the directory, where your Drupal website files and folders are stored (core, modules, sites, themes, .htaccess etc.), if you follow the recommended project structure it's the web folder of your project directory, i.e. /var/www/html/wisski.com/web, or C:/xampp/htdocs/wisski.com/web. /libraries/colorbox/jquery.colorbox-min.js exists.
  • At least one Image field.

Installation

If you installed WissKI via WissKI via the default server setup respectively via the docker setup, you already have Colorbox and all dependencies installed and you can skip the installation.

Navigate to your project-dir ... if you follow the recommended project structure, this the top level directory of you Drupal instance, containing the web and vendor folder and the composer.json, i.e /var/www/html/wisski.com/ or C:\xampp\htdocs\wisski.com\. Project directory and root directory (where your website with the index.html lives) can be the same. and install Colorbox, Image Effects and ImageMagick with

composer require drupal/colorbox drupal/imagemagick drupal/image_effects

Go to Manage Extend and check Colorbox, Image Effects and ImageMagick. Click Install.

To download the colorbox library, visit Manage Reports Status report. You may see a Section Errors found with a row Colorbox Library which says Not installed, if so click on the downloaded link and and save the zip-file to root-dir ...is the directory, where your Drupal website files and folders are stored (core, modules, sites, themes, .htaccess etc.), if you follow the recommended project structure it's the web folder of your project directory, i.e. /var/www/html/wisski.com/web, or C:/xampp/htdocs/wisski.com/web. /libraries and extract it. Ensure that the colorbox folder is called colorbox and the path root-dir ...is the directory, where your Drupal website files and folders are stored (core, modules, sites, themes, .htaccess etc.), if you follow the recommended project structure it's the web folder of your project directory, i.e. /var/www/html/wisski.com/web, or C:/xampp/htdocs/wisski.com/web. /libraries/colorbox/jquery.colorbox-min.js exists.

Example Screencast

Initial configuration

As soon as the installation is finished, change to the settings at Manage Configuration Image Toolkit (section Media). Under Select an image processing toolkit, check the radio button before ImageMagick image toolkit. Ensure, that under Graphic Package the Path to the package executables points to your ImageMagick installation, i.e. /usr/bin/ in Linux (type whereis convert in the console to find the path) or C:\Program Files\ImageMagick-x.x.xx-Q16\ in Windows.

Example screencast

Usage

Navigate Manage Configuration Pathbuilders and click on your pathbuilder ... is the place where you define the WissKI structure, configure groups and fields and tell WissKI to which adapter it should send the queries. You can export/import your pathbuilder setup. The administrative name of a pathbuilder could something like Collection and Collection Items or Named Entities. with a wisski-entity ... is an informational object about which information is to be stored or processed. The object can be material or immaterial, concrete or abstract, it is the type of objects or the classification of a group of things, i. e. Bobby (Gorilla gorilla) or Plesiosaurus dolichodeirus could both be individuals of the WissKI entity Specimen. , that contain an image, in the Image row, click on the caret to unfold the Operations menu. Select Configure Field and alter the Type of formatter for the field to Colorbox. Click Save. Go to an wisski-individual ... is a concrete instance of a wisski-entity. You create new individuals at WissKI Create. Afterwards they appear at WissKI Navigate under the appropriate WissKI entity, like Bobby (Gorilla gorilla). with an image via WissKI Navigate wisski-entity ... is an informational object about which information is to be stored or processed. The object can be material or immaterial, concrete or abstract, it is the type of objects or the classification of a group of things, i. e. Bobby (Gorilla gorilla) or Plesiosaurus dolichodeirus could both be individuals of the WissKI entity Specimen. and click on the image to opens the colorbox.

Example screencast

Advanced Configuration

You can add image styles at Manage Configuration Image styles (in the Media section). Click + Add image style, enter the Image style name, i. e. HD (1024x768) and click Create new style. Choose the Effect by clicking on Select a new effect, select Scale and Smart Crop and click Add. Enter 1024 as Width and 768 as Height and click Add effect. Save. Back in at the main edit page, click Save again. You can learn more about the available image effects here. Back at the image management section in Structure (the path above), you now have the new image style available.

If you want to alter the way images are displayed, you have to visit the management section in Structure, i.e. Manage Structure WissKI Entities and Bundles wisski-entity ... is an informational object about which information is to be stored or processed. The object can be material or immaterial, concrete or abstract, it is the type of objects or the classification of a group of things, i. e. Bobby (Gorilla gorilla) or Plesiosaurus dolichodeirus could both be individuals of the WissKI entity Specimen. Manage display and in the Image row, clicking the on the right side. Select the image styles according to the context, i. e. Medium for Image style for content and HD (1024x768) for Image style for Colorbox. Click Update and then Save.

Example screencast

Need help?

Write an email or join chat.wiss-ki.eu!