[Gelöst] How to enable SVG output support in Views?

[Author]

Artikel

[Jevgenijs]

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.

[Adriano]

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?

[Jevgenijs]

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.

[Adriano]

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.

[Jevgenijs]

Provided

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

[emerson]

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

[Jevgenijs]

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?

[Jevgenijs]

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?

[emerson]

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

[Jevgenijs]

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.

[emerson]

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

[Jevgenijs]

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.

[kenneth-aarM]

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