Inline SVG Rendering as after enabling advanced functions

  • Resolved caratomic

    (@caratomic)


    7 years ago

    My website has used the plugin for about six months, but I can’t convert the existing SVGs on the website from to inline data. Any help?

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • Thread Starter caratomic

    (@caratomic)

    7 years ago

    I just replaced the VisualComposer plugin with a newer version which has a functional builder- it works now. If you notice, the formatting for several images on the main page is out of order, but this should help with understanding the placement of images. I also have SVGs in use for the headers, as shown in the “EPIC Options” tab. It selects and embeds the files as with most properties from the media library, so wouldn’t it have the same functionality as the SVGs in posts?

    • This reply was modified 7 years ago by caratomic.
    • This reply was modified 7 years ago by caratomic.
    Plugin Author Benbodhi

    (@benbodhi)

    7 years ago

    Ok, so with the theme options images, it’s because they aren’t actual URL’s until it’s too late I think.
    For example, the line in your theme header file:
    <a class="navbar-brand normal" href="<?php echo site_url(); ?>/#ip-container"><img class="style-svg" src="<?php echo esc_url($jellythemes['logo']['url']); ?> " alt="<?php echo strip_tags($jellythemes['blogname']); ?>"></a>

    can be swapped with:
    <a class="navbar-brand normal" href="<?php echo site_url(); ?>/#ip-container"><img class="style-svg" src="http://atomicbranding.co/wp-content/uploads/2016/07/Atomic-Letters.svg" alt="<?php echo strip_tags($jellythemes['blogname']); ?>"></a>

    Then the logo is rendered inline.

    As for the other ones in the home page content, I can’t seem to find them, the visual composer says the page is empty even though it’s not…

    Thread Starter caratomic

    (@caratomic)

    7 years ago

    The homepage has an empty VisualComposer module because each section following the top banner is represented by its own page underneath the parent page. Those pages have their own VisualComposer content.

    I also wrote a glowing review on your plugin page, and I don’t write reviews often, but I appreciate the attentive and complimentary support.

    Plugin Author Benbodhi

    (@benbodhi)

    7 years ago

    Can you please tell me where I can find the page/section where this SVG is?
    https://www.dropbox.com/s/6knyhhnghehkoba/Screenshot%202017-04-03%2022.56.15.png?dl=0

    I can pretty positively say it just has to do with the way visual composer is setup. Unfortunately, I think that’s something to take up with the devs of that plugin. SVG Support is working fine as it should, but it just doesn’t seem to be playing nice with VC.

    Thread Starter caratomic

    (@caratomic)

    7 years ago

    It should be in the “About us” page, below the “Home” parent page. It’s in an “image-title” module on VC. I honestly wouldn’t mind if the VC elements remain as image files, but I would like to see if the header logos represent as inline. I’ll look into adding the class for those.

    • This reply was modified 7 years ago by caratomic.
    Plugin Author Benbodhi

    (@benbodhi)

    7 years ago

    Ok, to get the header elements working, you will need to paste the URL to the images in the theme header rather than the theme options.
    I can’t tell you why exactly, but that fixes it.
    Also, if you paste the URL’s in the header file, make sure to use get_stylesheet_dir_uri()

    Like the example I showed earlier, you could do this:
    <a class="navbar-brand normal" href="<?php echo site_url(); ?>/#ip-container"><img class="style-svg" src="<?php echo get_stylesheet_directory_uri(); ?>/themesvg/Atomic-Letters.svg" /></a>

    This code assumes that you create a directory in your theme called themesvg and you upload the svg files to that directory to be used in this reference.

    There is a few ways you could do this. The simplest is to just paste the direct URL from your media library in the header, but it’s not best practice.

    I hope you get it sorted.

    • This reply was modified 7 years ago by Benbodhi. Reason: fixed code
    • This reply was modified 7 years ago by Benbodhi. Reason: fixed code
    Thread Starter caratomic

    (@caratomic)

    7 years ago

    Thanks for the advice. I decided to implement the code and formed the directory you suggested into both header PHP documents, and the Atomic-Letters.svg functions perfectly inline. When I went to add the Atomic-Wordmark.svg file for the second header, the black-colored SVG files appears in white. Odd.

    EDIT: Opened in Chrome Developer Tools to find out that a cls-1 string was responsible for that. Likely a vector issue in the file itself.

    • This reply was modified 7 years ago by caratomic.
    • This reply was modified 7 years ago by caratomic.
    Plugin Author Benbodhi

    (@benbodhi)

    7 years ago

    My pleasure, I’m glad you got it working!
    That issue would be related to the SVG file itself and its layers before it was uploaded to the site.

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • The topic ‘Inline SVG Rendering as after enabling advanced functions’ is closed to new replies.

Tags