The next step is to create a web template, it will contain the FetchXML to retrieve all the notes that are documents and it will also contain the HTML needed to create the image gallery with the pagination.

Here is the code of the web template:

{% assign org_url = ‘https://’ | append: website.adx_primarydomainname %}
 
{% assign pageurl = page.url %}
 
{% if request.params[‘page’] == null %}
  {% assign page = 1 %}
{% else %}
  {% assign page = request.params[‘page’] | integer %}
{% endif %}
 
{% assign nextPage = page | plus: 1 | string %}
{% assign prevPage = page | minus: 1 | string %}
 
{% fetchxml getimages %}
<fetch version=‘1.0’ output-format=‘xml-platform’ mapping=“logical” page=“{{ request.params[‘page’] | default:1 }}” count=“3” distinct=“true”>
  <entity name=‘annotation’>
    <attribute name=‘subject’ />
    <attribute name=‘notetext’ />
    <attribute name=‘filename’ />
    <attribute name=‘annotationid’ />
    <attribute name=‘filesize’ />
    <attribute name=‘documentbody’ />
    <order attribute=‘subject’ descending=‘false’ />
    <filter type=‘and’>
      <condition attribute=‘isdocument’ operator=‘eq’ value=‘1’ />
    </filter>
    <link-entity name=‘product’ from=‘productid’ to=‘objectid’ link-type=‘inner’ alias=‘ac’ />
  </entity>
</fetch>
{% endfetchxml %}
 
<div class=“wrapper”>
  <!– filter Items –>
    <nav>
      <div class=“items”>
        <span class=“item active” data-name=“all”>All</span>
        <span class=“item” data-name=“bag”>Bag</span>
        <span class=“item” data-name=“shoe”>Shoe</span>
        <span class=“item” data-name=“watch”>Watch</span>
        <span class=“item” data-name=“camera”>Camera</span>
        <span class=“item” data-name=“headphone”>Headphone</span>
      </div>
    </nav>
    <!– filter Images –>
  <div class=“gallery” style=“width: 100%;”>
    {% for photo in getimages.results.entities %}    
      <div class=“image” data-name=“{{ photo.subject }}” onclick=“preview(this)”>
        <span>
          <a id=“imgdownload {{ photo.subject }}” href=“data:image/jpg;base64,{{ photo.documentbody }}” download=“{{ photo.subject }}.jpg”>
            <img src=“data:image/jpg;base64,{{ photo.documentbody }}” alt=”>
          </a>
        </span>
        <div>
          <p style=‘color:white;’>{{ photo.subject }}</p>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
<!– Image preview box –>
<div class=“preview-box”>
  <div class=“details”><span class=“title”>Image Category: <p></p></span><span class=“icon fas fa-times”></span></div>
  <div class=“image-box”><img src=“” alt=“”></div>
</div>
<div class=“shadow”></div>
<!– Pagination –>
<br>
<div>
  <nav role=“navigation”>
    <ol class=“pagination”>
      {% if page > 1 %}
        <li>
          <a href=“{{ org_url | append: pageurl | append: ‘?page=’ | append: prevPage }}”>
            <span>&laquo;</span><span class=“visuallyhidden”>Prev</span>
          </a>
        </li>
      {% else %}
        <li class=“disabled”>
          <span>&raquo;</span><span class=“visuallyhidden”>Prev</span>
        </li>
      {% endif %}
 
      {% if getimages.results.more_records %}
        <li>
          <a href=“{{ org_url | append: pageurl | append: ‘?page=’ | append: nextPage }}”>
            <span class=“visuallyhidden”>Next</span><span>&raquo;</span>
          </a>
        </li>
      {% else %}
        <li class=“disabled”>
          <span class=“visuallyhidden”>Next</span><span>&raquo;</span>
        </li>
      {% endif %}
    </ol>
  </nav>
</div>

I will not explain the pagination part because that is part of the previous blogpost, but let me explain the HTML.

First we have a div element that will be the main container and just below another div with the “items” class that will be the container of the tag filters. Just below another div that will contain the foreach to iterate the result of FetchXML.

In each iteration a link <a> element is created that also contains an image element.

This trick of putting an image inside of a link element is to allow the user to download the image each time they click on it.

Then we have a div with the class class=”preview-box”, and the purpose of this is when the user clicks on an image it will be displayed in a larger size but as a modal

And the rest of the HTML is for the pagination feature.