Skip to Content

Adding a gallery in Gutenberg

Video

You can add a gallery in the Gutenberg and you can choose between the default WordPress gallery or if you have purchased the Premium plugin, you can also choose to use the Minimalio Gallery.

Options for Minimalio Gallery

Grid or Masonry

Choose if you want to use the masonry layout or the grid layout with different aspect-ratios.

Number of columns

Choose how many images are in one row, so how many columns does the gallery have. You can also set it up differently for different views, so for table and mobile.

Gutter – the gap between images

Choose how big is the gap between the images, you can also set it up differently for different views.

Image hover

Choose what happens, when the user hovers (mouse over) your images. There are 4 options – Zoom in, Zoom out, Greyscale to color and Color to greyscale.

Lightbox

All the images are automatically opened in lightbox, when clicked, you can change the lightbox background in Customizer -> Minimalio options -> Lightbox.

Transcription of the video

Hi! Today, I’ll show you how to add images to your single portfolios or galleries in WordPress.

Adding images is super easy. When you’re in the Gutenberg editor of the page or portfolio where you want to add the gallery, you have two options: use the default WordPress gallery or use the custom ‘Minimalio Gallery’ that offers more features.

To add a ‘Minimalio Gallery’:

  1. Search for ‘gallery’ or ‘Minimalio’ in the block selector.
  2. Choose ‘Minimalio Gallery’ and add the images you want.
  3. Insert the images, and you’ll see additional settings in the block options.

Extra Features in ‘Minimalio Gallery’:

  • Gallery Style: You can choose between the ‘Masonry’ style, which keeps the images in their default aspect ratio and connects them neatly, or a ‘Grid’ style with selectable aspect ratios.
  • Number of Columns: Set different column counts for desktop, tablet, and mobile views. For example, four columns on desktop, three on tablet, and two on mobile. The layout will automatically adjust based on the screen size.
  • Gutter Size: Control the space between images, with options to set different sizes for different devices.
  • Hover Effects: Select from options like ‘Zoom In,’ ‘Zoom Out,’ or ‘Grayscale to Color.’ For example, choosing ‘Grayscale to Color’ will make the images appear in grayscale, changing to color when hovered over.

When images are clicked, they automatically open in a lightbox for a full-screen view. To change the lightbox background color, go to ‘Customizer’ > ‘Minimalio Options’ > ‘Lightbox’ and select your preferred color.

And that’s it! With these features, you can create dynamic and visually appealing galleries in your portfolios. Thanks for watching!