Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2016-12-05 13:28:44

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,650
Website

Re: Using SVG files as content images

philwareham wrote #303153:

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.

That is something I was going to ask (suggest) next… I know (some) of the risks, so optional would certainly have my vote. The format is used more and more (education sector is a big consumer, I’m told).

(for the project in this thread, I made a condition that the SVG files do not contain scripting of any kind – style rules are fine. And I choose to load them via the <img> tag rather than <object>, as the former is rather a static affair.)


Where is that emoji for a solar powered submarine when you need it ?

Offline

#14 2016-12-05 13:38:00

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,714
Website GitHub

Re: Using SVG files as content images

philwareham wrote #303160:

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.

I didn’t realise SVG was such an intensive operation, but I suppose it makes sense, since they’re “interpreted”. So, yeah, that would be bad.

Shame there’s no library out there that can convert and cache them to particular sizes on first view. I guess the answer is ImageMagick, but I don’t know how embeddable that is.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#15 2016-12-05 14:11:06

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,329
Website

Re: Using SVG files as content images

Bloke wrote #303157:

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.

Thanks Stef. I updated all the image / file / link custom field plugins accordingly.


TXP Builders – finely-crafted code, design and txp

Offline

#16 2016-12-05 14:17:42

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,553
Website GitHub Twitter

Re: Using SVG files as content images

Bloke wrote #303163:

I guess the answer is ImageMagick, but I don’t know how embeddable that is.

WordPress uses ImageMagick if the PHP module is available, in addition to GD Graphic Library – offering extra functionality (such as PDF thumbnails) and better image manipulation and better image quality/optimisation that ImageMagick has over GD.

Offline

#17 2016-12-05 14:33:50

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,714
Website GitHub

Re: Using SVG files as content images

philwareham wrote #303165:

WordPress uses ImageMagick

If it’s good enough for WP…

Let’s add an issue and track what options we have. It’d mean a rewrite / refactoring of class.thumb.php but it’s rather old skool anyway and could do with a spruce up.

Low priority, but if anyone has some spare slack time and would like to make a PR for this, it’d be great.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#18 2016-12-05 14:37:02

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,553
Website GitHub Twitter

Re: Using SVG files as content images

For reference/inspiration, here’s WP implementations:

Base image manipulation
GD Graphics Library extra functionality
ImageMagick extra functionality

If some of ImageMagick’s other features could be harnessed too, that would be most excellent.

Offline

#19 2016-12-06 06:02:32

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,650
Website

Re: Using SVG files as content images

Hoora! Success. Thank you, Jacob, for this little plugin.

This is the final markup:

1/ Install plugin & activate it

2/ create a form – SVG-image – Type: Files

<txp:hide><!-- 1. make sure to reference the ID of the SVG file in the custom field of the PNG image (Edit image panel) -->
    <!-- 2. in the `body` of an article, insert as `notextile. <txp:images id="xx" form="pw_SVG-image" />` where id="xx" refers to the ID of the image --> </txp:hide>
<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" />
    </figcaption>
</figure>

3/ upload your PNG / JPG image as usual, upload your SVG file to the Files panel, set meta-data to taste (the status can be set to hidden), take note of the ID of the image. Back on the images panel, add this ID to the custom field for your PNG/JPG image.

4/ inside the body of your article insert: <txp:images id="xx" form="SVG-image" /> where the xx is the ID of your PNG/JPG image.

Modern browsers will see the SVG image, loaded through the scrset attribute.

Note: One more little snag (discovered while testing on a live server): the default .htaccess file inside the /files/ folder prevents the display of the SVG image. I temporarily disabled that .htaccess file, need to investigate a work around.

For the curious, a live example can be seen on this page.


PS Jacob, it seems you need to register your tag. I didn’t have any problem on local host, however, on the live server, with debugging turned on, I got that ugly warning.

// Register tags.
if (class_exists('\Textpattern\Tag\Registry')) {
    Txp::get('\Textpattern\Tag\Registry')
       ->register('jcr_image_custom');
}

Where is that emoji for a solar powered submarine when you need it ?

Offline

#20 2016-12-06 08:50:11

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,650
Website

Re: Using SVG files as content images

For those following at home, I have opened a Github issue: RFE: Consider allowing the uploading of SVG images to the Images panel


Where is that emoji for a solar powered submarine when you need it ?

Offline

#21 2016-12-06 09:02:22

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,329
Website

Re: Using SVG files as content images


PS Jacob, it seems you need to register your tag. I didn’t have any problem on local host, however, on the live server, with debugging turned on, I got that ugly warning.

// Register tags....

Hmm, it’s definitely already in there but I must have done something wrong if it’s not recognised…


TXP Builders – finely-crafted code, design and txp

Offline

#22 2016-12-06 09:22:24

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,650
Website

Re: Using SVG files as content images

jakob wrote #303188:


PS Jacob, it seems you need to register your tag. I didn’t have any problem on local host, however, on the live server, with debugging turned on, I got that ugly warning.

// Register tags....

Hmm, it’s definitely already in there but I must have done something wrong if it’s not recognised…

Hmm. Now I can’t reproduce that warning anymore… :-( Gremlins on that server?


Where is that emoji for a solar powered submarine when you need it ?

Offline

#23 2017-02-13 15:09:05

funtoosh
Member
From: Münster, Germany
Registered: 2006-10-09
Posts: 149
Website

Re: Using SVG files as content images

Okay, I ran into that SVG problem as well the other day, as a client wanted to use SVGs for article images.

Makes sense, on a modern web page, but won’t be that easy to implement …

Offline

Board footer

Powered by FluxBB