Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • How to use it
  • Grid Layout
  • Masonry Layout (Pro)
  • Macy.js
  • Flat Layout
  • Inline-carousel Layout (Pro)
  • Images slider (Pro)
  • Lightbox (Pro)
  • FAQs

Was this helpful?

  1. 🌟Display Content
  2. Meta fields
  3. Content fields

Gallery

PreviousoEmbedNextChoice fields

Last updated 1 month ago

Was this helpful?

Displays images for the Gallery field type (e.g. ACF Gallery field).

In the Lite version, if you add a Gallery field to your View it will display the list of images in the default layout. In the Pro version you’ll be able to change the Gallery Layout to Masonry plus the option to enable the Lightbox with slider options.

Note: For the Masonry Gallery Layout to work you’d need to ensure that the Return Format is set to Image Array or Image ID. Choosing the Image URL doesn’t provide the necessary image dimensions.

How to use it

Edit or add a new View.

Select the Group containing the gallery field.

Select the Gallery field from the Field dropdown, and select the Image Size.

Grid Layout

The CSS grid feature is the simplest way to display Gallery items as a grid.

The example code below shows how to set this up. Change '2' to your desired of columns in the grid-template-columns rule, and adjust the gap, which controls the space between items, from 20px to your preferred value:

Twig template:

{% if gallery.value %}
    <div class='acf-view__gallery'>
        {% for image_item in gallery.value %}
            <img class='acf-view__image' src="{{ image_item.value }}"
                 width="{{ image_item.width }}" height="{{ image_item.height }}" alt="{{ image_item.alt }}"
                 decoding="{{ image_item.decoding }}" loading="{{ image_item.loading }}"
                 srcset="{{ image_item.srcset }}" sizes="{{ image_item.sizes }}">
        {% endfor %}
    </div>
{% endif %}

CSS code:

#view__gallery {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
 #view__gallery {
  grid-template-columns: repeat(2, 1fr);
 }
}

Masonry Layout (Pro)

From the Gallery layout dropdown, select the Classic or Flat masonry option and press the Update button.

The Classic masonry employs the Macy.js, while Flat uses a Flat Masonry script from Lightsource.

Pro tip: You can apply both Masonry and Lightbox to the same gallery field simultaneously to provide a visually appealing preview and allow for a detailed view on click.

After saving, switch to the CSS & JS tab, and optionally fine-tune the instance settings:

Macy.js

In the Masonry instance settings, you can fine-tune the number of columns, the gap between items (margin), and the responsive behaviour. Check the Macy.js documentation to learn more.

var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://github.com/bigbite/macy.js */
	new Macy({
		container: gallery,
		columns: 4,
		margin: {
			x: 0,
			y: 0,
		},
		breakAt: {
			992: 2,
			400: 1,
		},
	});
}

Flat Layout

The flat masonry is a simple script, which offers only the basic settings, including gap between items and min-row height:

var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://gitlab.com/lightsource/masonry */
	new AcfViewsMasonry(
		gallery,
		{
			ROW_MIN_HEIGHT: 180,
			GUTTER: 20,
			MOBILE_GUTTER: 10,
			MOBILE_WIDTH: 992,
		}
	);
}

Inline-carousel Layout (Pro)

From the Gallery layout dropdown, select the Inline-Gallery option and press the Update button.

The Inline-Gallery option employs the Carousel feature of the LightGallery library.

After saving, switch to the CSS & JS tab, and optionally fine-tune the instance settings:

var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	var container = document.createElement('div');
	container.classList.add('acf-view__inline-gallery');
	gallery.parentElement.insertBefore(container, gallery);

	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(gallery, {
		container: container,
		showMaximizeIcon: true,
		download: true,
		enableDrag: false,
		allowMediaOverlap: false,
		closable: false,
		plugins: [window.lgThumbnail,],
	}).openGallery();
}

Images slider (Pro)

From the Enable slider dropdown, select the Splide option and press the Update button. This option employs the Splide library, and have the following defaults:

var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://splidejs.com/guides/options/ */
	new Splide(gallery, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

Lightbox (Pro)

Lightbox shows a zoom icon on image hover and allows readers to click and open an image in full-screen mode and switch between items if there are others.

Pro tip: You can apply both Masonry and Lightbox to the same gallery field simultaneously to provide a visually appealing preview and allow for a detailed view on click.

From the Enable lightbox dropdown, select the LightGallery or Simple (no settings) option and press the Update button. The LightGallery option employs the LightGallery library, and have the following defaults:

var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(gallery, {
		closeOnTap: true,
		counter: true,
		download: false,
		allowMediaOverlap: false,
		enableDrag: false,
		plugins: [window.lgThumbnail,],
	});
}

FAQs

Masonry last image stretching

How to fix it using CSS overrides

Copy the following CSS snippet into your ACF View -> Advanced Tab -> CSS Code field.

// masonry images last image fix stretching
#view .acf-view__image-outer {
    width: fit-content !important;
}
Example of the Grid, taken from the WPLake's .
Example of the Macy.js, taken from the WPLake's .
Example of the Flat masonry, taken from the WPLake's .
Example of the Inlline-Carousel, taken from the WPLake's .
Example of the images slider, taken from the WPLake's .
Example of the lightbox, taken from the WPLake's .
ACF Gallery article
ACF Gallery article
ACF Gallery article
ACF Gallery article
ACF Gallery article
ACF Gallery article