Skip Navigation

[Resolved] How to enable SVG output support in Views?

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 12 replies, has 4 voices.

Last updated by kenneth-aarM 6 years, 9 months ago.

Assigned support staff: emerson.

Author
Posts
#227921

Hi!
I read this - https://toolset.com/forums/topic/svg-and-views-compatability/
I have the same problem. I want to output SVG as custom post type section background defined in View Content Template. When PNG it outputs OK. But I want SVG.
Everywhere else in WordPress it works fine, except Views, probably because it uses its own loops executed before the WP Loop.
Can you patch Views to enable SVG?

Just in case - hidden link <- it mean to be here

<div class="land-120" style="width:100%; background-position:bottom right;background-repeat: no-repeat; background-image:url();">

When I use PNG it outputs URL correctly.

#227936

Dear Jevgenijs,

Please show me how are you calling this SVG element. Would be nice a screenshot of the entire Views page. Are you using some plugin to handle SVG in WordPress?

#227988

The SVG support in Media Uploads is enabled in functions.php with this piece of code:

/* Enable SVG support in Media Uploads */
function cc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

And it works all right if I call it natively within the loop. See for example SVG home icon in mega menu here - enabled the same way - hidden link

I am calling it in the View from the image upload field - and it indeed reads in dashboard, and puts the URI into the custom field. But when it comes to output View - it is lost!

<div class="land-[wpv-post-id] jur" style="width:100%; background-position:bottom right;background-repeat: no-repeat; background-image:url([types field="jur-background-image" size="full" url="true"][/types]);">

Like I said - PNGs are output all right.

#228012

Dear Jevgenijs,

I would like to access your site, is it possible? I want to test it directly there, please provide credentials. The private area is enabled, fill required fields.

#228089

Provided

Please change email in user profile and the password after you login.

#228344

Dear Jevgenijs,
I am handling this ticket now from Adriano. OK I did test your case and it comes out that this problem is not with Views but from the WordPress Media Library itself not being able to fully support and display SVG (when inserted to a editor)
This is how I test this:

1.) Start with a new WordPress 3.9.1 installation.
2.) Add the following codes in your theme functions.php so you will be able to upload SVG:
[php]
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
[/php]

3.) Upload any test SVG file via WordPress media library. YOu should be able to upload it now.
4.) Create a new WordPress page. Click "Add Media" and then select any SVG file and insert it to a page.
5.) Publish that page. When you view this page in the browser, it does not display.

Example of this in your test site: hidden link

6.) Now create another WordPress page, this time, don't use media library to insert SVG but simply get the SVN image file path as saved in your uploads directory and put that in image tag manually like this:

[php]
&lt;a href=&quot;hidden link src=&quot;hidden link; /&gt;&lt;/a&gt;
[/php]

Publish this page and there you can see the SVG rendered:
Example of this in your test site: hidden link

CONCLUSION: WordPress media library can corrupt SVG images when its inserted to any editor (that includes Views). As a temporary solution, you need to directly use the URL and don't use media library for now. This issue on SVG images via WordPress media library will be handled in the WOrdPress core and not by any plugins like Toolset.

Please let me know how it goes. Thanks.

Cheers,
Emerson

#228347

No, Emerson. Media Library is doing just fine. And you can see that in your own example at hidden link.
Specifying SVG size renders beacon.svg with no problem at all.

What I was referring to is that Views does not OUTPUT URI of SVG file!! At exact place where I showed.

Your commentary thus is hardly relevant to the issue, I am afraid. Can you or Adriano please address the exact problem of the SVG image URL output from Views Content Template?

#228354

I believe the issue grounds in array of image file types set in View plugin classes.
You have array('jpg', 'jpeg', 'gif', 'png'), why not to add 'svg'? Huh?

#228384
inserting_shortcode_output_svg_field.jpg

Dear Jevgenijs,
Thanks for the feedback. Yes you are right. We acknowledge this issue and we have debugged it. And we have found a workaround to solve this. To output the SVG image URL, you can use Views wpv-post-field shortcode. For example, in your site; go to Jurisdictions --> find "Testing svg on Types shortcode output". The SVG image URL is outputted using:

[php]
[wpv-post-field name=&quot;wpcf-jur-background-image&quot;]
[/php]

Currently it does not work when using with Types shortcode like this:
[php]
[types field=&quot;jur-background-image&quot; size=&quot;full&quot; url=&quot;true&quot;][/types]
[/php]

When inserting this shortcode in a Content Template, you can find this in the attached screenshot. It should now be able to output the SVG image URL. Please let me know how it goes. Thanks 🙂

Cheers,
Emerson

#228394

Good. But this is not the end.
I need to output RAW URL of the image as background-image URL.

At the moment this kind of short code does not work.

< div style="width:100%; background-position:bottom right;background-repeat: no-repeat; background-image:url([types field="jur-background-image" url="true"][/types]);">

Besides, if you put any CSS attribute after the short coded

background-image:url([types field="jur-background-image" url="true"][/types]);

, it will not work and will output as appended text string to layout, not as proper CSS. This is a second bug.
I.e.

background-size:100% 100%; background-image:url([types field="jur-background-image" url="true"][/types]);

will work, and

 background-image:url([types field="jur-background-image" url="true"][/types]);background-size:100% 100%,

- will not.

#228398

Dear Jevgenijs ,
This one works for me. This is the test code currently in your Jurisdiction content template right now:

[php]
&lt;div class=&quot;land-[wpv-post-id] jur&quot; style=&quot;width:100%; background-position:bottom right;background-repeat: no-repeat; background-image:url([wpv-post-field name=&quot;wpcf-jur-background-image&quot;]);&quot;&gt;

[wpv-post-body view_template=&quot;None&quot;]
&lt;/div&gt;

[whistles type=&quot;toggle&quot; group=&quot;contact-arlington&quot; order=&quot;DESC&quot; orderby=&quot;date&quot; limit=&quot;-1&quot;]
[/php]

In the background image: I use this:

[php]
[wpv-post-field name=&quot;wpcf-jur-background-image&quot;]
[/php]

For example in "Testing svg on Types shortcode output" page, this is the HTML rendered:

[php]
&lt;div style=&quot;width:100%; background-position:bottom right;background-repeat: no-repeat; background-image:url(hidden link);&quot; class=&quot;land-198 jur&quot;&gt;

&lt;p&gt;TEST&lt;/p&gt;

&lt;/div&gt;
[/php]

It outputs the SVG image URL in raw format,e.g.: hidden link

Can you test some of your actual Jurisdiction posts with actual SVG image background? Thanks. 🙂

Cheers,
Emerson

#228623

Thank you Emerson. It works
hidden link

Although this query looks executing much slower. Is there a way to make Toolset run faster? It ain't bad hosting at all here.

#269888

Hi

When I use the RAW URL option, then using multiple images breaks the view. What should I do?

This works fine with pngs and jpgs, with as many images as I want to add but not with svgs

[types field="plantegninger" separator=", "][/types]
700px" />
 

This code works with everything unless there are more than one image.

<img src="[types field="plantegninger" output="raw" separator=", "][/types]" width=" 
 

Here is the whole code as of now.

[types field="ingress"][/types]
<br/>
[types field="bilde-av-huset" width="750" height="500" align="none" resize="pad" padding_color="#FFF" separator=", "][/types]
<br/>
[types field="hustekst"][/types]
<br/>
[types field="antall-soverom" format="<strong>FIELD_NAME:</strong> FIELD_VALUE"][/types]
[types field="bruksareal" format="<strong>FIELD_NAME:</strong> FIELD_VALUE"][/types]
[types field="bruttoareal-1-etg" format="<strong>FIELD_NAME:</strong> FIELD_VALUE"][/types]
[types field="storste-lengde" format="<strong>FIELD_NAME:</strong> FIELD_VALUE"][/types]
[types field="storste-bredde" format="<strong>FIELD_NAME:</strong> FIELD_VALUE"][/types]
<strong>Tomttype:</strong> [types field="tomttype"][/types]
[types field="plantegninger" separator=", "][/types]
<img src="[types field="plantegninger" output="raw" separator=", "][/types]" width="700px" />
 

URL:

hidden link