Json_encode and img tags

Squiz Matrix Support
1

Matrix Version: 5.4.1.2

Does anyone have a simple explanation for what json_encode does with img tags? Alternatively, if I want to pass an img tag through json_encode, what do I need to do to get it successfully through json_encode?

https://matrix.squiz.net/manuals/keyword-replacements/chapters/keyword-modifiers provides one example but doesn’t touch on what json serialisation of html will do.

2

It’s just encoding the supplied data as JSON, in the case of HTML it’s a string so it escapes any characters in HTML that need to be escaped in JSON will be escaped with a backslash.

3

Most html tags are escaped, but not img tags from what I can see. I’m working with a JSON feed of assets where the html is being passed through the json_encode modifier, and the img tag is not coming through in the JSON feed.

From a bit of testing via wrapping img tags in comments, it looks like the json_encode modifier is discarding them? E.g. if I have the following in output html (via a paint layout)

    <!-- <img class="img-thumbnail" src="%asset_thumbnail_v_280w_url%" alt="%asset_thumbnail_alt%"> -->
    <!-- <img src=""> -->
    <!-- <img></img> -->
    <!-- <img / > -->
    <!-- <img src='' /> -->

and then ^json_encode that content (in this case using %asset_contents_paint_44855^replace:[\r\n\t]:^replace: +: ^json_encode%) the JSON output only contains:

    <!--  --> 
    <!--  -->
    <!-- <\/img> -->
    <!--  -->
    <!--  -->
4

I guess it depends on the full format of the string you pass to json_decode right? As in, you can’t really pass it HTML and get a JSON object out of it. It already has to be in a JSON or array string for it to work.

So you want to get to something like this right?

"img": "<img class=\"banner\" src=\"image.png\" alt=\"\" \/>

In which case, the tag string needs to first be escaped, probably using ^escapequotes, and then passed to the JSON structure.

Does that make sense? Or am I missing key part of the implementation?

5

The JSON feed I’m working with has an html attribute-value pair which contains a list entry’s worth of html e.g. :

{
     html: "<li vocab=\"http:\/\/schema.org\/\" ...<\/li>"
}

perhaps not ideal given JSON ideals as I understand them from googling today, but the JSON feed is what was delivered, so I’m trying to work with it, and the example on 4 things you must do when putting HTML in JSON - make your browser happy - Thorn Technologies includes an escaped html img tag.

Further testing showed that if I viewed the generated JSON feed with a user defined blank design:

<MySource_AREA id_name="body" design_area="body" />

then the generated JSON contains the img tags:

<div class=\"float-left-responsive eventlist__image\"> <img class=\"img-thumbnail\" src=\"https:\/\/squiz-matrix.its.waikato.ac.nz\/__matrix-data\/assets\/image\/0027\/65538\/varieties\/280w.jpg\" alt=\"\" \/> <\/div>

Problem occurs when I’m using a JSON design of:

<MySource_PRINT id_name="__global__" var="content_type" content_type="application/javascript" />
<MySource_area id_name="body" design_area="body">
<MySource_SET name="format" value="text" />
</MySource_AREA>

??

6

https://matrix.squiz.net/manuals/designs/chapters/body-design-area explains the expected behaviour of ‘’’<MySource_SET name=“format” value=“text” />’’’ :

The text option strips out all of the images, object tags and embed tags from the content of the asset.

removing it restores the escaped img tag html to the feed (rightly or wrongly).