How to: build a tag menu from tags associated to images from all galleries

67 Posts

fredela Reply #1, 10 years, 10 months ago

I have to build a tag based menu listing all tags associated to all images from all albums.
In browsers, it should look like this:

 <ul id="tag-list">
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag1</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag2</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag3</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag4</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag5</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag6</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag7</a></li>
 <li><a class="tags" href="link-to-a-page-showing-all-images-associated-to-the-tag">tag8</a></li>

The goal is to have a list of links each pointing to a page showing all images from all galleries associated to that specific tag.
<li> tags should be displayed inline (css) to have them disposed side by side horizontally, separated by a blank space.
So I have also to change the default comma separation with a blank spaced one.

I started testing with tagLister but I could not make it.
Any examples?

This question has been answered by Bruno17. See the first response.

[ed. note: fredela last edited this post 10 years, 10 months ago.]

5,888 Posts

Bruno17 Reply #2, 10 years, 10 months ago

if you have MIGX installed, you can try:

[[migxLoopCollection?
&packageName=`gallery`
&classname=`galTag`
&sortConfig=`[{"sortby":"tag"}]`
&groupby=`tag`
&tpl=`galleryTagLink`
]]

chunk galleryTagLink:

<li><a class="tags" href="[[~TheLandingID? &tag=`[[+tag]]`]]">[[+tag]]</a></li>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

5,888 Posts

Bruno17 Reply #3, 10 years, 10 months ago

with getReqParam installed, that on the landing-page:

[[!migxLoopCollection?
&packageName=`gallery`
&classname=`galItem`
&joins=`[{"alias":"Tags"}]`
&where=`{"Tags.tag":"[[!getReqParam? &name=`tag`]]"}`
&tpl=``
]]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

67 Posts

fredela Reply #4, 10 years, 10 months ago

Quote from: Bruno17 at Nov 06, 2015, 06:19 AM

with getReqParam installed, that on the landing-page:

[[!migxLoopCollection?
&packageName=`gallery`
&classname=`galItem`
&joins=`[{"alias":"Tags"}]`
&where=`{"Tags.tag":"[[!getReqParam? &name=`tag`]]"}`
&tpl=``
]]

Thank you Bruno.
I followed your instructions and had MIGX and getReqParam installed.
The code looks like working!
The tag list showed-up on my page.

<ul id="tags">
<li><a class="tags" href="">tag1</a></li>
<li><a class="tags" href="">tag2</a></li>
<li><a class="tags" href="">tag3</a></li>
<li><a class="tags" href="">tag4</a></li>
</ul>

But as you can see I miss the link.
I am new to these snippets and I must have missed something.
Also, it is not clear to me how to handle the landing page.

5,888 Posts

Bruno17 Reply #5, 10 years, 10 months ago

if you want to show the images on the same page, you would put both snippet-tags on the same page

and have the chunk like

<li><a class="tags" href="[[~[[*id]]? &tag=`[[+tag]]`]]">[[+tag]]</a></li>

if your landing-page should be another page replace

'TheLandingID' with the id of that page.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

67 Posts

fredela Reply #6, 10 years, 10 months ago

Quote from: Bruno17 at Nov 06, 2015, 07:17 AM

if you want to show the images on the same page, you would put both snippet-tags on the same page

and have the chunk like
<li><a class="tags" href="[[~[[*id]]? &tag=`[[+tag]]`]]">[[+tag]]</a></li>
if your landing-page should be another page replace

'TheLandingID' with the id of that page.

Of course, it was quite evident... Thanks!
Now links work like a charm but on the landing page i got raw php Arrays informations instead of images.

5,888 Posts

Bruno17 Reply #7, 10 years, 10 months ago

yeah, you will need to create a tpl-chunk and call that one

with &tpl=``

you can see all availiable fields in the printed array, when no tpl-property was defined.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

67 Posts

fredela Reply #8, 10 years, 10 months ago

Quote from: Bruno17 at Nov 06, 2015, 09:18 AM

yeah, you will need to create a tpl-chunk and call that one

with &tpl=``

you can see all availiable fields in the printed array, when no tpl-property was defined.

OK, thanks for your patience Bruno.
Here is the chunk with the placeholder [[+filename]] for src (therefore, image not found):

        <div id="block">
            <div id="pictures">
                <img class="full-img" src="[[+filename]]" alt="[[+description]]">
            </div>
        </div>

How do I get a dynamic src without having to set the URL into the Gallery extra field?
Is it possible?

5,888 Posts

Bruno17 Reply #9, 10 years, 10 months ago

I think, you will need to add the filepath to the src in the tpl-chunk.
Not sure, how the filepath looks like with gallery.

I do not use gallery.

maybe I can help, when you could post the array-output here and the file-folders, where the image-files are stored

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

67 Posts

fredela Reply #10, 10 years, 10 months ago

Actually I did not notice that the Array output in the [filename] has also the album folder name (myalbum/myimage.jpg).

[filename] => myalbum/myimage.jpg

So i just added the initial path to [[+filename]] in the chunk:

<div id="block">
    <div id="pictures">
        <img class="full-img" src="myalbum/myimage/[[+filename]]" alt="[[+description]]">
    </div>
</div>

And it works perfectly!
Thank you Bruno!

Answered How to: build a tag menu from tags associated to images from all galleries