Sometimes I have a lot of similar content elements in my projects. This is a rough example:

Code: Select all

<cms:editable name='image1' label='Image 1' show_preview='1' preview_width='300'/>
<cms:editable name='image2' label='Image 2' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image3' label='Image 3' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image4' label='Image 4' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image5' label='Image 5' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image6' label='Image 6' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image7' label='Image 7' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image8' label='Image 8' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image9' label='Image 9' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image10' label='Image 10' type='image' show_preview='1' preview_width='300'/>

There are only 2 ways to structure them:

1. Make a group

Code: Select all

<cms:editable name='gallery1' label='Images 1-4' type='group' collapsed='1'>
<cms:editable name='image1' label='Image 1' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image2' label='Image 2' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image3' label='Image 3' type='image' show_preview='1' preview_width='300'/>
<cms:editable name='image4' label='Image 4' type='image' show_preview='1' preview_width='300'/>
</cms:editable>

2. Use the Bootstrap-Grid.

Code: Select all

<cms:editable name='image_row' type='row'>
<cms:editable name='image1' label='Image 1' type='image' show_preview='1' preview_width='300' class='col-md-6' />
<cms:editable name='image2' label='Image 2' type='image' show_preview='1' preview_width='300' class='col-md-6' />
</cms:editable>
<cms:editable name='image_row2' type='row'>
<cms:editable name='image3' label='Image 3' type='image' show_preview='1' preview_width='300' class='col-md-6' />
<cms:editable name='image4' label='Image 4' type='image' show_preview='1' preview_width='300' class='col-md-6' />
</cms:editable>

I miss the support of a fieldset or simply a horizontal rule . Last I have to build it like:

Code: Select all

<cms:editable name='hr1' type='message'><hr></cms:editable>

How do you structure your backend? Would you like to have more possibilities?

[trendoman]

Sometimes I have a lot of similar content elements in my projects.
..
How do you structure your backend? Would you like to have more possibilities?

Interesting topic. We need a visionary and someone who will transgress to the beyond
I would love to help such a person by coding of a better form-view aks `edit screen`.

As an aside, OP, you have too many defined images. Try a mosaic with a single image tile

This was a simple example. But believe it or not, our designers create i.e. a content elements with 13 images on fixed positions. An mosaic is in such case not so intuitive

[trendoman]

This was a simple example. But believe it or not, our designers create i.e. a content elements with 13 images on fixed positions. An mosaic is in such case not so intuitive

Mosaic indeed was a simple suggestion to organize multitude of similar content elements.

I abuse <cms:config_form_view /> tag a lot. Like

Code: Select all

<cms:field 'hr' order='-1' no_wrapper='1'><hr></cms:field>

Your example with images looks really painful on my screen. I am not a designer, but if tasked to make things look stylish, I'd probably start placing them in columns and make default placeholder smaller. It is quite easy to apply a custom css, actually. I wonder if you started this topic for others to paste their styles or what? An example of using a <cms:style> -

Code: Select all

<cms:config_form_view>
    <cms:field 'hr' order='-1' no_wrapper='1'><hr></cms:field>
    <cms:style>
        #admin_wrapper_custom_fields { /* apply your creativity here, maybe start with `display:grid`, lol  */ }
    </cms:style>
</cms:config_form_view>

[KK]

There could several ways of handling this.
The easiest, IMHO, would be to just add a class to an editable region e.g. to the one after which the separator has to appear -

Code: Select all

<cms:editable name='image10' label='Image 10' type='image' show_preview='1' preview_width='300' class='my_hr' />

You can now style the .my_hr class either through your global style sheet of through the <cms:style> block within <cms:config_form_view> to show the kind of visual separator you desire.

[trendoman]

Also, every field of 'image' type already has a class 'k_image'. Same with other fields

[trendoman]

Don't forget about 'collapsible rows' - viewtopic.php?f=8&t=11023&start=10#p32334

Lets assume, you have 3 persons (ignoring possibilty of mosaiq).

Row version:

Code: Select all

photo       photo2       photo3
name        name2        name3
position    position2    position3

HR-Version

Code: Select all

photo
name
position
---
name2
position2
photo2
---
name3
position3
photo3

Both are not optimal in Backend.