Textpattern of course has no provision so far to upload and manage those SVG files through the image panel. My first thought was to FTP the files to the server, but that is far from ideal (authors wouldn’t be able to do it themselves…), and there is that little issue of managing meta data about those images (caption, alt text,…). That would have to happen very manually, not great at all. In a moment of less insanity (perhaps something with the music I was listening to… thanks Kaja and Susana1) , I then had the idea to use the Files panel. That works, sort of.

Workflow:

  1. authors upload images in PNG format, set all the meta data – caption, alt text, file name (!), category.
  2. authors then upload the equivalent SVG file. Again the file name matters (the file status can be set to “Hidden” – it won’t show up in a file download list).
  3. authors insert the image in the body of an article: <txp:images id="XX" form="SVG-image" /> where XX is the ID of the PNG file.

I then have a TXP form to generate the necessary HTML code (form name: SVG-image):

<figure itemscope itemtype="http://schema.org/ImageObject">
    <span itemprop="image">
<img src='<txp:image_url link="0" />' 
     alt='<txp:image_info type="alt" />' 
     srcset='/files/<txp:rah_replace from=".png" to=".svg"><txp:image_info type="name" /></txp:rah_replace>'>
    </span>
    <figcaption itemprop="caption">
      <txp:image_info type="caption" />
    </figcaption>
</figure>

In the generated HTML, the PNG file is used in the src attribute, the SVG file is loaded in the srcset attribute. works!

Problems / Issues / Limitations

  1. The file name of the PNG image and the SVG image must match, as it is the only hook I found to connect the two files together – using the <txp:image_info type="name" /> tag. Is there a better way?
  2. If the SVG file goes missing, or if the file name does’t match exactly no image at all is displayed (missing image) in modern browsers.
  3. I use the rah_replace plugin to strip the file-extension from the PNG file (<txp:image_info type="name" /> generates something like name.png) and replace it with an svg extension. An issue I have here is that sometimes author upload jpeg files instead of png. I can find a way to have the from attribute in rah_replace to use either png OR jpg. Is there any other magic trick that can do that substitution ?
  4. Do authors have enough privileges for this workflow? I think yes – I’m mostly concerned about “Staff writer” and “Copy editor”. At least in list view they can see the necessary meta data, even if they didn’t upload the files / images themselves (if they want to reference images used in other articles).

Working around the limitations.

Discussing this in the forums, the ever helpful Jacob suggested a workaround for issue 3, by using a different plugin: pax_grep. In the above code, in the figcaption line, substitute <txp:pax_grep from="/jpe?g/,/png/" to="svg"><txp:image_info type="name" /></txp:pax_grep>.

He further suggested using one of his own plugins, jcr_image_custom, which would resolve the first 3 issues mentioned above. This plugins adds a custom field to the Edit Image panel, allowing to store the ID of the uploaded SVG file together with the meta data for the PNG image. And indeed it does. The modified SVG-image form file looks like this:

<figure itemscope itemtype="http://schema.org/ImageObject">
	<span itemprop="image">
		<img src='<txp:image_url link="0"/>' alt='<txp:image_info type="alt" />' <txp:file_download id='<txp:jcr_image_custom />'>srcset='/files/<txp:file_download_name />'</txp:file_download_list> width='<txp:image_info type="w" />'>
	</span>
	<figcaption itemprop="caption">
		<txp:image_info type="caption" /><br><txp:image_info type="name" />
	</figcaption>
</figure>

Make sure its type is set to File. Added bonus, the same form can be reused, even if the PNG of JPG image does not have a matching SVG image.

Final little snag

Textpattern ships with a disabled .htaccess file in the /files/ folder; it contains a rule to inhibit all direct file downloads. If enabled, it of course prevents the display of the SVG files. It is easy to workaround that: wrap the rule in a <FilesMatch>…</Filesmatch> block, for example: <FilesMatch "\.(pdf|txt|zip)$">.

An example

Below, you should see the image of a green square (the SVG image). Older browsers, sorry IE 11, will see a grey square (the PNG image).

A green square or a grey square? Depending on the browser you might see either one.

1 Kaja Draksler & Susana Santos Silva: This Love. A wonderful duo of two young European woman, Kaja plays piano, Susana plays the trumpet.