Support » Plugin: SVG Support » Upload two files? .svg & .js

  • Resolved squashdynamics

    (@squashdynamics)


    I’ve had an interactive diagram made for my website. It was provided to me in two files – squash.svg and custom.js. I can amend the script taf with xlink:href in the .svg to point to the .js file.

    I’ve uploaded the SVG support plugin and enabled advanced mode. However I can only see the diagram when advanced mode is disabled?

    I’ve uploaded both the .svg file and the .js file to my media library.

    Can you please (pretty please!) advise how I can get my interactive image to work as intended on the page?

    Many thanks in advance

    Martin

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

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

    (@benbodhi)

    Hi Martin,

    You would just keep the JS separate and include it in your child theme.

    You’ll need advanced mode on and then place your SVG in your page/post using the IMG tag in plain text/code so you can add the class “style-svg” which means my plugin will then render your SVG inline.

    I’ve seen weird behaviour trying to keep the JS inside the SVG. So simply including it in your child theme should do the trick as long as your SVG is rendered inline.

    Getting it in those 2 separate files is ideal.

    Let me know how you go.

    Hi Benbodhi,

    Thank you so much for coming back to me so quickly! I never realised I’d have to code a bit to get this to work.

    The problem is that I’m not a developer and I pretty much google issues to find a solution – So when you say include the custom.js file in the child theme I have no idea really how to do that. I can however find the functions.php section to edit – its how I code the next bit I’m stuck on, as I have no knowledge of php or js.

    When I googled it I have found this code:
    ————————————————————————-
    /**
    * Proper way to enqueue scripts and styles.
    */
    function wpdocs_theme_name_scripts() {
    wp_enqueue_style( ‘style-name’, get_stylesheet_uri() );
    wp_enqueue_script( ‘script-name’, get_template_directory_uri() . ‘/js/example.js’, array(), ‘1.0.0’, true );
    }
    add_action( ‘wp_enqueue_scripts’, ‘wpdocs_theme_name_scripts’ );
    ————————————————————————-
    I’m going to ask some stupid questions now 🙂

    1. Easy one I thnk… I start underneath the section that says “/***************** BEGIN ADDING YOUR CODE BELOW: *****************/”?
    2. my theme is called u-design… so the first line would actually be:
    function wpdocs_u-design_scripts() { ?
    3. Where does the actual code from the .js file go? Do I copy and paste the text from the javascript file, or do I upload it somehow/ somewhere?
    4. What is script-name? Is that the name of my .svg file?
    5. Do I need to change the xlink:href script tag in the .svg file?

    If this is too much help then just say – it’s just I need my hand held a little to get through this. Thanks again for at least reading!

    Best regards

    Martin

    Plugin Author Benbodhi

    (@benbodhi)

    Hey Martin,

    You will need to create a child theme if you aren’t already using one, so your edits don’t get overwritten next theme update.

    To be honest, it’ll be quicker for me to just paste some code for you that will work and to give you a little walkthrough. I’m away from the computer right now, but I’ll put it together for you asap.

    Put simply, it will be:
    – create a child theme and install and activate it
    – Include the JS file in the child theme (much like the code you found already). And the JS file is standalone, just copy it into your child theme.

    But I’ll hook you up with a precise walkthrough as soon as I get back on the computer.

    Plugin Author Benbodhi

    (@benbodhi)

    Ok,

    So first, if you aren’t already using a child theme, you will need to create one.
    Here is the official docs on how to do that:
    https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme

    You basically create a new folder, call it your existing parent theme name with -child appended. For example u-design-child.
    Then inside that folder, create a css file called style.css and add the following code to that file:

    /*
     Theme Name:	u-design-child
     Theme URI:	#
     Description:	u-design child theme
     Author:	Your Name
     Author URI:	#
     Template:	u-design // this should be the exact folder name of your parent theme
     Version:	1.0
     */

    In that code, make sure you put the exact folder name of the parent theme folder as the template (it might be correct the way I wrote it, but I’m not sure without having the theme myself). You can also change the Author name and the #’s I put for links and the theme name and description. They all just display in the themes dashboard. The template is the important one and must reference your parent theme.

    Then create a php file called functions.php.
    And paste the following in it:

    <?php
    
    if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly.
    }
    
    /**
     * Enqueue Scripts and Styles
     */
    add_action( 'wp_enqueue_scripts', 'your_prefix_theme_enqueue_scripts_styles' );
    function your_prefix_theme_enqueue_scripts_styles() {
    
    	// Setup Parent Theme Stylesheet
    	$parent_style = 'parent-style';
    	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
    	// Include and enqueue your custom JS file
    	wp_enqueue_script( 'your-custom-script-name', get_template_directory_uri() . '/js/the-file-name.js', array(), '1.0.0', true );
    
    }

    So in that code, you will want to change your_prefix to your own prefix – it can be anything, just keep it unique so it doesn’t clash with any other plugins or themes function names. And also change your-custom-script-name to whatever you want, it’s just the handle for reference. I would name it something to do with the file itself so it’s clear. Something like your-prefix-custom-svg would work.
    Then you will also need to change the-file-name.js to the exact file name of your JS file that you have.

    Then create a folder called js in your child theme folder and place your JS file in there.

    So the Folder/file structure should look like this:

    u-design-child/
    	functions.php
    	style.css
    	js/
    		your-js-file.js
    

    Then upload/install this new theme and activate. It will act as an extension of your parent theme where you can make customizations and not lose your work when the parent theme is updated 🙂

    Let me know how you go.

    Plugin Author Benbodhi

    (@benbodhi)

    This only addresses creating the child theme and adding your custom JS.

    You will still need to then have advanced mode active in my plugin settings and then add your SVG file using plain code/text to your page/post/plain text block.

    Like this:
    <img src="url-of-your-svg-file.svg" class="style-svg" />

    This will tell my plugin to find your IMG tag and replace the image with the actual code from your SVG file which will allow the SVG to work as intended rather than simply render as an image.

    All references to the JS from inside the SVG file will now be able to find the JS included in your theme and everything should work as expected.

    Hopefully this walkthrough gets you there! Let me know if you get stuck or when you find success 🙂

    Hi!

    Apologies for not having been back to you – I’ve had a lot on lately and have only just had a chance to get to this 🙁 I’ve tried what you advised but I’m still not getting it to work so far, but I think I’m not far away…

    Through my hosting provider I went into my file manager, and went to the child theme and added the folder js, and copied the custom.js file into it.

    I’ve already got a child theme installed and that’s what I’m using, so I don’t need to create one. I went to apprearance – theme editor – and selected the theme functions (functions.php). I scrolled down in that file to the line that says “Begin adding your code below” and entered the following code as given by you;

    if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly.
    }
    
    /**
     * Enqueue Scripts and Styles
     */
    add_action( 'wp_enqueue_scripts', 'squashmodel_theme_enqueue_scripts_styles' );
    function squashmodel_theme_enqueue_scripts_styles() {
    
    	// Setup Parent Theme Stylesheet
    	$parent_style = 'parent-style';
    	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
    	// Include and enqueue your custom JS file
    	wp_enqueue_script( 'squash', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
    
    }
    

    It didn’t work.

    The svg file had the following line at the end;

    xlink:href=”custom.js”

    It didn’t work so I amended the href to the correct full file address for the custom.js, but it still didn’t work.

    I hope this makes sense…. If you can see where I’ve went wrong that would be fantastic. I really appreciate your trying to help me!

    Best regards

    Martin

    Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Definitely close!

    Since you have an existing child theme, you won’t need all that code, just to enqueue your custom JS file. Additionally, it should check for stylesheet directory rather than template (child theme instead of parent theme)

    So just add this to your functions.php

    
    /**
     * Enqueue Scripts and Styles
     */
    add_action( 'wp_enqueue_scripts', 'squashmodel_theme_enqueue_scripts_styles' );
    function squashmodel_theme_enqueue_scripts_styles() {
    
    	// Include and enqueue your custom JS file
    	wp_enqueue_script( 'squash', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
    
    }
    

    See how that goes. The JS folder and file is in the right spot, everything else sounds good.

    Always happy to help 🙂

    That was so quick! I’ve amended the functions.php but it still isn’t working. The image is showing but just not interacting with the js.

    In SVG support settings I’ve enabled advanced mode – should there be anything else enabled?

    Also, what should the href in the svg file be?

    I can feel its close but I’m at a dead end I think..

    Best

    Martin

    Does the code in the functions.php need the filename of the .svg file at all?

    Thanks again

    Martin

    Plugin Author Benbodhi

    (@benbodhi)

    Once that JS file is enqueued correctly, all you need to do is have advanced mode on and put the class in the IMG tag that embeds the SVG.

    <img class="style-svg" src="Your/svg/url" />

    That should render the svg inline and allow the JS to get to the internal code.

    Hi there,

    This is what I was afraid of – I knew I wouldn’t get it to work. This is where I am:

    1. I’ve got a folder named “js” in my child theme and the .js file inside it, as below;

    my_site_name/wp-content/themes/u-design-child/js/custom.js

    2. I’ve included the following code as instructed, underneath where it says “Begin adding your code below”.

    /***************** BEGIN ADDING YOUR CODE BELOW: *****************/
    
    /**
     * Enqueue Scripts and Styles
     */
    add_action( 'wp_enqueue_scripts', 'squash_theme_enqueue_scripts_styles' );
    function squash_theme_enqueue_scripts_styles() {
    
    	// Include and enqueue your custom JS file
    	wp_enqueue_script( 'squash.svg', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
    
    }
    

    3. My SVG is embedded in the page with the following tage;

    <img class="style-svg" src="https://my_site_name/wp-content/uploads/2020/12/squash-Copy.svg" />

    4. The SVG support settings are set to advanced mode.

    When I go to the page, the image displays, but it is not interactive at all. However, it does work fine when I open the SVG and the js file is in the same folder as the SVG.

    I can’t think of anything else and I’ve spent hours googling and playing around with it, but to no avail. I’m pulling my hair out.

    Do I have to pay someone to fix this?

    Martin

    It feels like I have the things in place that are needed, and its almost there, but the thing that I CAN’T get my head around is…. how does it know to connect to the Javascipt when someone mouses over the SVG image on the page? The code has no mention of the filename, or anything connected with it. I’m missing something in my logic. I’m sorry, this is doing my head in.

    Martin

    Plugin Author Benbodhi

    (@benbodhi)

    Hey Martin,

    You’ve got it!

    I just checked the URL provided in the first post and can see the SVG rendered inline with the areas hovering and changing the text below…

    That’s in Brave/Chrome/Firefox/Vivaldi/Safari all on Mac.

    So you go there, well done 🙂

    If you’re not seeing it, let me know what browser. You may just need to clear cache or check using an incognito/private window to avoid your local browser cache.

    Hi Ben

    I wish I had. That’s an SVG with the js included inside it – if you scroll to the bottom of that same page you’ll see the SVG that doesn’t have js in it.

    Should I just give up on the recommended method (that we’re trying just now) and just use the combination file? I was under the impression that it was better to use the two file method.

    Best

    Martin

    Plugin Author Benbodhi

    (@benbodhi)

    ok yeah, that one is being lazy loaded, there’s an additional class "lazyloaded" in there. It’s probably your theme doing it. You could try adding the loading="eager" to your IMG tag:
    <img class="style-svg" loading="eager" src="https://my_site_name/wp-content/uploads/2020/12/squash-Copy.svg" />

    That may do it, but your theme might have settings as well, or even a way to exclude particular images from being lazyloaded. Usually when something implements lazyloading, there’s a way to avoid it when needed.

    BUT, the fact that the other one there is working… that’s pretty awesome! Usually I would separate all the code out because of weird behaviour, but if it works fine, you may not need to worry.

Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.