[Resolved] Variable random background image Page Headers

[Paco Chorobo]

Good morning!

After searching in the forum I didn’t find a clear clue on how to perform this idea. My goal is to be able to change the background images in my home page http://www.chorobo.com everytime the page is visited. Right now I am using full-screen images by using Page Headers. I would like to know if there is a not very complicated way of making this “featured image” kind of random among a series of images? Or might be another way of working this around.

It will be great each time a visitor enters the website, he or she sees a different background. Any input or help will be really appreciated. Thanks for your great support and excellent work as always.

Thanks in advance and best regards from Spain,
Paco

[David]

Hi there,

this topic may help

https://generatepress.com/forums/topic/how-to-show-a-random-page-header/#post-578824

[Paco Chorobo]

Hi David!

Thanks a lot for your response. Sorry for the late answer but I was testing a lot and trying different things to avoid disturbing you as much as possible. Unfortunately all I can get is a random static image “stuck” over the page, and that looks really ugly.

I used next code as hook, but no way. Is there any way to replace only the page header background url, keeping it fullscreen and same looking as I have now in http://www.chorobo.com?

Help would be really appreciated!

<?php
$headers = array(
‘URL to logo 1’,
‘URL to logo 2’,
‘URL to logo 3’,
‘URL to logo 4’,
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];

echo ‘‘;
?>

[David]

I have asked Tom to see if there is a simpler way just to switch the header element background

[Paco Chorobo]

Thank you David,

Let see if we are lucky and we can find an easy way for noobs like me 🙂

Thanks guys, best regards.
Paco

[Tom]

The code David linked to is probably the best method. What about it didn’t work exactly?

[Paco Chorobo]

Hi Tom,

Thanks for your input. Really appreciatted. My issue is that the code I use in GP Hooks doesn’t change the “background image” (the featured image that I can select in the editor of page headers). Instead it pastes the new IMG over the entire header. I left the hook active so you can see the effect it when visiting http://www.chorobo.com . Sorry for disturbing with topic, but having random images in the page header featured image would be a blast, and a great experience visually for the customers.

I still hope we can find a way to implement this. Really thankful for your help in advance. Any ideas I can try?

Best regards from Spain,
Paco

[Tom]

This code: https://generatepress.com/forums/topic/how-to-show-a-random-page-header/#post-578824

Should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

Then you need to update these IDs with the IDs of your images:

$ids = array(
    '10',
    '12',
    '200'
);

[Paco Chorobo]

Hola Tom!

Thanks a lot for your reply and great support. I tried your suggested method and although it is not working I think we are almost there:

My first concert is the line: if ( is_page( ‘your-page’ ) ) {

Should I change the value ‘your-page’ for something else? Y tried using the name of my home page with no result.

Secondly, if I use this array, I get an empty page header with a weird symbol instead: ‘; ?>

$ids = array(
‘https://chorobo.com/wp-content/uploads/2018/11/Paco-Chorobo-Tributo-Reyes-Corona.jpg&#8217;,
‘https://chorobo.com/wp-content/uploads/2018/11/Paco-Chorobo-Nyx-Pala-Trasera.jpg&#8217;,
);

If I understand correctly, the code by user Wieswies is intended to switch randomly in between page headers, right?

I digged as far as I could into the page code and I found a line with .generate-content-header with item URL value that contains the actual link to the picture I would like to randomize.

Any clue on how to randomize that URL, only the background image of the header would be really appreciated. Thanks for your support. Gracias!!

Paco

[Tom]

Should I change the value ‘your-page’ for something else? Y tried using the name of my home page with no result.

That’s right, you’ll need to update that with the slug of your page. If it’s your home page, you can do this instead:

if ( is_front_page() ) {

Instead of adding the URL to the background image, you need to add the IDs of the images themselves, like this:

$ids = array(
    '10',
    '12',
    '200',
);

You can see the ID in the URL when you open the image inside the Media Library: https://www.screencast.com/t/P5pdSz5pRnM

[Paco Chorobo]

Good night Tom,

Thanks again. I totally missed the pictures ID. Thanks for the tip. No the weird character has disappeared so we are a little bit closer to solving the puzzle. Yikes!

Now we have two different behaviours:

A) If I use pictures ID’s in the array, nothing happens and no page-header is shown at all

B) If I use Page Headers ID’s, then the content and the background images are completely random. Sometimes the background of Spanish page header is shown with text of Russian page header, just an example… it is really cool though. What I would like to achieve is keep the same page header (they have content based of the language), but just use a random background (the featured image).

The first line: add_filter( ‘generate_page_header_id’, ‘tu_random_page_header’ ); Shouldn’t be something related with background-image-url or something similar? Sorry for my ignorance and low skills and forgive me if I am making silly questions. 😀

My snippet is looking like this right now. Any suggestion to keep on going?

add_filter( ‘generate_page_header_id’, ‘tu_random_page_header’ );
function tu_random_page_header( $id ) {
if ( is_front_page() ) {
// Your list of page header IDs.
$ids = array(‘3460′,’3584’);
$id = array_rand( $ids, 1 );
}

// Return random selected element of the array
return $ids[$id];
}

[Tom]

Ah, you’re totally right. I should have looked at the function more.

Let’s try this instead:

add_filter( 'generate_page_header_options', function( $options ) {
    if ( is_front_page() ) {
        $ids = array(
            '10',
            '12',
            '200'
        );

        $id = array_rand( $ids, 1 );

        $options['image_id'] = $id;
    }

    return $options;
} );

Let me know if that gets us closer. Sorry for the confusion!

[Paco Chorobo]

Please no worries at all. With so many clumsy people like me asking…

Well, we are indeed closer to the final solution. Thanks for your code. Now something is going on in the background, the content of the page header is kept for every language, but now no background at all appears, but a gray background color.

Maybe after this line $options[‘image_id’] = $id; needs a refresh the background command or something? Is the priority of the snippet something to consider? Just for trying, I used also picture’s urls with no positive result. Did I make any mistake?

My snippet is looking like this:

add_filter( ‘generate_page_header_options’, function( $options ) {
if ( is_front_page() ) {
$ids = array(
‘5154’,
‘5155’,
‘5134’,
‘5157’
);

$id = array_rand( $ids, 1 );

$options[‘image_id’] = $id;
}

return $options;
} );

[Tom]

After this:

$id = array_rand( $ids, 1 );

Can you add this?:

var_dump($id);

Then, is there an ID output on the front end of your website? You can remove that line once we know what it outputs.

[Paco Chorobo]

Sure! I did it. I got this output:

int(3) int(3) int(0) int(1) int(3) int(4) int(0) int(4) Saltar al contenidoint(2) int(1) int(1) int(1)
int(1)

Any meaning?

I left the code in the website so you can see it if you visit the home page.

[Author]

Posts