Add an image gallery?
Is it possible to make the layout of my "photos" page into a gallery view similar to this example, instead of displaying it as a text list?
For context, I currently use a tag to generate a page of all photos. Did I set this up correctly, or is there a better way to achieve a gallery layout?
Yes, we'll modify your template's tagged.html view, which currently renders all the posts with a given tag, e.g. /tagged/photos:
<!DOCTYPE html>
<html>
{{> head}}
<body class="navigation-location-{{navigation_location}}">
{{> header}}
<div class="container">
<div class="main">
<h1>{{tag}}</h1>
{{#tagged}}
<!-- Grid for the tag 'photos' -->
{{#is.photos}}
<div class="photo-grid">
{{#entries}}
<a class="photo-link" href="{{{url}}}">
{{#thumbnail.medium}}
<img src="{{{url}}}" width="{{width}}" height="{{height}}" />
{{/thumbnail.medium}}
</a>
{{/entries}}
</div>
{{/is.photos}}
<!-- Default link list for all other tags -->
{{^is.photos}}
<div>
{{#entries}}
<a class="full-line" href="{{{url}}}"><em>{{title}}</em> <span class="small">{{date}}</span></a>
{{/entries}}
</div>
{{/is.photos}}
{{/tagged}}
<p><a class="small date" href="/archives">View the archives →</a></p>
</div>
</div>
{{> footer}}
</body>
</html>
You'll want to add some CSS to your template's style.css file but this should get you most of the way:
.photo-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* This creates gutters between items */
width: 100%;
}
.photo-grid .photo-link {
flex: 0 0 calc(25% - 0.75rem); /* 25% width minus the gap spacing */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.photo-grid img {
width: 100%;
height: auto;
display: block;
object-fit: contain; /* Maintains aspect ratio */
}
/* Make it responsive - switch to 2 columns on smaller screens */
@media (max-width: 768px) {
.photo-grid .photo-link {
flex: 0 0 calc(50% - 0.5rem);
}
}
/* Single column on very small screens */
@media (max-width: 480px) {
.photo-grid .photo-link {
flex: 0 0 100%;
}
}