Hi,
The lightbox is really cool and simple to use. But I noticed a few minor flaws in formatting. I solved that with a custom template. But I wonder if this can be done better. Here is my website with the custom template I use now.
I'll start with the minor flaws I see when using the following:
[center]
[/center]
This generates the following output, in the screenshot below the top 6 images are generated by the code above, the 6 pictures below that are made by my custom template:
As you can see, the spacing between the top 6 images images are not even. Why this happens is unclear to me. The center shortcode has no effect on this in a positive or negative way.
So I created a custom template which generates the bottom 6 images:
{% extends 'partials/base.html.twig' %}
{% block content %}
{{ page.content|raw }}
<section id="custom-gallery" class="{{ grid_size }}">
<div class="images">
{% for image in page.media.images %}
<a rel="lightbox" href="{{ image.url|e }}">
<img src="{{ image.cropResize(300).url|e }}" alt="{{ image.basename|e|title }}"/>
</a>
{% endfor %}
</div>
</section>
{% endblock %}
Where I also added this CSS:
/* custom-gallery template */
#custom-gallery .images {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#custom-gallery .images a {
display: inline-block;
}
#custom-gallery .images img {
display: block;
margin: 5px;
}
Adding the CSS section custom-gallery fixes the formatting issues. So this leaves me with the following questions:
- Is this the "Grav way" of solving this formatting issue? I could've also added the
divin the markdown of course and add the rest of the HTML. But I thought a template would be better since it would keep maintenance in a central place. - Is there a better way to place a
divin markdown? - Are there improvements for my template? E.g. am I missing some tricks to simplify this?
- Any other improvement suggestions?