How to place this line > data-masonry='{"percentPosition": true }' in XSLT document without breaking it

Question

I would like to use the Bootstrap Masonry described here https://getbootstrap.com/docs/5.0/examples/masonry/ in SobiPro with Joomla 4 Cassopedia Tempalte.

I need a div like this - <div class="row" data-masonry='{"percentPosition": true }'>

However, the above used in an XSLT document creates an error.

How can I include data-masonry='{"percentPosition": true }' in XSLT to make Masonry work?

If I play around with the brackets and quotes, it seems I can get masonry to work but the HTML output is
data-masonry='{"percentPosition": false }'

should be true I think

Thanks

Please post a [mcve] showing input, XSLT and the expected result. If you get an error, quote the error message verbatim. — michael.hor257k, Aug 11 '22 at 06:29

Heiko Theißen · Accepted Answer · 2022-11-28T08:51:19.380

Curly braces in XSLT attributes are used to include XPath expressions. If you want them as part of the attribute value, you must double them:

<div class="row" data-masonry='{{"percentPosition": true }}'>

Depending on the XSLT processor, the output may be

<div class="row" data-masonry="{&#34;percentPosition&#34;: true }">

or (which is equivalent)

<div class="row" data-masonry='{"percentPosition": true }'>

A consumer which properly parses the HTML should understand either format.

1 Answers1