- This topic has 5 replies, 2 voices, and was last updated 1 year, 11 months ago by David.
-
AuthorPosts
-
April 27, 2022 at 11:46 am #2202059Eric
Hi, On a site homepage (Front Page) I created a random image display using GP hook (“generate_inside_site_container”) to run a javascript function to display one of 10 images whenever the Front Page loads or is refreshed. This is working. I would like to overlay images in the container with HTML href links to other site pages. I know it can be done using Page Hero and a static image, but is it possible to configure if images are randomly displayed using javascript?
April 27, 2022 at 12:30 pm #2202088DavidStaffCustomer SupportHi there,
could I see the site ? Might help with my better understanding of the requirements.
April 27, 2022 at 1:38 pm #2202140EricThe site’s in development behind a firewall, so I can’t send a link, but here’s a link to a different site with a similar homepage design. You’ll see the hero image on the homepage and a blue background textbox with text links on top of the images. The site in development will have text/links in the blue textbox, but the text will not change when the images below it change when first loading or refreshing homepage. Hope this helps convey the design idea: https://cdlib.org/
April 27, 2022 at 2:12 pm #2202155DavidStaffCustomer SupportSo what if the images were loaded as a Background to a container?
And that way you could add your other HTML/Links inside that container.If that’s an option then you could even replace the JS with a server side function – here’s an example:
https://generatepress.com/forums/topic/random-featured-image-on-home-page/#post-1827999
we could convert that to output some CSS for the backgound-image instead of a
<img>
element.Let me know
April 27, 2022 at 4:35 pm #2202246EricSo add the image array/code snippet to functions.php for container placement and create HTML/links as an element to overlay images in the same container?
April 28, 2022 at 2:23 am #2202545DavidStaffCustomer SupportYeah so i would probably approach it like so:
add_action( 'wp_head', function() { if ( is_front_page() ) { $headers = array( 'http://gpgb.local/wp-content/uploads/2022/04/c9b83777-bf43-36ea-90d2-d9d326ec8422.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/e22bc337-0650-31d7-820a-9500579657eb.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/bb37db28-37a7-3e84-90b6-b3f68672ead4.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/a8dc1070-7019-3769-ba08-d69f91c93ef3.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/56b44bd5-5909-3298-a842-cd34809de7ee.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/2b7a0e6a-ed73-3168-89e4-c66e1352f2a6.jpg', 'http://gpgb.local/wp-content/uploads/2022/04/fbca739e-0462-3691-a9bf-efd22c31067e.jpg' ); $url = $headers[ rand( 0, count( $headers ) -1 ) ]; printf( '<style>:root {--hero-bg: url(%1$s);}</style>', $url ); } } );
Where we load our
$url
with a random index from our$headers
array.
Which we then print to a root variable named:--hero-bg
in an inline style like so:<style>:root {--hero-bg: url(http://gpgb.local/wp-content/uploads/2022/04/fbca739e-0462-3691-a9bf-efd22c31067e.jpg);}</style>
And we can use that variable like this:
.our-container-element { background-image: var(--hero-bg); }
-
AuthorPosts
- You must be logged in to reply to this topic.