SVG in Nirvana site header image

  • Author
    Posts
  • #106071

    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.

    #106286
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
    #106304

    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

    #106334
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
Viewing 4 posts - 1 through 4 (of 4 total)

You need to log in to reply to this topic.