SVG in Nirvana site header image

Forums » WordPress » Nirvana » How To

  • Author
    Posts
  • July 27th, 2020 at 18:31 #106071
    john

    Thank you for Nirvana. It is an excellent theme.

    I want to use an SVG image in my site header with clickable areas (tap to call; tap to email).
    I have created the image and added the functionality. I am using a plugin SVG Support. This automatically adds class=”style-svg” within the tag when an SVG image is present.

    I can check this because I can see it when I look at the Text tab of the page (or view page source). It works fine for mages in the body of a page, but it doesn’t work in the site header image. Also I can’t see the html for the header but iI’m guessing it is missing the class=”style-svg”.

    Can I add this to custom CSS? It dosn’t seem to work – but I don’t know how to edit / form CSS.
    If I add to the CSS file it will get replaced when the file is updated / next version.

    Thank you for your help.

    August 4th, 2020 at 20:30 #106286
    Zed
    Cryout Creations mastermind

    The theme relies on WordPress’ get_header_image() to retrieve the header image URL used in the generated markup.
    I doubt the plugin can filter this URL, especially since that function does not include any filterable calls.

    To add extra attributes to the header image markup you’ll need to customize the theme code generating it. Look for nirvana_header_image() in includes/theme-functions.php. This function can be unhooked and a replacement hooked in its place.

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    August 5th, 2020 at 01:48 #106304
    john

    Dear Zed,
    Thank you for your reply. I’m not a coder, so this is all a bit beyond me. The site will be for our church. This functionality isn’t something I envisioned, but having spent a couple of weeks drafting the site, it has now been thought of as a “good idea” by the clergy of the parish!

    I did manage to find:

    function nirvana_header_image() {
    $nirvanas = nirvana_get_theme_options();

    So I will try to add class=”style-svg” within the () of the first line above.

    I did also find $attr () after the nirvana_get_theme_options somewhere, but i’ll try your suggestion first.

    I had hoped to be able to add it via the CSS customiser so it will stay if the site is updated. But I guess not. Not going to do it now as it is 1 AM here and I am away for 2 days for our 25th Wedding Anniversary in the morning – even I wouldn’t get away with bringing the laptop!

    So if it is a couple of days before i try it, please don’t think i don’t appreciate your guidance.

    Best regards
    John

    August 5th, 2020 at 20:16 #106334
    Zed
    Cryout Creations mastermind

    The line responsible with the output of the markup is the last one in that function
    if (isset($himgsrc) && ($himgsrc != '')) : echo '<img id="bg_image" alt="' . get_bloginfo( 'name' ) . '" title="" src="' . esc_url( $himgsrc ) . '" />'; endif;
    This is where you’d need to add the class attribute. But is this sufficient to make your SVG plugin work? Adding the classname there will not replace the source image used by the theme for the header.

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    August 5th, 2020 at 23:03 #106337
    john

    Dear Zed,
    Thank you for your reply. I did ty to add that to read:

    if (isset($himgsrc) && ($himgsrc != ”)) : echo ‘' . get_bloginfo( 'name' ) . '‘; endif;

    But as you predicted it didn’t work. It’s a pity as the SVG functionality works with all other images including the sliderimages on the presentation page – but that’s not where the priest wants it, lol!

    Thought it might work if i placed the interactive part as an image within the header widegt, but no joy.

    The plugin automatically adds class=”style-svg” to the tag. Hmmmm.

    I suspect i may be near the limit of my understanding/competence. I don’t want to impose, but if there is an easy fix please let me know.

    Thank you for your patience and assistance.
    John

    August 5th, 2020 at 23:05 #106338
    john

    My previous post seemed to omit part of the code

    if (isset($himgsrc) && ($himgsrc != ”)) : echo ‘' . get_bloginfo( 'name' ) . '‘; endif;

    August 5th, 2020 at 23:06 #106339
    john

    if (isset($himgsrc) && ($himgsrc != ”)) : echo ‘' . get_bloginfo( 'name' ) . '‘; endif;

    August 5th, 2020 at 23:10 #106340
    john

    Sorry, Zed, when i copy and paste the code it leaves part of it out. I added class=”style-svg” within the <img tag between id=”bg_image” and alt=” ‘

    August 10th, 2020 at 13:28 #106423
    Zed
    Cryout Creations mastermind

    From what I see in the plugin’s documentation, the image file needs to be a SVG for the plugin to do its job (it doesn’t replace regular jpg/png images with SVGs dynamically).
    Did you assign a SVG image file as the header image of the site? The theme does not care about the file format that’s being used, it just retrieves and outputs the correct image URL as returned by WordPress.

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    August 12th, 2020 at 13:01 #106464
    johnolivar

    thank you for best suggestion
    if (isset($imgsrc) && ($himgsrc !=0 ”)) :

    Website: www.tworuns.com/google-search-console-index-coverage-issues-and-their-possible-fixes

    August 29th, 2020 at 12:45 #106438
    john
    This reply is private.
  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘SVG in Nirvana site header image’ is closed to new replies.