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.
- authors upload images in PNG format, set all the meta data – caption, alt text, file name (!), category.
- 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).
- authors insert the image in the
bodyof an article:
<txp:images id="XX" form="SVG-image" />where
IDof 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
- 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?
- 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.
- I use the
rah_replaceplugin 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
rah_replaceto use either
jpg. Is there any other magic trick that can do that substitution ?
- 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> 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:
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).