Support » Plugin: SVG Support » js image size error

  • Resolved forevercurious

    (@forevercurious)


    Hi,

    Just installed your plugin to add svg’s to my Divi site, having a play around with what is the best option to export form photoshop at the moment (don’t have illustrator)

    Any-how, when i turn on the advanced settings i get a js error relating to image dimensions

    error:
    custom.js:1219 Uncaught TypeError: Cannot read property ‘substr’ of undefined
    at Image.et_define_logo_dimension [as onLoad] (custom.js:1219)

    custom js:
    // Detect actual logo dimension, used for tricky fixed navigation transition
    function et_define_logo_dimension() {
    var $logo = $(‘#logo’),
    logo_src = $logo.attr( ‘src’ ),
    is_svg = logo_src.substr( -3, 3 ) === ‘svg’ ? true : false,
    $logo_wrap,
    logo_width,
    logo_height;

    i have added the following to the functions.php, but does not change anything

    add_action( ‘after_setup_theme’, ‘bodhi_svg_theme_support’, 11 );
    function bodhi_svg_theme_support() {

    remove_theme_support( ‘custom-logo’ );

    add_theme_support( ‘custom-logo’, array(
    ‘flex-width’ => true,
    ‘flex-height’ => true,
    ) );

    }

    Am i missing something?

    Additionally when the svg is loaded as a logo into the header, it’s position is not in the default Divi location, it appears to be that the text within the logo is positioned in the center of the logo canvas/ viewbox. If i change the width of the logo the text moves to the left.

    Any ideas what is happening here and how can i get logo/text to sit in the default Divi location

    Thank you

    Tony.

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Thanks for your interest in my plugin.

    Firstly, the error seems strictly related to your custom JS and you can Google the error to find out more online, there’s tons of stuff related to that error.

    As for the use of SVG in the Divi logo setting, it works out of the box with both Divi and my plugin. So I can only assume you need to use a true vector editing software program to make sure your SVG is clean and make sure you have no other conflicting code elsewhere.

    Another note, you don’t need to render your SVG inline unless you want to target inner elements using JS or CSS or something later. For your use as a logo, you should be able to just upload your SVG file and use the standard Divi settings to set it’s size.

    Let me know if I can help any further.

    Plugin Author Benbodhi

    (@benbodhi)

    Looking at your JS, it’s not formatted in a code block so it’s kinda hard to read, but it’s incomplete nonetheless. I believe the console error is purely just in your JS.

    Thread Starter forevercurious

    (@forevercurious)

    Hi,

    Thanks for your response.

    The JS is part of Divi, i did not add it and yes i rendered in line as i was going to add further svg’s later on.

    Do you see the js error in your console?

    Plugin Author Benbodhi

    (@benbodhi)

    Ok, I downloaded your SVG to test.
    It works fine when you don’t “Force Inline SVG” with my plugin and there is no console error.

    It seems rendering the Divi logo inline with that force feature fires the JS error.

    I think because Divi is looking for image dimensions in that code and SVG is not an image with dimensions to pass back, it’s messing with it.

    However, the logo does render and you can target the inner elements of it if that’s what you’re trying to do. The error in console can actually be ignored in that case.

    To target the logo with CSS, I would definitely remove the id="logo" from the actual SVG code as a first step, as Divi has a lot of CSS for that target. Then the SVG will render exactly how it was uploaded in terms of size on the canvas like you mentioned. You will also then be able to target it with CSS using something like .logo_container svg {} in your stylesheet.

    Thread Starter forevercurious

    (@forevercurious)

    Benbodhi,

    thanks again for your response…..i am going to be dumb here and ask, how can i get rid of the id=”logo”, i do not see it anywhere other than inspecting on the webpage!

    Thread Starter forevercurious

    (@forevercurious)

    Also, you say you use Divi, do you not get these issues with your logos?

    Plugin Author Benbodhi

    (@benbodhi)

    Nevermind about the #logo id. It looks like Divi adds it in. You just need to be more specific with the CSS to override their rules when it’s rendered inline. I thought it was in your SVG because I saved it from the rendered element and don’t have your original file to test.

    When you say these issues, there is only one issue I can see and that’s the error in the console due to the inline SVG not being able to return dimensions to Divi. This error will not affect anything else. And I also don’t use the Force Inline feature of my plugin… I use it to debug and some people with certain themes need it. But I have never needed to render a Divi logo inline so never noticed this error before.

    The other stuff you mentioned is just CSS.

    What exactly are you trying to do with the SVG that you need it rendered inline?

    I would suggest maybe just adding it to your child theme’s header if you want to avoid the console error. But that’s only if you need it rendered inline which I have only come across once before because they animated their logo to look like it was writing itself during mousemove.

    Thread Starter forevercurious

    (@forevercurious)

    Sorry for the slow response, been away from the computer.

    Ok, i probably do not need the logo to be inline, but there will be other SVG’s that will be added, that will want to be inline so they can be changed with css.

    Actually, just been informed by the client, that they may want to change the colour of the logo dependent on page/ section, so wouldn’t this be best easier to do with inline SVG rather than upload new logos?

    One thing i cannot work out is when i add the logo inline as mentioned previously, the text is centred in the logo frame/canvas (however described!) but when not inline it is positioned as expected, default divi location.

    I found that in the theme customiser, if i increase the primary menu bar/ menu height to 300 and the logo max height to 100, it display where you would expect, 30px from the left…but the logo is quite big on the front page.

    i have some screen shots if this helps to explain?

    tony.

    Plugin Author Benbodhi

    (@benbodhi)

    Hey Tony,

    There is no need to force inline all SVG. You can do it for each one as needed just by adding the class="style-svg" to your IMG tag.

    I would suggest customising your header.php file and replacing the standard Divi logo with your own, for example, you could replace this:

    <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
    

    With this:

    <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="style-svg svg-logo" />
    

    That should then allow you to still set your logo SVG in the Divi theme settings, turn off the force inline SVG feature of my plugin and modify it on a per page basis using CSS.

    I also removed the #logo ID from the code there, so it should be easier to style and drop some of Divi’s CSS.

    As mentioned earlier though, the way it sits when inlined compared to not inlined is due to the way a rendered SVG is handled compared to a simple image in the Divi CSS. You can make it sit where ever you want at any size you want using CSS, but the Divi CSS is written for when it’s an image, not inline which is why you see it sit differently when inlined. But again, you can modify that using CSS.

    I hope this helps.

    FYI, I haven’t tested this, but theoretically, it should work. I’ll test now just to be sure.

    Plugin Author Benbodhi

    (@benbodhi)

    Ok yep, that works.

    If you use that exact code I provided in your child theme header, turn off the force inline feature, set your SVG as the logo in the Divi theme settings as usual and then you can use CSS like the following to address the size and colour situations:

    .logo_container .svg-logo {
    	max-height: 100%; // stop it from going outside the menu bar
    	max-width: 120px; // set the size of it
    	float: left; // push all the way left
    }
    
    .logo_container .svg-logo path {
    	fill: red;
    }
    .home .logo_container .svg-logo path {
    	fill: blue;
    }
    .page-id-2 .logo_container .svg-logo path {
    	fill: green;
    }
    

    Additionally, you can target the paths individually inside your SVG since you have ID’s in it to make the elements within different to each other if you wanted.

    Bonus: no console errors since we ditched the Divi size attribute code form the IMG tag.

    I’ll mark this as resolved since it’s not really a plugin issue, just an implementation thing and we’ve achieved what you wanted. Let me know if I can be of further help though.

    Thread Starter forevercurious

    (@forevercurious)

    Hi Benbodhi,

    Yes that works…thank you so much!

    I had my own css class added, before i realised why it was not working…but all good now.

    Dumb question…i have inserted an svg in to an image module….which still shows as an img on the front end, how do i add the class=”style-svg” to the image tag to make it an svg?

    thank you

    Plugin Author Benbodhi

    (@benbodhi)

    As you know, you can use SVG as images in the Divi builder, however when adding a custom class to the image module, the class is not added to the actual image as is required by my plugin, but an outer container.

    Simple solution: I use code modules when inlining SVG.
    So you would just insert a code module into your page layout and in the code module, just manually throw in your IMG code like so:
    <img src="your-svg-src.svg" class="style-svg" />

    That will then render it as inline SVG code and can be used anywhere.

    Thread Starter forevercurious

    (@forevercurious)

    Brilliant, didn’t think of that one!….again thank you very much for your help, i know a few of the questions were outside of your plugin, so thank you your assistance, very much appreciated.

    I think its safe to say resolved now!

    thanks.

    Plugin Author Benbodhi

    (@benbodhi)

    No problem. Yeah, it’s all not really issues with my plugin, but problem solving how to implement what you’re trying to do. I’m happy to help 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘js image size error’ is closed to new replies.