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

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

Home Forums Support Multiple BG Images/ Slider Concept/ Page Refresh. Possible?

  • This topic has 18 replies, 3 voices, and was last updated 1 week ago by David.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #2507003
    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!

    #2507129
    David
    Staff
    Customer Support

    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.

    #2508132
    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.

    #2508138
    Fernando
    Customer Support

    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

    #2508159
    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.

    #2508164
    Fernando
    Customer Support

    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/

    #2508200
    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.

    #2508217
    Fernando
    Customer Support

    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?

    #2508226
    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.

    #2508231
    Fernando
    Customer Support

    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.

    #2508242
    Benjamin

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

    #2508247
    Fernando
    Customer Support

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

    #2508250
    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.”

    #2508271
    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.

    #2508314
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.