Create List of Portfolio in Pages

Using Ghost
1

Hi Everyone,

Is it possible to create list of portfolio in Portfolio page. I have layout like this

image
image748×1092 5.43 KB

Any guidance or examples would be really appreciated.

Thanks in advance!

1 Like
2

Try the following code and customize it with your own style

  {{#get "tags" include="count.posts" limit="all"}}
    {{#foreach tags}}
      {{#if count.posts}}
      <div class="portfolio-group">
        <h2 class="portfolio-group-title">{{name}}</h2>
        <div class="portfolio-items-grid">
          {{!-- Get posts for this tag --}}
          {{#get "posts" filter="tag:{{slug}}" limit="3"}}
            <div class="portfolio-grid-row">
              {{#foreach posts}}
                <div class="portfolio-grid-col">
                  <a href="{{url}}">
                    <img src="{{feature_image}}" alt="{{title}}">
                    <h3>{{title}}</h3>
                  </a>
                </div>
              {{/foreach}}
            </div>
          {{/get}}
        </div>
      </div>
      {{/if}}
    {{/foreach}}
  {{/get}}

<style>
.portfolio-group { margin-bottom: 3rem; }
.portfolio-group-title { font-size: 2rem; margin-bottom: 1rem; }
.portfolio-items-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.portfolio-grid-row { display: flex; flex-wrap: wrap; width: 100%; }
.portfolio-grid-col { flex: 1 1 calc(33.333% - 1rem); box-sizing: border-box; text-align: center; }
.portfolio-grid-col img { width: 100%; height: auto; }
.portfolio-grid-col h3 { margin-top: 0.5rem; font-size: 1rem; }
@media(max-width:768px){ .portfolio-grid-col { flex: 1 1 100%; } }
</style
1 Like
3

thanks for the answer, i will try it.