[Resolved] Multiple BG Images/ Slider Concept/ Page Refresh. Possible?

[Benjamin]

Hi, I have two images that I would like to display in the header section on my home page.

I am wondering if there is a way to create a slider concept with GP press/ Generateblocks where it transitions between two images or displays a different image whenever someone loads or refreshes the page. I own premium for both GP and GB.

It would be ideal to achieve this without adding another plugin. Otherwise, if not possible, I’ll use only one of the images then.

Thanks!

[David]

Hi there,

it can be done with some code, see here for an example:

https://generatepress.com/forums/topic/elements-page-hero-typeheader-random-imagery-possible/#post-2294222

If you can share a link to where you want to add this, i can take a look at what that code needs to change to.

[Benjamin]

Thanks, the page is attached in the sensitive information section.

Just a question about the code you shared- how heavy is it? As in will it significantly affect page speed or not really? Also, I guess I’ll have to add a plugin to add the PHP code?

Thanks.

[Fernando]

Hi Benjamin,

That code should be relatively light. It shouldn’t noticeably affect your site’s speed.

You can use a plugin or the Child Theme to add this code.

See here for reference: https://docs.generatepress.com/article/adding-php/#code-snippets

[Benjamin]

Hi, thanks, I’m sorry, but I’m a bit confused about what to do with that code.

Could you explain it?

So I know I should add it to the code snippets plugin but then what? I also think that code is for a hook element. My page is just built using a container on the home page itself. Thanks. (It should be a problem just to move it to a hook element and then just set it to display on the homepage).

Thanks.

[Fernando]

Actually, you’re right. Thank you for pointing that out. You can use a Hook Element for that, not Code Snippets. Reference: https://docs.generatepress.com/article/hooks-element-overview/

Set the hook of the Hook Element to wp_head.

Then just replace the links in the code – eg. http://yourwebsite.com/URL/TO/header1.jpg – with your Image URLs.

To make it work, You can create a Block Element – Page Hero, then in the Parent Container Block add this class – page-hero.

Example: https://share.getcloudapp.com/nOu175Ol

Reference: https://docs.generatepress.com/article/block-element-page-hero/

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Benjamin]

Alright, thanks, it’s working.

I’m wondering now, is there a way to set image opacity with a background color? Maybe CSS?

Also, would it be possible to position the images? When I use just the container block, I can move them around using some commands, but not sure if that’s possible here.

[Fernando]

Hi Benjamin,

There’s an Opacity and Image Position setting in the Container Block settings. Reference: https://docs.generateblocks.com/article/container-overview/#backgrounds

It should be possible there. Can you try that first?

[Benjamin]

Thanks, I checked,

I am aware of that, but I’m just not sure how to access that since typically, to use that, you first add a background image in the container, and then you can set it, but here the images are being added by the PHP code, so I’m not sure how to do that.

I tried using the GB effects to add opacity to the background image but that doesn’t seem to work.

[Fernando]

Can you try adding any Background image to test?

Theoretically, the code should override the one in the setting. If it doesn’t, we just need to alter it a bit.

Let us know how it goes.

[Benjamin]

Yep did that, the code doesn’t override it.

[Fernando]

What Selector did you choose in the Backgrounds setting? Is it Pseudo Element? If so, try setting it to Element.

[Benjamin]

Okay, it fixed the double image error, but now we have this problem. XD

“Your selector must be set to Pseudo Element to use opacity.”

[Benjamin]

I want to add, I checked the advanced settings on GBP, and it looks like you can add multiple background images in a container block. Not sure if there is a way to utilize this to switch between images or to work with the code.

Might be an easier and cleaner solution.

Thanks.

[David]

The Advanced Backgrounds can add many images but for various device sizes or states. It won’t work in this scenario.
To move random image to the pseudo element, in my code see the styles:

<style>
	.page-hero{background-image:url('<?php echo $random; ?>');}
</style>

Change that to:

<style>
	.page-hero:before{background-image:url('<?php echo $random; ?>') !important;}
</style>

Then in the editor add a background image and set the selector to Pseudo Element.
And make the modifications you require.

[Author]

Posts