gallery

Renders media set like object (Mediaset or Product) as a gallery.

Example

Copy

 {%- if product.photos != blank %}
  <div class="gallery-block">
    {% gallery product layout="product_slider" %}
  </div>
{% endif -%}

Example

Copy

 =>
<div class="edys-gallery-product-slider-slide">
 <div class="edys-gallery-product-slider-item edys-gallery-product-slider-item-not-loaded"
  data-gallery-photo-id="1"
  data-original-url="//media.voog.com/0000/0000/0001/photos/example.png"
  data-sizes="[{&quot;content_type&quot;:&quot;image/png&quot;,&quot;width&quot;:150,&quot;height&quot;:124,&quot;size&quot;:&quot;medium&quot;,&quot;schemeless_url&quot;:&quot;//media.voog.com/0000/0000/0001/photos/example_medium.png&quot;,&quot;url&quot;:&quot;//media.voog.com/0000/0000/0001/photos/example_medium.png&quot;},{&quot;content_type&quot;:&quot;image/png&quot;,&quot;width&quot;:80,&quot;height&quot;:66,&quot;size&quot;:null,&quot;schemeless_url&quot;:&quot;//media.voog.com/0000/0000/0001/photos/example.png&quot;,&quot;url&quot;:&quot;//media.voog.com/0000/0000/0001/photos/example.png&quot;}]"
  data-url="//media.voog.com/0000/0000/0001/photos/example.png"
  tabindex="-1">
 </div>
</div>

List of available attributes

layout

layout

Layout of the gallery. Possible values are:

grid
product_slider
slider
squares (default)
wall

	{%- if product.photos != blank %}
	<div class="gallery-block">
	{% gallery product layout="product_slider" %}
	</div>
	{% endif -%}

	=>
	<div class="edys-gallery-product-slider-slide">
	<div class="edys-gallery-product-slider-item edys-gallery-product-slider-item-not-loaded"
	data-gallery-photo-id="1"
	data-original-url="//media.voog.com/0000/0000/0001/photos/example.png"
	data-sizes="[{"content_type":"image/png","width":150,"height":124,"size":"medium","schemeless_url":"//media.voog.com/0000/0000/0001/photos/example_medium.png","url":"//media.voog.com/0000/0000/0001/photos/example_medium.png"},{"content_type":"image/png","width":80,"height":66,"size":null,"schemeless_url":"//media.voog.com/0000/0000/0001/photos/example.png","url":"//media.voog.com/0000/0000/0001/photos/example.png"}]"
	data-url="//media.voog.com/0000/0000/0001/photos/example.png"
	tabindex="-1">
	</div>
	</div>