[Resolved] Filter Title to use SVG inline to replace Logo & Title

Home Forums Support Filter Title to use SVG inline to replace Logo & Title

  • This topic has 19 replies, 3 voices, and was last updated 4 weeks ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #921058
    Sebastien

    Hi,

    I would like to replace the logo I use (Customizer > Identity > Logo) by a SVG inline.
    I’ve tried to write my code <svg> through Customizer > Identity > Title but it doesn’t read the code format.

    https://generatepress.com/generatepress-2-3/
    There Tom answered me that I can easly do it using a filer.
    So, I’ve tried:

    add_filter( 'generate_site_title_output', function( $output ) {
    	return sprintf(
    		'<div class="testtt"><svg>xxxxxxxxxxxxxx</svg></div>',
    		( is_front_page() && is_home() ) ? 'h1' : 'p',
    		esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
    		get_bloginfo( 'name' )
    	);
    }

    but it doesn’t work.

    Also The aim is to not display anymore original’s logo & title. But I don’t want to loose any markup (for SEO) that the theme could send (to google, …) . I’m not sure how WordPress or Theme use these datas. That’s why I would like to be sure this hack wont decrease my SEO.
    1) Can you correct my code ?

    2)Alternativly, I would like to use 2 filter: Once to replace the .header-image content by my own svg inline content. And a second to replace the .main-title content by my own svg inline content.
    Thanks

    #921169
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    add_filter( 'generate_logo_output', function( $output ) {
    	printf(
    		'<div class="site-logo">
    			<a href="%1$s" title="%2$s" rel="home">
    				YOUR INLINE SVG CODE HERE
    			</a>
    		</div>',
    		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
    		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    	);
    } );

    Let me know 🙂

    #921218
    Sebastien

    Thanks Tom,
    it works =)

    But I meet a CSS problem with SVGs, I would like le DIV “site-logo” perfect fits with the SVG automaticly.
    I’ve tried with inline-block but I don’t success…

    .site-logo svg {
    	width:100%!important;
     margin:0!important;
    }
    .site-logo  {
    	display:inline-block!important;
     margin:0!important;
    }

    The problem is that the width of the div site-logo is wider than the SVG =/
    Can you have a look?
    my website is into the main post.

    thanks

    #921462
    David
    Staff
    Customer Support

    Hi there,

    i think the issue is with your SVG – if you look at your markup you will see the viewBox dimensions, which are the same aspect ratio as the container. You would need to edit your original SVG to make sure there is no negative space around the image.

    #921691
    Sebastien

    Thanks to pointing me that.
    I get a last display error:

    It seems the size is correct into Chrome; Mobile; but Firefox desktop pc seems to be really bigger.. 😮
    any idea?

    .site-logo {
    	text-align:left;
    }
    #Logo-title  {
    	vertical-align:middle!important;
    	width:40%!important;
    	position:relative;
    	left:1rem;
    	
    }
    #Logo  {
    	vertical-align:middle!important;
    	width:10%!important;
    }

    thanks

    #921710
    David
    Staff
    Customer Support

    The simplest fix would be to not use %’s instead use PX’s to define an exact size.

    #921786
    Sebastien

    So, I’ve just tried but every time I use: px or em or rem, the primary menu position is impacted. When I use % whatever the size I choose, the primary menu (to the right) doesn’t move..
    I could also change the position of the primary menu, but I also have to manage my sticky menu, and my mobiles views… that seems a bit hard.
    Are they any other way to fix it? =/

    #921818
    David
    Staff
    Customer Support

    Try giving the two elements a PX height property. That should stop FF from just filling the available container space.

    #921830
    Sebastien

    Thanks for the help.

    So, I still have issue with firefox:
    I can now adapt the size of the icons into all browers (by giving height properties). However, if I stop using: width:10%!important; into #Logo I lost the space between SVGs and the main nav menu (using Chrome), and the same code has not effect with FireFox.

    .menu-primary-menu { 
    	height:60px!important;
    }
    .site-logo {
    	text-align:left;
    }
    #Logo-title  {
    	vertical-align:middle!important;
    	height:40px!important;
    	position:relative;
    	left:1rem;	
    }
    #Logo  {
    	vertical-align:middle!important;
    	width:10%!important;
    	height:60px;
    }

    Maybe it is a bad idea, but could adding another DIV next the Title and before primary menu help?

    Thanks

    #921850
    David
    Staff
    Customer Support

    The inside-navigation is a flex box, so you can give the .site-logo a margin-right: auto; property to push the nav away from it.

    #921856
    Sebastien

    Thanks you so much David, it works ! 🙂 I’m looking for a quick CSS course / book or video for learning basics. Any chance you could advice me one?

    Bye

    #922076
    Leo
    Staff
    Customer Support
    #1591812
    Rafał

    Hi!
    How to do the same (add_filter to use inline SVG logo) in mobile header, and sticky navigation?

    #1591861
    David
    Staff
    Customer Support
    #1592114
    Rafał

    Thank you, David!
    Although nav logo filter does not work for me.
    [Menu Plus is active.]

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