portfolio_grid.html

<!-- Portfolio Grid -->
{% if site.locale and site.locale != "" and site.locale != nil %}
<section class="bg-light page-section" id="{{ site.data.sitetext[site.locale].portfolio.section | default: "portfolio" }}">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase">{{ site.data.sitetext[site.locale].portfolio.title | markdownify | default: "Portfolio" }}</h2>
        <h3 class="section-subheading text-muted">{{ site.data.sitetext[site.locale].portfolio.text | markdownify }}</h3>
      </div>
    </div>
    <div class="row">
	{% for project in site.portfolio %}
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" data-toggle="modal" href="#p{{ forloop.index }}">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <i class="{{ site.data.style.portfolio-icon | default: "fas fa-plus fa-3x" }}"></i>
            </div>
          </div>
          <img class="img-fluid" src="{{ project.caption.thumbnail }}" alt="">
        </a>
        <div class="portfolio-caption">
          <h4>{{ project.caption.title }}</h4>
          <p class="text-muted">{{ project.caption.subtitle }}</p>
        </div>
      </div>
	{% endfor %}
    </div>
  </div>
</section>
{% else %}
<section class="bg-light page-section" id="{{ site.data.sitetext.portfolio.section | default: "portfolio" }}">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase">{{ site.data.sitetext.portfolio.title | markdownify | default: "Portfolio" }}</h2>
        <h3 class="section-subheading text-muted">{{ site.data.sitetext.portfolio.text | markdownify }}</h3>
      </div>
    </div>
    <div class="row">
	{% for project in site.portfolio %}
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" data-toggle="modal" href="#p{{ forloop.index }}">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <i class="{{ site.data.style.portfolio-icon | default: "fas fa-plus fa-3x" }}"></i>
            </div>
          </div>
          <img class="img-fluid" src="{{ project.caption.thumbnail }}" alt="">
        </a>
        <div class="portfolio-caption">
          <h4>{{ project.caption.title }}</h4>
          <p class="text-muted">{{ project.caption.subtitle }}</p>
        </div>
      </div>
	{% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% include modals.html %}