Gallery:

This section is used to display a collection of images which are clickable to view a fancy boxed image.

Available Options:

• Gallery with space between images.
• Gallery without space between images.
• Gallery with number of columns

Gallery with space between images:

Output:

Code:

<div class="darkout-section">
{% include do-gallery.html tag="modules" columns= 3 image-space="true" %}
</div>

How to add images:

• Step1: Navigate to the data file for gallery in _data > do-gallery.yml
• Step2: Add images with width (1024px) and height (768px) to the data file as shown in the below example.

- image: /assets/images/gallery/img-2.jpg  # Add image url here. Image dimension 1024px X 768px (WXH)
  title:  # Use gallery title name here
  tags: modules  # Use gallery tag name here

• Step3: In the data file tags is a mandatory value. Without using tags gallery will not be displayed.

How to add in page:

• Step1: Add gallery to the page using the include statement.

• Step2: On the page use

  <div class="darkout-section">{% include do-gallery.html tag="modules" columns= 3 image-space="true" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag gallery will not be displayed. (Mandatory)
    • Class:
      • Use additional class here as include variable.
    • Columns: use number of columns here.
      • 3 columns will be displayed in this gallery. This is also the default option for the gallery.
    • Image space: use true or false.
      • True: Image will have padding. This is also the default option for the gallery.

Gallery without space between images:

Output:

Code:

<div class="darkout-section">
{% include do-gallery.html tag="modules" columns= 3 image-space="false" %}
</div>

How to add images:

• Step1: Navigate to the data file for gallery in _data > do-gallery.yml
• Step2: Add images with width (1024px) and height (768px) to the data file as shown in the below example.

- image: /assets/images/gallery/img-2.jpg  # Add image url here. Image dimension 1024px X 768px (WXH)
  title:  # Use gallery title name here
  tags: modules  # Use gallery tag name here

• Step3: In the data file tags is a mandatory value. Without using tags gallery will not be displayed.

How to add in page:

• Step1: Add gallery to the page using the include statement.

• Step2: On the page use

  <div class="darkout-section">{% include do-gallery.html tag="modules" columns= 3 image-space="false" %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag gallery will not be displayed. (Mandatory)
    • Class:
      • Use additional class here as include variable.
    • Columns: use number of columns here.
      • 3 columns will be displayed in this gallery. This is also the default option for the gallery.
    • Image space: use true or false.
      • False: Image will not have padding.

Gallery with number of columns:

Output:

Code:

<div class="darkout-section">
{% include do-gallery.html tag="modules" columns= 2 %}
</div>

How to add images:

• Step1: Navigate to the data file for gallery in _data > do-gallery.yml
• Step2: Add images with width (1024px) and height (768px) to the data file as shown in the below example.

- image: /assets/images/gallery/img-2.jpg  # Add image url here. Image dimension 1024px X 768px (WXH)
  title:  # Use gallery title name here
  tags: modules  # Use gallery tag name here

• Step3: In the data file tags is a mandatory value. Without using tags gallery will not be displayed.

How to add in page:

• Step1: Add gallery to the page using the include statement.

• Step2: On the page use

  <div class="darkout-section">{% include do-gallery.html tag="modules" columns= 2 %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag gallery will not be displayed. (Mandatory)
    • Class:
      • Use additional class here as include variable.
    • Columns: use number of columns here.
      • 4,3,2 default 3 columns.
      • 2 columns will be displayed in this gallery.