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.
- 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 /libraries/colorbox, so that the path root-dir /libraries/colorbox/jquery.colorbox-min.js exists.
- At least one Image field.
If you're using WissKI inside the virtual Lubuntu image, or installed 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 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 /libraries and extract it. Ensure that the colorbox folder is called colorbox and the path root-dir /libraries/colorbox/jquery.colorbox-min.js exists.
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.
Navigate Manage Configuration Pathbuilders and click on your pathbuilder with a wisski-entity , 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 with an image via WissKI Navigate wisski-entity and click on the image to opens the colorbox.
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 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.