I have a gallery with 8 items. Each item has a group for 3 editables (text, url, image). It looks great in the admin. But I cant figure out how to use repeatable, which contains this group.

Code: Select all

    <cms:repeatable name="test" label="Menu" > 
        <cms:editable name='gallery_item1' label='Položka 1' desc='' type='group' collapsed="1" order="11" />
        <cms:editable name="galleryitem_name1" label="Název" type="text" group="gallery_item1"/>
        <cms:editable name="galleryitem_link1" label="Link" type="text" group="gallery_item1"/>
        <cms:editable name="galleryitem_pc_img1" label="PC obrázek" type="image" show_preview='1' group="gallery_item1"/>
</cms:repeatable>

Admin without repeatable:

Snímek obrazovky 2025-06-01 215248.jpg (62.02 KiB) Viewed 1769 times

Admin with repeatable (this picture shows only 1 item):

tweawee.jpg (59.03 KiB) Viewed 1769 times

[KK]

Groups cannot be used as repeatables.

That said, I don't quite see the necessity of using a group in this case -
while using repeatable, each row you add is a group in itself i.e. will contain the three editable regions you need.
So you may just define the repeatable region as follows -

Code: Select all

<cms:repeatable name="test" label="Menu" > 
    <cms:editable name="galleryitem_name" label="Název" type="text"/>
    <cms:editable name="galleryitem_link" label="Link" type="text"/>
    <cms:editable name="galleryitem_pc_img" label="PC obrázek" type="image" show_preview='1'/>
</cms:repeatable>

And then each of the rows can be iterated like this (use your own markup) -

Code: Select all

<cms:show_repeatable 'test'>
    <cms:show galleryitem_name /><br>
    <cms:show galleryitem_link /><br>
    <cms:show galleryitem_pc_img /><br>
    <hr>
</cms:show_repeatable>

Does this help?

The reason is that in reality, each "group" has 2 text inputs and 2 image inputs. I tried to use col-width, stacked_layout='1 and other tags, but it doesnt stack in a good way (check screenshot). Thats why I used group, which looks clean.

Snímek obrazovky 2025-06-02 113622.jpg (142.01 KiB) Viewed 1731 times

[KK]

I see. I wonder, however, why the stacked_layout='1' param doesn't work out for you? Could you elaborate please?

Anyway, if it is just cosmetic arrangement that you are worried about, I suggest you may try using 'mosaic' instead (viewtopic.php?f=5&t=11105)

You can define just one single tile (with the 2 text inputs and 2 image inputs) and also customize how each row displays in the admin-panel.

Hope this helps.

Hi, I have tried a mosaic as you recommended. However, I don't think this is a clean layout for 8 items in the gallery (it creates 8 rows/tiles in the admin, each with 4 editables). Or can I use a group in the mosaic (group hides each item in the toggle)?

Snímek obrazovky 2025-06-04 192658.jpg (167.23 KiB) Viewed 1651 times

[trendoman]

Customize the presentational layout of your tiles and make it more comfortable for admin eyes, perhaps with expandable images instead of outputting them as is.

What you screened above is the default look without any intervention - the editable content stacked vertically, but you can read the Mosaic tutorial to understand how to make your own look.

What do you mean by "expandable images"? Could you show me an example? Thank you!

[trendoman]

What do you mean by "expandable images"? Could you show me an example? Thank you!

You control the HTML of the Mosaic Tile, I suggested to use some JS script.
Maybe this one? #JS Simple Image Expand
A simple Javascript plugin that shows an image in full size on click https://gist.github.com/webketje/2bda98ced2ac32e0bcb0

I dont think that it is a great solution. if you want to edit row(tile) 4,7,8, you will see editables from all rows(tiles), but you will need to open pictures from rows 4,7,8. Solving the problem with a group was much cleaner, but its not supported

[KK]

@Danielhlas, what @trendoman was suggesting is that you have full control of how a tile displays in the admin-panel - so you may device your own collapsible panel (using your JS/CSS) and then show your contents within it.

For example, following is what I came up with as a quick-n-dirty solution using the JS/CSS that is already present in the admin-panel.

Suppose following is how your tile is defined -

Code: Select all

<cms:tile name='gallery' label='Add Gallery Item'>
    <cms:editable name="galleryitem_name" label="Název" type="text"/>
    <cms:editable name="galleryitem_link" label="Link" type="text"/>
    <cms:editable name="galleryitem_pc_img" label="PC obrázek" type="image" show_preview='1'/>
</cms:tile>

Add your own presentation logic to make it as follows -

Code: Select all

<cms:tile name='gallery' label='Add Gallery Item'>
    <cms:editable name="galleryitem_name" label="Název" type="text"/>
    <cms:editable name="galleryitem_link" label="Link" type="text"/>
    <cms:editable name="galleryitem_pc_img" label="PC obrázek" type="image" show_preview='1'/>

    <cms:config_list_view>
        <cms:field 'k_content' >
            <div class="mosaic-list">
                <fieldset class="row_fieldset <cms:if "<cms:not k_mosaic_field_dynamic_insertion />">collapsed</cms:if>" <cms:if k_mosaic_field_dynamic_insertion><cms:set my_random_id="<cms:random_name />" 'global' /> id="<cms:show my_random_id />"</cms:if>>
                    <legend>Gallery Item</legend>
                    <div class="row" style="<cms:if "<cms:not k_mosaic_field_dynamic_insertion />">display:none</cms:if>">
                        <div class="cell cell-label col-md-12">

                            <!-- START MARKUP -->
                            <a class="img-popup" href="<cms:show galleryitem_pc_img />">
                                <img src="<cms:show galleryitem_pc_img />" width="150">
                            </a>
                            <cms:show galleryitem_name /><br>
                            (Link: <cms:show galleryitem_link />)
                            <!-- END MARKUP -->

                        </div>
                    </div>
                </fieldset>
            </div>
            <cms:if k_mosaic_field_dynamic_insertion>
                <script>
                    (function(){
                        $('fieldset#<cms:show my_random_id /> legend').on( "click", $.debounce(function( e ) {
                            var $heading = $(this).blur().parent();

                            e.preventDefault();

                            $heading.toggleClass( "collapsed" ).find('.row').animate({
                                height: "toggle"
                            }, 200 );
                        }, 200, true ));
                    })();
                </script>
            </cms:if>
        </cms:field>
    </cms:config_list_view>

</cms:tile>

Details of what is being done above can be found in the mosaic's original thread (viewtopic.php?f=5&t=11105) but you don't have to bother with that. For your purpose you only need to change the HTML between <!-- START MARKUP --> and <!-- END MARKUP -->. Rest is boilerplate code.

Make sure to visit your modified template on the frontend as super-admin for the changes to persist.

The result should look something like this where each tile shows up in a collapsed state -

Screenshot from 2025-06-05 16-32-02.png (10.72 KiB) Viewed 1606 times

and can be expanded individually -

Screenshot from 2025-06-05 16-32-18.png (21.24 KiB) Viewed 1606 times

Hope this helps.
Let me know.