SPPB 5.2.2: Dynamic Content - Show Image And Text Field Side By Side, Instead Of One On Top Of The Other - Question | JoomShaper
Back to the questions

SPPB 5.2.2: Dynamic Content - Show Image And Text Field Side By Side, Instead Of One On Top Of The Other

PH

Peter Hunkeler

SP Page Builder 10 months ago

I'm please to see the Dynamic Content feature comes just in time for me. So I'm playing with it to get an understanding of what is possible or nor.

I currently have created a collection, and added this to a page as a collection index in stacked format. The items in the collection are shown one below the other. So far, so good.

I would like to show an individual item's data side by side, i.e. the image on the left, the title and text fields on the right. So, the layout inside "Collection" addon would need two columns, so that I can place the "Dynamic Image" addon in the left column, and the "Dynammic Text" addons in the right column.

I habve tried to add a "Row" inside the "Collection" addon, so I could place a "Column" addon inside the row. But neither addind a row nor adding columns seems to be allwed inside a collection.

I this feasible somehow with built in features, or simple custom CSS? If so, can you please provide a sample page?

Thanks Peter

0
Website
https://mettmi2026.ch
6 Answers
Order by
Oldest Newest Votes
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 10 months ago #185901

Hi Peter Hunkeler,

Thank you for reaching out, and sorry for the inconvenience.

The Collection Addon does not support adding Row or Column addons inside it. However, you can use the Div Addon within the Collection Addon to achieve the layout you want.

Please check the following example layouts for reference:
Layout Example 1
Layout Example 2

For more control and customization, refer to the Div Addon documentation:
Div Addon Docs

I hope this helps resolve your issue. Let me know if you need further assistance!

Best regards

0
PH
Peter Hunkeler
Accepted Answer
10 months ago #185911

Thanks a lot for the quick answer.

0
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 10 months ago #186032

You're most welcome.

0
PH
Peter Hunkeler
Accepted Answer
10 months ago #186093

I followed your suggestion and this basically does what I wanted. I have "dynamic image" in the first DIV and "dynamic text" in the second.

However, I see the image being shrunk as the text is getting longer. Note: All images are 400px x 266px As long as the text is short, images are show with equal size:

The an image is shrunk as the text is longer:

How can I achieve the the "columns" of fixed size, and do not shrink?

0
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 10 months ago #186371

Hi Peter Hunkeler,

Sorry for the delay. If you set a custom width for the div, it should resolve your issue.

Preview Screenshot

Additionally, the Collection addon includes a Stack type. Have you checked this option?
Preview Screenshot

You can find more details about the Stack layout in the documentation:
Stack Layout Documentation

Let me know if you need further assistance.

Thanks

0
PH
Peter Hunkeler
Accepted Answer
10 months ago #186454

Hello Asfakur No problem with the delay. This was no an urgent issue.

I tired to use the witdh, but I cound't get a satisfying result for all the media breakpoints (device types and orientation). I've managed to get what I wanted by assigning a custom class to all the elements and some custom css.

I did not look into the Stack type, yet. To be honest, I want't aware of it. will read the docs and play with it.

Apart from this minor issue, I'm pleased with the dynamic content! It came just about a the right time.

Thanks

0