- This topic has 11 replies, 3 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
March 1, 2020 at 9:10 am #1181486Joezer
Hello,
I tried the code from here https://generatepress.com/forums/topic/random-rotate-header-logo-per-page-view/ but it is not working on my site. I put the code in elements > hook > Before_header_content but it doesn’t load.
<?php
$headers = array(
‘https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg’,
‘https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg’,
‘https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg’,);
$random = $headers[ rand( 0, count( $headers ) -1 ) ];
echo ‘‘;
?>
March 1, 2020 at 9:11 am #1181489Joezer<?php $headers = array( 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg', 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg', 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg', ); $random = $headers[ rand( 0, count( $headers ) -1 ) ]; echo '<img src="' . $random . '" alt="" />'; ?>
March 1, 2020 at 9:31 am #1181508LeoStaffCustomer SupportHi there,
Can you make sure Execute PHP is checked for the hook element?
Let me know π
March 1, 2020 at 4:09 pm #1181739JoezerHello,
Yes the PHP is checked. Is there other settings to be used in combination to this? Like creating another header element but with blank background?
March 1, 2020 at 4:29 pm #1181748JoezerBy the way, I am using the “use navigation as header”. I realize now that GP thread I linked to is for header logo. What I am trying to accomplish is for the hero image background to rotate π
March 2, 2020 at 12:11 am #1181905TomLead DeveloperLead Developerbefore_header_content
won’t work when using the Navigation as Header option.Where are you wanting it to display? Above the navigation?
Let me know π
March 2, 2020 at 1:20 am #1181943JoezerHello,
I want it to show up in the location of the mountain picture in this page: https://ukulele.ph/maroon-5/memories/ the background changes with each pageview
March 2, 2020 at 8:22 am #1182469TomLead DeveloperLead DeveloperHi there,
This should help: https://generatepress.com/forums/topic/random-background-images-on-pages/#post-1093883
However, you’d want to use
.page-hero
instead of.site-header
.March 2, 2020 at 8:48 am #1182499JoezerYep, it works. π
Last two questions:
May I know the best image width for this on bigger screen? So that it doesn’t repeat the image to fit?
With this code, is the site going to request all of the image on load? If I am rotating 10 images, every time a visitor views a page, it is gonna download all the 10 images and then select 1 to be shown at random? Or it just makes a single request to the one random image that is going to appear for that specific pageview?
How do I set the overlay for this in CSS? Because the header element specific for single posts are not working properly when I set the overlay. But the rest of the settings are working like padding, merge, text colors. Only the overlay option. Which I believe I will have to set manually in simple css.
Thanks for the help π
March 2, 2020 at 6:37 pm #1182898TomLead DeveloperLead DeveloperIt may actually be better to filter the standard page hero background image. That way it will cover the area for you, and you’ll be able to use the standard overlay settings.
1. Remove the code above
2. Set a background image in your Hero (just choose one of them)
3. Add this filter:add_filter( 'generate_page_hero_background_image_url', function( $url ) { $headers = array( 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg', 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg', 'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg', ); $url = $headers[ rand( 0, count( $headers ) -1 ) ]; return $url; } );
It will only load the one image chosen by the PHP π
March 7, 2020 at 12:08 pm #1188122JoezerThanks, Tom! It works flawlessly. π
March 7, 2020 at 6:38 pm #1188286TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.