Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Create a Justified Image Grid Gallery

Have you ever wanted to make a justified grid gallery? Envira makes it easy to display your images in a justified image grid. Simply follow our documentation to learn how to create your very own justified image gallery.

  • FAQs
  •  


    Requirements


    Configuration

    Step 1 – Create or Edit a Gallery

    First select a gallery to edit or create a new gallery.


    Step 2 – Configure Justified Layout

    Now that you’re editing your gallery, select the Config tab to begin configuring your justified gallery.

    Select the Config tab to begin configuring your justified image gallery with Envira.

    Next, within the Config tab select Automatic from the Number of Gallery Columns dropdown field.

    Choose Automatic from the Layout options to display your gallery in a justified image grid.

    You’ll also find the following specific options within the Config tab when you choose Automatic layout:

    • Enable Lazy Loading? — Selecting this will enable the lazy loading for all images inside this gallery.
    • Lazy Loading Delay — Set the number (in milliseconds) to delay when new images are loaded
    • Automatic Layout: Row Height — Determines how high (in pixels) each row will be. 150px is default.
    • Automatic Layout: Margins — Sets the space between the images (defaults to 1) for the ‘gutters’ of each column.
    • Automatic Layout: Last Row — Sets how the last row is displayed. Available options: Left (image will align left), Fill (image will fill the space making the image fullwidth of the gallery) or Hide (the last image will not display).
    • Automatic Layout: Gallery Theme — Sets the theme for the gallery display. ‘Normal’ is available by default, use the Themes Addon for more options. Available options: Normal, Blur, Desaturate, Threshold and Vintage.
    • Display Gallery Description? — Choose to display a description above or below this gallery’s images. Available Options: Do not display, Display above gallery, Display below gallery.
    • Enable CSS Animations? — Enables CSS animations when loading the main gallery images.
    • Enable Title/Caption? — Sets the image title and/or caption over the image on hover.
    • Image Opacity — The opacity to display images at when loading the main gallery images using CSS animations (between 1 and 100%).
    • Sorting — Choose to sort the images in a different order than displayed on the Images tab. Available options: No Sorting, Random, Publish Date, Filename, Title, Caption, Alt tag and URL.
    • Image Size — Choose an option from the dropdown to set your image sizes. If you choose Default you can complete the Image Dimensions width and height next.
    • Image Dimensions — Set your width and height for your images and Enivra will create these sizes for you.
    • Crop Images? — Selecting this will use the crop center center for your image sizes.
    • Set Dimensions on Images? — Selecting this option will automatically set the width and height on the image.

    Step 3 – Publish and View Justified Gallery

    Finally, save the changes to your gallery and either embed it on a post/page or view it from the Standalone URL to see your justified gallery.

    Envira’s Justified Layout will automatically fit the best number of images in each row of the gallery and create a gallery that resembles the following:

    A justified image grid gallery using Envira Gallery.

    That’s it, you’ve successfully created a justified grid gallery!


    FAQs

    Q: Can I automatically apply photo effect filters to the images using justified layout?

    A: Yes! If you’re using the Themes Addon (available with a Plus or greater license) you can apply special photo effects using the Justified Layout option following our guide: How to Apply Photo Effects to Galleries and Albums.


    Q: Can I use the justified grid layout with Albums?

    A: Yes! If you’re using the Albums Addon you can also configure your albums to display in a justified grid following the steps above when editing the album.

    [i]
    [i]
    [i]
    [i]