Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to allow WordPress to upload pictures in SVG format and display them in the media library. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

As a result of SVG format picture features, may be inserted malicious code, the website is easy to be attacked, so for security reasons WordPress default does not support SVG format picture upload, and not like the online that SVG format pictures have so high application value, in addition to some pages on the small icon can use SVG pictures, normal color pictures, if you use SVG format has no advantage at all. However, sometimes I do need this SVG picture, such as the LOGO picture of my theme. If the PNG picture is not very clear on the phone, there is no problem using SVG format.

How to make WordPress support uploading pictures in SVG format?

You can add the following code to the current theme function template functions.php:

Let WordPress support uploading SVG, and only administrators have this permission

/ / only administrators are allowed to upload SVG images if (current_user_can ('manage_options')) {add_filter (' upload_mimes', function ($mimes) {$mimes ['svg'] =' image/svg+xml';return $mimes;});}

Library list mode displays SVG pictures

/ / Media library list mode displays SVG image add_action ('admin_head', function () {echo "table.media. Column-title. Media-icon IMG [src * =' .svg'] {width: 100% responsive-wrapper__ height: auto;} .components-responsive-wrapper__ content [src * = '.svg'] {position: relative;}";})

There are many similar codes on the Internet, but all of them do not support the media library grid mode to display SVG images. The following code can be implemented:

/ / Media Library grid mode displays SVG images function zm_display_svg_media ($response, $attachment, $meta) {if ($response ['type'] = =' image' & & $response ['subtype'] = =' svg+xml' & & class_exists ('SimpleXMLElement')) {try {$path = get_attached_file ($attachment- > ID); if (@ file_exists ($path)) {$svg = new SimpleXMLElement (@ file_get_contents ($path)) $src = $response ['url']; $width = (int) $svg [' width']; $height = (int) $svg ['height']; $response [' image'] = compact ('src',' width', 'height'); $response [' thumb'] = compact ('src',' width', 'height') $response ['sizes'] [' full'] = array ('height' = > $height,'width' = > $width,'url' = > $src,'orientation' = > $height > $width? 'portrait':' landscape',);}} catch (Exception $e) {}} return $response;} add_filter ('wp_prepare_attachment_for_js',' zm_display_svg_media', 10,3)

Another relatively low-code support library grid mode to display SVG image code, but if you turn on debug mode there will be an error, but does not affect the use.

/ / Media Library grid mode displays SVG images function zm_svg_metadata ($data, $post_id) {$data = array ('sizes' = > array (' large' = > array ('file' = > pathinfo (wp_get_attachment_url ($post_id), PATHINFO_BASENAME); return $data;} add_filter (' wp_get_attachment_metadata', 'zm_svg_metadata', 10,2)

As for what to add this function for, it depends on whether the theme you use needs this function, and getting links after direct FTP upload is also used in the web page.

If you find the code troublesome, you can use the following related plug-ins:

SVG SupportEnable SVGSafe SVG (it is said that the plug-in can detect and remove malicious code in SVG, comparable to 250 million 110) WP SVG imagesEasy SVG SupportEnable SVG Uploads. This is the way to let WordPress support uploading pictures in SVG format and displaying them in the media library. I hope the above content can be of some help and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.