Using SVG files as content images

phiw13 · 2016-12-04 12:38:02

Background: on one site I manage / edit, articles regularly contain multiple graphs and figures, the kind of thing that Excel jockeys are good at outputting. Those come as PNG images mostly (and sometimes jpeg…). Now my co-admin has let me know that he has some script or something to have Excel generate those files in SVG format, which might be a good solution (crisper images for all devices). I say might be, as I haven’t seen the output, how bloated it is, and how well it would scale (cough IE 11 / Edge).

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 Susana) , I then had the idea to use the Files panel. That works, sort of.

Workflow:

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 body of an article: <txp:images id="XX" form="svg-images" /> where XX is the ID of the PNG file.

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

<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_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 ?
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).

Thoughts, suggestions, improvements? Do I overlook a simpler solution?

jakob · 2016-12-04 13:01:27

For 1 and by extension also 2 and 3, maybe you could use jcr_image_custom to store the corresponding file id number in an image custom field, and use a file form to output the additional code or not if the file is not available.

For 3, you could use pax_grep and to search for from="/(jpe?g|png)/" to cover both situations, but with the above variant, you wouldn’t need it.

EDIT: smd_wrap can also do regex replacing.

phiw13 · 2016-12-04 13:35:14

jakob wrote #303143:

For 1 and by extension also 2 and 3, maybe you could use jcr_image_custom to store the corresponding file id number in an image custom field, and use a file form to output the additional code or not if the file is not available.

Does that allow for multiple IDs ?
What I have to deal with here are long articles with multiple images (figures) inserted at various points in the text.

For 3, you could use pax_grep and to search for from="/(jpe?g|png)/" to cover both situations, but with the above variant, you wouldn’t need it.

EDIT: smd_wrap can also do regex replacing.

pax_grep sounds exactly why I‘d need here. Thanks for the pointer. Ah, yes, “smd_wrap” (i really need to study that one).

jakob · 2016-12-04 14:08:42

phiw13 wrote #303144:

Does that allow for multiple IDs ?
What I have to deal with here are long articles with multiple images (figures) inserted at various points in the text.

It just adds a simple 255 char text field to the image table that you can use how you like, i.e. it appears in the image edit panel. In your case, I imagine you’d simply add the file_ID of the corresponding svg file as part of the image meta data.

I’m assuming you’re using some custom smd_macro or rah_beacon to insert the images in your body field (as you’re using srcset), so all you’d need to do is adapt your macro code accordingly to output the file if it exists or not, using the image custom field as input for file_download_list or similar. You shouldn’t need to change the body field at all.

EDIT: Sorry, I should read properly: you just need to adapt your svg-images form accordingly. Something 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_list id='<txp:jcr_image_custom />'>
     srcset='/files/<txp:file_download_name />'>
 </txp:file_download_list>
    </span>
    <figcaption itemprop="caption">
      <txp:image_info type="caption" />
    </figcaption>
</figure>

(or with file_download id=…. I forget which is best here). I can’t remember off-hand what that does if no id is specified. If it outputs nothing you’re good to go, if it outputs everything, you need trap the file not existing case.

phiw13 · 2016-12-04 22:47:12

jakob wrote #303146:

It just adds a simple 255 char text field to the image table that you can use how you like, i.e. it appears in the image edit panel. In your case, I imagine you’d simply add the file_ID of the corresponding svg file as part of the image meta data.

Thanks! I misunderstood what your plugin does from only reading the readme… Blame late hours on my side. I‘ll have a play with it today, from your description, it will indeed solve my issues (and make it easier for authors in a way – no need anymore for an exact name match between the 2 files).

EDIT: Sorry, I should read properly: you just need to adapt your svg-images form accordingly. Something like this:

<figure itemscope itemtype="http://schema.org/ImageObject">...

(or with file_download id=…. I forget which is best here). I can’t remember off-hand what that does if no id is specified. If it outputs nothing you’re good to go, if it outputs everything, you need trap the file not existing case.

Yeah, something like that, I can probably play with a variable to check if the <txp:jcr_image_custom /> is empty or not, then conditionally add the srcset code.
(or in the future, TXP 4.7, with txp:evaluate).

I‘ll report back later with my findings.

phiw13 · 2016-12-05 00:42:33

jakob wrote #303143:

maybe you could use jcr_image_custom to store the corresponding file id number in an image custom field

The plugin install fine, but when I go to the Edit image panel, fill in the custom field, then save, I get the following error:

User_Error "Unknown column 'jcr_image_custom' in 'field list'"
in /Users/[username]/Sites/_txp-test/textpattern/lib/txplib_db.php at line 409.

And indeed, checking with Sequel Pro, there is no “jcr_image_custom“ column in the txp_image table. Installing + enabling the plugin should create that column, is it not?

localhost, OS X 10.11, PHP 5.5.38, MySQL 5.6.21
TXP 4.6.2 and 4.7 dev

philwareham · 2016-12-05 12:15:46

Should SVG upload be (optionally) allowed in images panel? There are security risks (hence why it would need to be opt-in) but the current/deprecated SWF upload also carries risks. There is a question over how class.thumb.php can handle SVG-PNG conversion, which would need consideration.

Maybe open an issue and we can discuss.

Bloke · 2016-12-05 12:37:08

philwareham wrote #303153:

There is a question over how class.thumb.php can handle SVG-PNG conversion, which would need consideration.

A big question. As far as I know, the GD library can’t convert SVG to anything, and that’s the library we use internally to create thumbs.

However, since the ‘S’ in SVG stands for ‘scalable’ we wouldn’t necessarily need to convert it, right? But I’m not entirely sure how to handle their display. Assuming browsers can rescale on the fly, do we need to simply copy the same file to the different locations — one with a ‘t’ suffix, and one for the upcoming grid — then set the HTML width and height attributes to limit their size for display? Bit of a waste of disk space though. We could symlink if that’s fully compatible on web servers, cross-platform?

Does this make responsive layouts difficult? Effectively having multiple “full size” images?

Ideally, I guess we’d only store one image — the one uploaded — and then scale them somehow depending on where they’re viewed. But that might currently break Txp’s internal assumptions about what images exist where.

Bottom line, it’d be good to do this, but we’d need to figure out how to handle them without breaking backwards-compatibility with other formats.

Last edited by Bloke (2016-12-05 13:03:58)

jakob · 2016-12-05 12:52:29

phiw13 wrote #303149:

The plugin install fine, but when I go to the Edit image panel, fill in the custom field, then save, I get the following error:

User_Error "Unknown column 'jcr_image_custom' in 'field list'"...

And indeed, checking with Sequel Pro, there is no “jcr_image_custom“ column in the txp_image table. Installing + enabling the plugin should create that column, is it not?

localhost, OS X 10.11, PHP 5.5.38, MySQL 5.6.21
TXP 4.6.2 and 4.7 dev

Hmm. I’m the first to admit to not being a ‘proper’ plugin author, but the plugin is strongly based on wet_profile with the install-scheme being well-nigh a direct copy of that, so I thought I was standing on pretty solid shoulders :-)

Can you force execute the ‘install and enable’ lifecycle event with the help of ied_plugin_composer (tick mark next to the plugin, then choose that from the dropdown at the end)? That should install the tables if that was skipped for some reason (can happen if you use the plugin_tmp directory).

Bloke · 2016-12-05 13:07:08

jakob wrote #303155:

Can you force execute the ‘install and enable’ lifecycle event

I think the issue is the plugin’s $flags aren’t set. Set that to 2 if you want it to respond to lifecycle events.

phiw13 · 2016-12-05 13:18:09

jakob wrote #303155:

Can you force execute the ‘install and enable’ lifecycle event with the help of ied_plugin_composer (tick mark next to the plugin, then choose that from the dropdown at the end)? That should install the tables if that was skipped for some reason (can happen if you use the plugin_tmp directory).

Yes, that did it. Now I see the column in my DB, and going to the edit image panel, I can actually save something in that custom field. Thank you. I’ill play with it tomorrow (getting late again, here…).

philwareham · 2016-12-05 13:19:15

Bloke wrote #303154:

However, since the ‘S’ in SVG stands for ‘scalable’ we wouldn’t necessarily need to convert it, right?

I’m thinking ahead to our proposed image grid layout (with auto generated 120px square thumbnails independent of the Textpattern thumbnail). It would not be performant to have a load of SVGs (potentially up to 96 of them) displayed in this panel. That could blow up your browser. PNG would be much preferred for that task.

Looks like only ImageMagick can do that though, sadly not GD Graphics Library. :(

Textpattern CMS

Textpattern CMS support forum

#1 2016-12-04 12:38:02