Best way to make use of the lightbox + center images

Support Content & Markdown
2

@AquaL1te

  • Why?
    From stackoverflow:

    The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).
    Adjust the vertical-align with CSS: img{vertical-align: bottom}

  • ‘Grav way’
    I don’t think there is a best ‘Grav way’. Grav often offers multiple ways…
    If the images are part of the content, you have no other choice than adding code (HTML, shortcode, Twig) to Markdown. Else, I would use a template (thats where templates are for).
  • Improvements
    Not sure if it is an improvement… But an alternative to generating image elements could be:
    {{ image.cropResize(300).html('', image.basename|title) | raw }}
  • Using Twig inside page.
    Template ‘partials/centered-images.html.twig’:
    <section id="custom-gallery" class="{{ grid_size }}">
  <div class="images">
  {% for image in page.media.images %}
  <a rel="lightbox" href="{{ image.url|e }}">
    {{ image.cropResize(300).html('', image.basename|title) | raw }}
  </a>
  {% endfor %}
  </div>
</section>
    Page ‘03.images/default.md’
    ---
title: Images
process:
  twig: true
---
# Mardown before

{% include 'partials/centered-images.html.twig' %}

# Markdown after

Note:
Don’t change/add templates inside a installed theme, but instead in an inherited theme. If not, all changes will be lost when a new version of the theme gets installed.

1 Like