Force Inline SVG conflicts w/ some plugins

  • Resolved jche34

    (@jche34)


    6 years, 1 month ago

    Hi there,
    Love the plugin and find it very useful. I running into a conflict with another plugin though while the Force Inline SVG option is on – I am not sure what is going on exactly but as far as I can figure out something happens with the src attributes for images and my gallery plugin does not like that. I was able to make the gallery at least show by enabling the Output JS in Footer option but the script still errors out and the inline SVG code is not there.
    I was wandering if there is an easy fix for this or could it be addressed with an update? – I can look for other galleries but out of 5 that I tried 2 experienced a similar conflict with the inline script.. also, hard to find one that matches closely what I need.
    Any help will be greatly appreciated!

    Chrome console output:

    Uncaught TypeError: Cannot read property ‘match’ of undefined
    at HTMLImageElement.<anonymous> (svgs-inline-min.js?ver=1.0.0:1)
    at Function.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.each (jquery.js?ver=1.12.4:2)
    at bodhisvgsInlineSupport (svgs-inline-min.js?ver=1.0.0:1)
    at HTMLDocument.<anonymous> (svgs-inline-min.js?ver=1.0.0:1)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

    Firefox console ouput:

    TypeError: jQuery(…).attr(…) is undefined[Learn More] svgs-inline-min.js:1:148

    bodhisvgsInlineSupport https://www.rusafova-markulis.com/wp-content/plugins/svg-support/js/min/svgs-inline-min.js?ver=1.0.0:1
    each 2 jQuery
    each
    each

    bodhisvgsInlineSupport https://www.rusafova-markulis.com/wp-content/plugins/svg-support/js/min/svgs-inline-min.js?ver=1.0.0:1
    <anonymous> https://www.rusafova-markulis.com/wp-content/plugins/svg-support/js/min/svgs-inline-min.js?ver=1.0.0:1
    i 4 jQuery
    i
    fireWith
    ready
    K

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

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

    (@benbodhi)

    Hi there,

    Thanks for your support and sorry for the delay and inconvenience!

    I’m actually on the road at the moment and moving house next week, so I’m absolutely flat out.
    But I have this marled to come back to as soon as possible.

    I think the first thing would be to find out why you want to use the “force inline SVG” feature… This isn’t usually a necessary thing and I would absolutely avoid it if possible.

    Thread Starter jche34

    (@jche34)

    Thanks for the response!
    The reason for the inline SVG is that I want to be able to control the SVG elements from the CSS level – hover effects, etc. It is mainly the site logo for now and I could probably just include the SVG code in the header but I do like the ability to easily swap the SVG files from the media library via the ‘customize’ option as opposed to editing the template code each time.
    If you find some time to fiddle with this I will be forever thankful – already am as the plugin is pretty great otherwise.
    Cheers!

    Plugin Author Benbodhi

    (@benbodhi)

    Ok yeah fair enough, I personally just use the css class to trigger any SVGs I want inline, the logo itself, I do that in the header.php. But I feel ya.

    Cool, I’ll take a look asap!

    Thread Starter jche34

    (@jche34)

    I guess I should mention that all pages other then the PROJECTS page with the gallery plug-in in question work fine, the SVG logo is inline, I get to control the fill color on hover via CSS and everything’s great. There is something that the gallery script does that then causes the force-inline script to fail.. if that can’t be helped can you explain a little more how you use the CSS class to trigger SVGs? Thanks for taking the time to answer – you probably get a lot of questions.

    Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Sorry for the late reply!

    So basically I use JS to search the DOM for the trigger css class on an img tag with an SVG file for the src. When any are found, the JS then swaps the whole img tag with the src SVG file’s code and renders it inline.

    The force SVG feature just swaps out ALL img tags with src SVG files by checking the extension of the src file.

    I hope this helps.

    Thread Starter jche34

    (@jche34)

    Thanks! – this might be the way to go for me since the site logo is the only SVG I want to control at this point.

    On another note, I notices the Force Inline SVG does not seem to be working on the HTTP protocol on all the pages that don’t have plug-in conflicts – HTTPS works fine.

    Plugin Author Benbodhi

    (@benbodhi)

    I would be forwarding all http traffic to https anyway, which should avoid that issue.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Force Inline SVG conflicts w/ some plugins’ is closed to new replies.

Tags