Search code examples
xsltbootstrap-5masonrysobipro

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

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

see example here https://getbootstrap.com/docs/5.0/examples/masonry/

Thanks

Solution

  • 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.