Show Options

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

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.

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.

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.