How to: Open blog image in Lightbox

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page. 

The default behaviour of an image that is added to a text module (including a blog) is that it does not open in a Lightbox. A Lightbox is a method that displays images in full size (or as large as the screen size allows) and centred while dimming and disabling the rest of the web page until the Lightbox is closed by either clicking the close ‘X‘ or by clicking away from the image. To see the difference, the images in (1) and (2) below opens in a Lightbox, but the image in (3) has not had its settings adjusted and retains the default behaviour. Altering this behaviour is very simple and takes only a few seconds to ‘adjust’. To do this ……

  1. Add media in normal way to the text module within the blog using the “Add Media’ button, selecting an existing image or uploading a new image
    How to: Open blog image in Lightbox
  2. Click the image within the text module, then the ‘pencil’ icon to open the ‘Image Details’
    How to: Open blog image in Lightbox
  3. In Image Details | Display Settings | Link To, select: ‘Media File’  or ‘Image URL’ (1) (depending whether you are in a text module on a Page or Post) from the drop-down menu.
    Note: if you select ‘Image URL’, when it is saved it will change to ‘Custom URL’ and the URL of the selected image will be displayed.
    How to: Open blog image in Lightbox
  4. At the bottom of the ‘Image Details’ box, under ‘Link CSS Class’ (2), enter:
    et_pb_lightbox_image
  5. Update the Image details, Save & Exit the module, Update the page

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This