attaching javascript to blog excerpt and post

[eric]

Hi,

My goal is to have a blog page that includes a series blog posts, each with an animated SVG featured imaged controlled via javascript along with a summary of the blog post. I’m hoping this same javascript file would animate the banner when someone clicks on the article. My ideal solution would be an Advanced Custom Field that links to a small script file that is pulled up by both the blog page and the post page.

I have tried manually adding a script the page as an HTML block via gutenberg but the summary does not include this code on the posts page. Additionally, this script doesn’t seem to inherit the jquery and greensock libraries I’m using in other codes.

Would welcome any insight into this challenge. Thank you in advance.

[David]

Hi there,

not sure if this will work for you – but the SVG Support plugin adds the option to add SVG featured images – with some tinkering its also possible to inline the SVG.

https://en-gb.wordpress.org/plugins/svg-support/

May be something you can build off of.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eric]

Hi David,

I’m already using SVG support. You’re correct… this will effectively turn my embedded SVGS into inline. However, my issue involves the use of the script that manipulates the SVG. Do you have any insight into attaching a script to a blog post in the manner I described above? Thanks very much.

[David]

Not sure if this will work – ACF has the get_field() function and you could use the GP Hook Element to add this to the blog and single posts. This could be used to pull the script in after the content has loaded.

Visual Hook guide:
https://docs.generatepress.com/article/hooks-visual-guide/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[eric]

That is a simple and elegant solution. Works perfectly. Thanks very much.

[David]

Awesome _ glad to hear that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts