Can we do a Concatenation of text properties in Component?


here is my case scenario
I am creating a component that shows an image with a caption underneath it, once the image is clicked, it opens a modal with a full vh version of the image and the caption on the left.

I want to show the caption under the image as one continuous paragraph and on the side of the image in the modal in multiple lines.

I added multiple text properties to my components such as artist name, year, technique, and size.

To create the concatenation with the insertion of “,” between terms, I can use js but I imagine there might be a shortcut way to do it, similarly to using {acffield=my_field} for ACF fields.

Is there ?

Let me know,


PS: all tests using simply CSS inline haven’t been working well enough.

Depending on how you are outputting your properties you can use a modified version of this:

The CSS will work if you output your properties in span or p tags.

Obviously it was designed to work with Repeaters and Taxonomy Terms blocks so you will have to tweak the CSS and apply it to the container you want to use it for, but the general strategy should work seamlessly.

1 Like

Thank you that is great to add the commas, but I have an issue with the inline-block
The various texts have various lengths, and the inline-block display still creates line returns that I don’t want.

The inline-block doesn’t make my text act like a regular text if know what I mean.

Thank you

Hi @Juga,

inline-block should behave like an inline element with no block wrapping. The only difference is you have greater control over styling and layout padding/margin/border, etc.

If you share the exact issue you are seeing perhaps the solution will present itself.

If for any reason you can’t use inline-block, you could just change it to inline, remove the padding-right and then change the content to be a comma followed by a non-breaking space. It’s not ideal but would probably be a reasonable alternative.

Thank you

This is what I was hoping for at first but instead, I have

Artist, Title, Year,

While I look for something with line return based on the width of the div like

Artist, Title, Year, Technique, Size

As long as the content fits the width of the div it is fine but if it is longer it will go to the next line.
Currently, the comportment is not of a single paragraph but of blocks of text.

Do you see what I mean?

It is not clear why Technique and Size would wrap to next lines unless the containing element’s width is causing it to do so.

If the width of the container is not causing it to wrap then if you share a link to the front-end we can likely work out what is causing it very quickly.

I’m not sure what you mean by this, what you described sounds like the standard behaviour of inline elements, perhaps there is a distinction I am missing.

Technique is longer and therefore doesn’t fit on one line.

You can see here, at the end of the page under the smaller images

thank you so much!

PS: here the commas are not added between spans

I understand now, you are dealing with longer strings of text. Then better to set it to display: inline. That seems to solve the issue if I am understanding correctly what you want to achieve.

yes, inline was my first choice but then each span starts on a different line…

thank you for your help


I may be misunderstanding you, I tested on the site link you provided with inline and everything displays on a single line as per your desired result.

Screenshot 2023-12-15 at 17.30.07

1 Like

I must double-check, must have something somewhere that is overriding…

thank you!

Well I had the css added on my div as a script on top of being as a class which was conflicting, thank you for your help!!

1 Like

Very glad to know you have got it sorted.

1 Like

Thank you again!! much appreciated!!!