Hi, is there a way to add a class to an element via the couch-backend?
I'm using a fancybox image gallery and in order to have one thumbnail for multiple images I need to be able to add (and remove) the class "hidden" to certain images.
I think it's not possible, or is it?

[KK]

Hi Toby,

We can certainly use the back-end to add classes to HTML elements but the exact method would depend on what you are trying to achieve.

Please post in the HTML markup for the fancybox gallery you are trying to create and we can discuss as to what should be the best way of doing so.

Thanks.

OK, thanks. This is the original html-code:

Code: Select all

<a class="fancybox" href="images/agi_dec1.jpg" data-fancybox-group="Agi" title="Agi"><img src="images/thumbs/th_agi_dec1.jpg" alt="" /></a> 
<a class="fancybox hidden" href="images/agi_uj.jpg" data-fancybox-group="Agi" title="Agi"><img src="images/thumbs/th_agi_uj.jpg" alt="" /></a> 

This is what I came up with :

Code: Select all

<cms:pages masterpage="gallery.php" include_subfolders='0' >
<a class="fancybox" href="<cms:show gg_image />" data-fancybox-group="<cms:show k_page_title />" title="<cms:show k_page_title />"><img src="<cms:show gg_thumb />" alt="" /></a> 
</cms:pages> 

I would like to add and remove the "hidden" class from the hyperlink.

[KK]

If I understood the problem right, you are trying to create a 'group' of images (links actually) for fancybox script where only the first image of the group is visible and the rest have the 'hidden' class set.
If that is so, we can use the 'k_count' variable that cms:pages tag sets to the number of the iteration it is currently on (i.e. will be '1' for the first page, '2' for the second etc.)

The following code should work where all pages except the very first have the 'hidden' class -

Code: Select all

<cms:pages masterpage="gallery.php" include_subfolders='0' >
<a class="fancybox<cms:if k_count gt '1'> hidden</cms:if>" href="<cms:show gg_image />" data-fancybox-group="agi" title="<cms:show k_page_title />"><img src="<cms:show gg_thumb />" alt="" /></a>
</cms:pages>

Please note that, unlike your version, I've set the data-fancybox-group attribute to a fixed value ('agi') for all the pages because fancybox treats as a group only those elements that have a common value for this attribute.

Hope this helps.
Please let me know if I did not understand the problem correctly but please attach a working HTML mockup of a sample gallery for reference.

Thanks.

Thanks KK! You understood almost right. What I want is multiple groups of images (links). The rest is like you described it. My idea was to "create" the "groups" through the k_page_title Variable. Meaning, the Images of the same group would all have the same Title.
Can you think of a way to get not only the first element but the first of every "group" with the same Title?

Also, can you direct me to an overview of all the variables like k_count etc? i didn't find it in the documentation, but maybe I'm just too dumb.

[KK]

My idea was to "create" the "groups" through the k_page_title Variable. Meaning, the Images of the same group would all have the same Title.

'k_page_title' is unique to each page so it won't be suitable for the term common to all the pages in the group.

I think the best way here would be to group the images in folders and then use the folder name as the common data-fancybox-group attribute.

Code: Select all

<cms:pages masterpage="gallery.php" include_subfolders='0' folder='place_folder_name_here' >
<a class="fancybox<cms:if k_count gt '1'> hidden</cms:if>" href="<cms:show gg_image />" data-fancybox-group="<cms:show k_page_foldername />" title="<cms:show k_page_title />"><img src="<cms:show gg_thumb />" alt="" /></a>
</cms:pages>

Does this do what you want? Please let me know.

As for the info about all the variables, all the tags documented at http://www.couchcms.com/docs/tags-reference also have their variables listed.
However, the best way of knowing which variables are available at a particular point in the template is to place either <cms:dump /> (http://www.couchcms.com/docs/tags-reference/dump.html) or <cms:dump_all /> at that location to see an actual dump all available variables with their values.

Hi KK

Thanks, I think i will be getting there, but it still doesn't work. I've created the folders and placed the images in them which works just fine.
The code I use now is:

Code: Select all

 <cms:pages masterpage="gallery.php" include_subfolders='0' 
       folder='k_page_foldername' >
      <a class="fancybox<cms:if k_page_folderpagecount gt '1'> hidden</cms:if>" 
        href="<cms:show gg_image />" 
        data-fancybox-group="<cms:show k_page_foldername />" 
        title="<cms:show k_page_title />">
        <img src="<cms:show gg_thumb />" alt="" /></a>
        <cms:dump />
</cms:pages>

However, the "k_page_folderpagecount"-Variable always is equal to the number of total images in the folder, same as "k_page_foldertotalpagecount". And the "k_count" doesn't care about folders at all, it just goes from 1 to n. I couldn't find a variable which indicates if an image is the first in a folder. Any ideas?

[KK]

Hi,

Let us assume you have two folders named 'folder_one' and 'folder_two'.
The following snippet then should create a single group of images for fancybox where all images will belong to folder_one (please notice that the 'folder' parameter is set to 'folder_one' i.e. the name of the folder)

Code: Select all

<cms:pages masterpage="gallery.php" include_subfolders='0' 
    folder='folder_one' >
        <a class="fancybox<cms:if k_count gt '1'> hidden</cms:if>" 
            href="<cms:show gg_image />" 
            data-fancybox-group="<cms:show k_page_foldername />" 
            title="<cms:show k_page_title />">
            <img src="<cms:show gg_thumb />" alt="" /></a>
</cms:pages>

To create a second group of images belonging to the second folder, we'll have to repeat the above snippet this time specifying the name of the second folder e.g.

Code: Select all

<cms:pages masterpage="gallery.php" include_subfolders='0' 
    folder='folder_two' >
        ..
</cms:pages>

Instead of repeating almost the same code multiple times, we can make use of the cms:folders tag (http://www.couchcms.com/docs/tags-refer ... lders.html) to enumerate all the available folders and then feed the names to the cms:pages tag.

Code: Select all

<cms:folders masterpage="gallery.php">
    <cms:pages masterpage="gallery.php" include_subfolders='0' 
        folder=k_folder_name >
            <a class="fancybox<cms:if k_count gt '1'> hidden</cms:if>" 
                href="<cms:show gg_image />" 
                data-fancybox-group="<cms:show k_page_foldername />" 
                title="<cms:show k_page_title />">
                <img src="<cms:show gg_thumb />" alt="" /></a>
    </cms:pages>
</cms:folders>

Please notice in the snippet above that our original code is now nested within cms:folders
tag which loops through the folders and sets the k_folder_name variable to the name of the folder being iterated.
We use this k_folder_name variable to specify the 'folder' parameter of the cms:pages tag instead of hard-coding the names as we did before (notice that there are no enclosing quotes around k_folder_name which means it is a variable).

Please try these snippets and let me know if it is close to what you desire.
Thanks.

Thanks! This did the trick. Also I hopefully learned something.
Great support!