Hi,

Wanted to find out if it's possible to show gallery in a post by somehow setting which gallery to use in a post?

Thanks in advance

Last updated 10 years ago

Yes, You can add gallery component to post and select any available gallery you have created. In your case you have to put gallery component in all your posts with the gallery you need by selecting the gallery from component options.

There isn't an option to add components while creating/editing a post.

I tried to add gallery component to post page and then put each of the lines below in the post

{% component 'gallery' %}
{% component 'gallery' idGallery = "1" %}
\{% component 'gallery' idGallery = "1" %\}

but that doesn't seem to work.

Can you please explain how to set which gallery to use based on post?

Thanks in advance

Last updated 10 years ago

idGallery is the name of gallery that you have created from backend, it's not an id of gallery.

Rather you can use alias to add gallery component to post page, like:

{% component 'gallery' %}
{% component 'gallery1' %}
{% component 'gallery2' %}

and select idGallery from the component options as per your need.

Last updated 10 years ago

So you are stuck with one gallery for all posts? Or can it be set per post?

Basically if I take a trip to a sporting event and write about that I want those pictures grouped there. Then when I go to the beach and write about that, I want those beach pictures there.

Is that possible?

Has anyone found a solution for this. Am thinking of creating a blank page displaying the desired gallery, then in the post I embed the page using iframe

I added "Blog+RJ Gallery" plugin but the {% component 'gallery' gallery=post.rjgallery %} in doc don't work for me.

I created a partial with the default markup of the RJ gallery plugin and replace __SELF__ variable.

{% put styles %}
    <style>
        #gallery {
            list-style: none outside none;
            padding-left: 0;
        }
        #gallery li {
            display: block;
            float: left;
            height: {{ height }}px;
            margin-bottom: 6px;
            margin-right: 6px;
            width: {{ width }}px;
        }
        #gallery li a {
            height: {{ height }}px;
            width: {{ width }}px;
        }
        #gallery li a img {
            height: {{ height }}px;
            width: {{ width }}px;
        }
    </style>
{% endput %}
{% put scripts %}
    <script>
         $(document).ready(function() {
            var gallery = $("#gallery").lightGallery({
                // Elements
                thumbnail   : {{ thumbnail }},
                caption     : {{ caption }},
                desc        : {{ desc }},
                counter     : {{ counter }},
                controls    : {{ controls }}, 
                preload     : {{ preload }},

                // Transitions
                mode   : '{{ mode }}',
                useCSS : true,
                easing : 'linear',
                speed  : {{ speed }},

                // Navigation
                hideControlOnEnd : false,
                loop             : {{ loop }},
                auto             : {{ auto }},
                pause            : {{ pause }},
                escKey           : {{ escKey }},
                swipeThreshold    : 50,

                lang : { allPhotos: '{{ lang }}' },
            });
        });
    </script>
{% endput %}

<div style="width:100%">
    <ul id="gallery" class="gallery">
        {% for image in gallery.images %}
            <li data-src="{{ image.path }}" data-title="{{ image.title }}" data-desc="{{ image.description }}">
                <a href="#"><img src="{{ image.getThumb(width, height, resizer) }}" alt="{{ image.title }}" /></a>
            </li>
        {% endfor %}
    </ul>
</div>

I am able to call it in blog post page with : {% partial "components/blog-gallery.htm" gallery=post.rjgallery %}

Last updated 8 years ago

Can I iterate list of gallery and display? can you please guide me. so that I can iterate and display all galleries with the gallery name as heading on the page.