How to enable the light-box effect for embedded images ?

In WordPress, you are able to insert a single image into your content or a gallery of images into your content.
In the  Customizr WordPress theme, we enhanced this feature by allowing your images to show up in a light-box effect when you click on it.

Settings

Before proceeding to embed our image or galleries, there are a few settings that we have to make sure that they are enabled.

Please go to Appearance -> Customize -> Global settings -> Image settings
Find the setting -> Lightbox effect on images. This setting should be checked.

Please go to Appearance -> Customize -> Content -> Galleries
Find the setting -> Enabled Customizr galleries. This setting should be checked.
Find the setting -> Enabled lightbox effects in galleries. This setting should also be checked.

Embed A Single Image

You can embed a single image in your content by using the following steps.

  1. Click on the Add Media button found above your WordPress content editor.
    Your media manager will pop up.
  2. Select the image that you want to embed.
  3. Important: At the bottom right corner of your media manager,
    look for the section Attachment Display Settings,

    • Find the setting -> Link To
    • Select -> Media File

  4. Click on Insert into post button and your image will be embedded into your content.
  5. Click on Publish or Update button and View your post.
  6. Click on your image and it will pop up in a light-box.

Edit An Existing Embedded Single Image

If you have an existing image that you need to show in a light-box, you can use the following steps.

  1. Edit your post
  2. In your WordPress visual editor, click on your image and select the pencil icon.
    Your image will show up in media manager.
  3. Important: Look for -> DISPLAY SETTINGS
    • Find the setting -> Link To
    • Select -> Media File

  4. Click on Update button. Your image settings will be updated into your content.
  5. Now update your Post and View your post.
  6. Click on your image and it will pop up in a light-box.

You can embed a WordPress gallery of images by using the following steps.

  1. Click on the Add Media button found above your WordPress content editor.
    Your media manager will pop up.
  2. On the left hand side of your screen, click on the Create Gallery Link.
  3. Start selecting your images for your gallery.
    Click on Create a new gallery button after you have done selecting.
  4. Important: In the Edit Gallery screen -
    On the right hand corner of the screen, you will find the section GALLERY SETTINGS

    • Find the setting -> Link To
    • Select -> Media File

  5. Click on Insert gallery button.
  6. Publish your post and View your post.
  7. Your gallery will pop up in a light-box when you click on the thumbnails.

If you have an existing gallery and you want your images to pop up in a light-box instead of going to it's attachment page, you can use the following steps.

  1. Edit your post.
  2. Click on your gallery and select the pencil icon.
  3. Your media manager will pop up and show you the Edit Gallery screen.
  4. Important: In the Edit Gallery screen -
    On the right hand corner of the screen, you will find the section GALLERY SETTINGS
    • Find the setting -> Link To
    • Select -> Media File

  5. Click on Update gallery button. Your gallery will be updated with new settings.
  6. Update your post and View your post. Your image will pop up in light-box when you click on your thumbnail.

Written by Denzel Chia