Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Feedback
  3. SVG support (solution/feedback)

SVG support (solution/feedback)

Scheduled Pinned Locked Moved Feedback
7 Posts 4 Posters 1.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    bro
    wrote on last edited by
    #1

    Hello everyone,

    Thought I would share this here for future reference, and/or as feedback.

    I think I managed to add working SVG support to the Gridder, by following these steps:

    1. Add SVG Support plugin to your WP.

    This just makes sure you’re actually able to see the SVGs when you add them to your Media Library, as well as be able to add them as images in the Gridder.

    1. Add the solution offered by Laxmana on this page to your theme’s functions.php file (just copy paste his code to the bottom of your theme’s functions.php file).
    function svg_meta_data($data, $id){
    
        $attachment = get_post($id); // Filter makes sure that the post is an attachment
        $mime_type = $attachment->post_mime_type; // The attachment mime_type
    
        //If the attachment is an svg
    
        if($mime_type == 'image/svg+xml'){
    
            //If the svg metadata are empty or the width is empty or the height is empty
            //then get the attributes from xml.
    
            if(empty($data) || empty($data['width']) || empty($data['height'])){
    
                $xml = simplexml_load_file(wp_get_attachment_url($id));
                $attr = $xml->attributes();
                $viewbox = explode(' ', $attr->viewBox);
                $data['width'] = isset($attr->width) && preg_match('/\d+/', $attr->width, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[2] : null);
                $data['height'] = isset($attr->height) && preg_match('/\d+/', $attr->height, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[3] : null);
            }
    
        }
    
        return $data;
    
    }
    
    add_filter('wp_update_attachment_metadata', 'svg_meta_data', 10, 2);
    

    What this beautiful piece of code does, is make sure the dimensions of your SVGs are read when you upload your SVGs to the Media Library, and adds this to the file’s info.

    Lay Theme needs these dimensions to determine the aspect ratio of your images (regardless of their file type), which in turn is needed to correctly determine how much space these images are taking on your website.

    1. You can now upload your SVGs to your Media Library, and start adding them to the Gridder as images.

    Enjoy!

    @mariusjopen @arminunruh

    1. Could you please confirm this is a working solution, and that it doesn't break anything? I am by no means a coder…

    2. If this is a working solution, maybe you could consider adding this function to the theme?

    F 1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @Maurizio-Annese

      I can't see that problem on my Google Chrome browser.

      Here is a screenshot.
      0_1525185916862_Bildschirmfoto-2018-05-01-um-16.31.52.jpg

      Can you show me a screenshot of this?

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • mariusjopenM Offline
        mariusjopenM Offline
        mariusjopen
        Global Moderator
        wrote on last edited by
        #3

        Dear @ellusion

        great! We are happy you like the LayThings :-)

        LayTheme:
        LayTheme is a Wordpress theme which gives you a good basis for a portfolio website. We do not recommend to edit the theme because after an update the
        theme gets overwritten and your changes are lost. You can still use custom CSS, HTML and JQUERY. But not in a theme file but in the backend.

        LayGridder:
        This is a standalone plugin which works with every Wordpress theme.
        It enables you to places texts and images on your Wordpress page like you know it from LayTheme. But it does not include the slideshows, text-format-tool and many other things which are a part of LayTheme.

        I hope I could help!

        Best!

        Marius

        www.mariusjopen.world

        arminunruhA 1 Reply Last reply
        0
        • B bro

          Hello everyone,

          Thought I would share this here for future reference, and/or as feedback.

          I think I managed to add working SVG support to the Gridder, by following these steps:

          1. Add SVG Support plugin to your WP.

          This just makes sure you’re actually able to see the SVGs when you add them to your Media Library, as well as be able to add them as images in the Gridder.

          1. Add the solution offered by Laxmana on this page to your theme’s functions.php file (just copy paste his code to the bottom of your theme’s functions.php file).
          function svg_meta_data($data, $id){
          
              $attachment = get_post($id); // Filter makes sure that the post is an attachment
              $mime_type = $attachment->post_mime_type; // The attachment mime_type
          
              //If the attachment is an svg
          
              if($mime_type == 'image/svg+xml'){
          
                  //If the svg metadata are empty or the width is empty or the height is empty
                  //then get the attributes from xml.
          
                  if(empty($data) || empty($data['width']) || empty($data['height'])){
          
                      $xml = simplexml_load_file(wp_get_attachment_url($id));
                      $attr = $xml->attributes();
                      $viewbox = explode(' ', $attr->viewBox);
                      $data['width'] = isset($attr->width) && preg_match('/\d+/', $attr->width, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[2] : null);
                      $data['height'] = isset($attr->height) && preg_match('/\d+/', $attr->height, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[3] : null);
                  }
          
              }
          
              return $data;
          
          }
          
          add_filter('wp_update_attachment_metadata', 'svg_meta_data', 10, 2);
          

          What this beautiful piece of code does, is make sure the dimensions of your SVGs are read when you upload your SVGs to the Media Library, and adds this to the file’s info.

          Lay Theme needs these dimensions to determine the aspect ratio of your images (regardless of their file type), which in turn is needed to correctly determine how much space these images are taking on your website.

          1. You can now upload your SVGs to your Media Library, and start adding them to the Gridder as images.

          Enjoy!

          @mariusjopen @arminunruh

          1. Could you please confirm this is a working solution, and that it doesn't break anything? I am by no means a coder…

          2. If this is a working solution, maybe you could consider adding this function to the theme?

          F Offline
          F Offline
          f.albert
          wrote on last edited by
          #4

          Hey @bro,
          this is a good solution, but it should be implemented in the SVG Support Plugin. I tried some SVG Plugins and it seems that this plugin works fine: https://de.wordpress.org/plugins/wp-svg-images/

          1 Reply Last reply
          1
          • B Offline
            B Offline
            bro
            wrote on last edited by
            #5

            Thanks, @f-albert . Will try your plugin suggestion at a later time.

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              :-D :-D :-D

              www.mariusjopen.world

              1 Reply Last reply
              0
              • mariusjopenM mariusjopen

                Dear @ellusion

                great! We are happy you like the LayThings :-)

                LayTheme:
                LayTheme is a Wordpress theme which gives you a good basis for a portfolio website. We do not recommend to edit the theme because after an update the
                theme gets overwritten and your changes are lost. You can still use custom CSS, HTML and JQUERY. But not in a theme file but in the backend.

                LayGridder:
                This is a standalone plugin which works with every Wordpress theme.
                It enables you to places texts and images on your Wordpress page like you know it from LayTheme. But it does not include the slideshows, text-format-tool and many other things which are a part of LayTheme.

                I hope I could help!

                Best!

                Marius

                arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7

                @mariusjopen said in SVG support (solution/feedback):

                But it does not include the slideshows, text-format-tool

                @mariusjopen it does include the "textformats" feature

                1 Reply Last reply
                0
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                I also code custom websites or custom Lay features.
                💿 Email me here: 💿
                info@laytheme.com

                Before you post:
                1. When using a WordPress Cache plugin, disable it or clear your cache.
                2. Update Lay Theme and all Lay Theme Addons
                3. Disable all Plugins
                4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                This often solves issues you might run into

                When you post:
                1. Post a link to where the problem is
                2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                Online Users
                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                laytheme.com
                • Login

                • Don't have an account? Register

                • Login or register to search.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search