Archived topic

Replace logo with animated logo though shortcode

7 replies · Started by George on January 7, 2019

Viewing posts 1–8 of 8

January 7, 2019 at 10:59 am #775556

I want to integrate an animated logo exported from After Effects through the After Effects Bodymovin plugin. I am also using the Bodymoving WordPress plugin to import the logo animation as a data.json file. Basically, the plugin allows me to insert a shortcode in WordPress to display the SVG animation. It just creates the necessary code to display the animation.

I am trying to use the generate_logo filter for this:

add_filter( 'generate_logo','tu_category_logo' );
function tu_category_logo( $logo ) {
	echo do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );
}

I can see the logo but I lose the logo link to the homepage. I suspect I might need to use the generate_logo_output filter but have no idea how I can incorporate a shortcode on the filter's syntax.

Another issue I have is that when adding the shortcode like the example above, the animated logo also appears over the top main menu which is very strange.

The generate_logo filter works fine if I add a static logo through a normal URL, it seems that the filter output was not designed for a shortcode though.

January 7, 2019 at 4:01 pm #775734

Hi there,

The generate_logo filter is only for a URL to an image file.

As you said, you'll need to use the generate_logo_output filter.

Try this:

add_filter( 'generate_logo_output', function() {
    $logo = do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );

    printf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                %3$s
            </a>
         </div>',
         esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
         esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
         $logo
    );
} );

January 7, 2019 at 5:34 pm #775793

That was perfect, it worked! Another thing, I want to do the same with the generate_navigation_logo_output filter but my code doesn't seem to work (outputs some HTML characters instead)

add_filter( 'generate_navigation_logo_output', function() {
    $logo = do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );

	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
				<img class="header-image" src="%1$s" alt="%2$s" />
		</div>',
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$logo
	);
} );

January 7, 2019 at 5:56 pm #775808

Try this:

add_filter( 'generate_navigation_logo_output', function() {
    $logo = do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );

	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
				%1$s
		</div>',
		$logo
	);
} );

January 8, 2019 at 4:34 am #776111

Yes, thank you, Tom, that also worked. I am trying to do the same with the mobile header, I got this code:

add_filter( 'generate_mobile_header_logo','lh_category_mobile_header_logo' );
function lh_category_mobile_header_logo( $logo ) {
	echo do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );
}

it displays the logo but the actual logo home link is shifted to the right of the logo and the site title is displayed. Is there a generate_mobile_header_logo_output filter I could use?

January 8, 2019 at 9:00 am #776468

You know it:

add_filter( 'generate_mobile_header_logo_output', function() {
    $logo = do_shortcode( '[bodymovin anim_id="837" loop="true" autoplay_viewport="true" autostop_viewport="true" width="350px" height="44px" align="left"]' );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                %3$s
            </a>
         </div>',
         esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
         esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
         $logo
    );
} );

January 8, 2019 at 2:50 pm #776675

I know it now(couldn't find it on the list of filters in the docs, check it out).

Thanks, Tom really appreciate it!

January 8, 2019 at 5:14 pm #776730

Glad I could help :)

Nice catch - we'll get that added!

This archived topic is closed to new replies.

Start building better websites today.