- This topic has 7 replies, 2 voices, and was last updated 5 years, 3 months ago by Tom.
-
AuthorPosts
-
January 7, 2019 at 10:59 am #775556George
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 #775734TomLead DeveloperLead DeveloperHi 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 #775793GeorgeThat 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 #775808TomLead DeveloperLead DeveloperTry 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 #776111GeorgeYes, 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 #776468TomLead DeveloperLead DeveloperYou 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 #776675GeorgeI 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 #776730TomLead DeveloperLead DeveloperGlad I could help 🙂
Nice catch – we’ll get that added!
-
AuthorPosts
- You must be logged in to reply to this topic.