getgrav / grav-premium-issues

Official Grav Premium Issues repository to report problems or ask questions regarding the Premium products offered.
https://getgrav.org/premium
7 stars 2 forks source link

[lightbox-gallery] Simple markdown template that will display all images loaded in 'media' w/o manually typing in EACH one? #343

Closed symgryph closed 1 year ago

symgryph commented 1 year ago

I am just trying to create a basic 'gallery' page, but don't want to have to manually type in all my pictures in markdown. I am also unsure of how to use a proper markdown (with default options for now) that will just let me upload images to the 'page' I am creating and have it 'just work.'

I create a blank page (using the nice typhoon theme 2.4.1), then add images to the gallery. I tried typing in the shortcode (in both expert mode AND raw mode with the licensed editor and no pictures come up. I don't want to have to manually enter EVERY single picture since I will have hundreds (or at least dozens).

Is there a simple markdown template I can use that will say "for image in gallery do" make a nice gallery?

I did read the docs, but they really don't tell me how to make a 'new' page from scratch using markdown with nice gallery mode.

rhukster commented 1 year ago

It sure sounds like you are looking for something like this:

https://getgrav.org/premium/lightbox-gallery/docs#displaying-a-gallery-of-thumbnails

If you are looking for something even simpler with a gallery of the images that are in a single page's folder and in the order they are set in the pagemedia field, and no title or descriptions for the image, you could drop the gallery definition in the page's frontmatter and simplify the twig to something like this:

<div class="lightbox-gallery">
    <div class="lightbox-gallery__columns">
        {% set gallery = md5(page.url) %}
        {% for img in page.media.images %}
        <div class="lightbox-gallery__column">
            {% set content = img.cropZoom(thumb_width,thumb_height).html(title, title) %}
            {% set image =  img.url %}
            {% include "partials/lightbox.html.twig" %}
        </div>
        {% endfor %}
    </div>
</div>

I think that will do what you want. Uou will still need the CSS at the top of the example though, or style your own.