Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1195600

    Hey! Is it possible with some magic trickery on functions.php or with some plugin to allow enfold to pick a random image from a list to use as background for a specific color section located in the home page? The image would be picked at each reload of the page, so when the page is loaded the color section should have every time a different background.

    If it isn’t possible it would be nice to have fullwidth slider or full screen slider to start from a random slide instead of starting always from slide numer 1. If that’s simpler to do…

    Thanks!

    #1196878

    Hey Leofiori,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Victoria

    #1196980

    Oh thanks, it’s not that urgent. I was just wondering if it was possible :)

    #1197097

    i did that here on the page : page-id-34024
    https://webers-testseite.de/bg-scheduling/
    the color-section has a bg-image ( this is not so important – but style the outlook with that image first ( contain; cover; repeat etc. pp)
    This color-section has a custom-class: bg-scheduled
    you see that the bg image is then taken from a source folder.
    But this is scheduled per day with a fixed image for each weekday – but you see how you can do it. Hope you can transfer this to a randomized order. – i will have a look too.

    function schedule_bg_image() {
    if(is_page(34024)){ 
    ?>
    <script type="text/javascript">
      var imglocation = "/wp-content/uploads/";
      function ImageArray (n) {
         this.length = n;
         for (var i =1; i <= n; i++) {
           this[i] = ' '
         }
      }	
    	image = new ImageArray(7);
    	image[0] = 'o2-7.jpg'; // Sunday
    	image[1] = 'o2-1.jpg'; // Monday
    	image[2] = 'o2-2.jpg'; // Tuesday
    	image[3] = 'o2-3.jpg'; // Wednesday
    	image[4] = 'o2-4.jpg'; // Thursday
    	image[5] = 'o2-5.jpg'; // Friday
    	image[6] = 'o2-6.jpg'; // Saturday
    	var currentdate = new Date();
    	var imagenumber = currentdate.getDay();
    	document.getElementById('av_section_1').style.backgroundImage = 'url(' + imglocation + image[imagenumber] + ')';
    	
    </script>
    <?php
    }
    }
    add_action( 'wp_footer', 'schedule_bg_image' );
    #1197118

    this is the same example-page:
    The color-section has got custom ID: randomized
    and has an image array for that

    // Random BG-Image
    function randomize_bg_image() {
    if(is_page(34024)){ 
    ?>
    <script type="text/javascript">
    (function($){
    	    var images = ['o2-7.jpg', 'o2-1.jpg', 'o2-2.jpg', 'o2-3.jpg', 'o2-4.jpg', 'o2-5.jpg', 'o2-6.jpg'];
    	    $('#randomized').css({
    	    	'background-image': 'url(/wp-content/uploads/' + images[Math.floor(Math.random() * images.length)] + ')'
    	    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_footer', 'randomize_bg_image' );
    #1197593

    Hi,

    Thanks a lot for sharing your work @guenni007, it’s much appreciated :-)

    Best regards,
    Rikard

    #1276271

    @guenni007: can you elaborate on this a bit further? I don’t get it working.
    I put the ‘Random BG-Image’ in functions.php (child theme).
    I added the class ‘randomized’ to the section.
    I uploaded the images to the folder.
    But I’m still seeing the image I selected in the Advanced Layout Builder on the page.

    • This reply was modified 3 years, 10 months ago by byallmeans.
    #1277235

    Hi,

    Thank you for the info.

    I added the class ‘randomized’ to the section.

    You have to use randomized as the ID of the section, not one of its class names. And make sure to adjust the name of the images to their actual names in the Media > Library.

    Best regards,
    Ismael

    #1322662

    Ive also tried this without success (randomised), was anyone able to get it working?

    #1322894

    Hi,

    Did you edit the color section and use “randomized” in the Advanced > Developer Settings > Custom ID Attribute field? You should also place the image file names in this line.

    var images = ['o2-7.jpg', 'o2-1.jpg', 'o2-2.jpg', 'o2-3.jpg', 'o2-4.jpg', 'o2-5.jpg', 'o2-6.jpg'];
    

    Best regards,
    Ismael

    #1426960

    @antdesign01, I am refreshing this thread because I am trying to do the same, following the suggestion of the great @Guenni007.
    I don’t know if you’ve been able to make it work at the end, I just wanted to highlight that you must also edit the following line:

    if(is_page(34024)){

    replacing 34024 with the ID of your page. To know the ID of your page, open it in the browser, view the source code and then look for “page-id” string. You will find the ID you must use.

    #1426962

    …and I am sorry to say that it is not working for me as well :-(

    Here is the code I’ve customized (the ID of my page is the one below, I’ve double checked it).

    function randomize_bg_image() {
    if(is_page(11318)){ 
    ?>
    <script type="text/javascript">
    (function($){
    	    var images = ['img(1).jpg','img(2).jpg','img(3).jpg','img(4).jpg','img(5).jpg','img(6).jpg','img(7).jpg','img(8).jpg'];
    	    $('#randomized').css({
    	    	'background-image': 'url(/wp-content/uploads/sfondimobile/' + images[Math.floor(Math.random() * images.length)] + ')'
    	    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_footer', 'randomize_bg_image' );

    Images are here:
    https://imgur.com/a/tu7Qy05
    let me highlight that I’ve copied the images DIRECTLY TO THE FTP SITE, I did not use the Media Library… can this be the reason?

    #randomized is correctly set:

    https://imgur.com/ELYntMF

    But when you open my website in mobile mode, the background is frozen to the original one:

    https://www.sentierigressoney.it


    @Guenni007
    , I hope you’ll find some time to give my some hints :)

    #1426963

    OK, I’ve found it.

    DO NOT USE PARENTHESIS IN YOUR FILE NAMES! :-)

    Great job @Guenni007, as usual!
    THX
    Bye,
    A.-

    #1427004

    oh wow – long time ago
    ps on that given example page there are both versions – on top : showing the bg-image of that weekday
    on bottom randomized.

    by the way: here it is for the seasons:

    function scheduling_per_season(){
    if(is_page(39621)){
    ?>
    <script>
      var currentTime = new Date();
      var month = currentTime.getMonth() + 1;
      var imglocation = "/wp-content/uploads/season-images/";  // put the images in this folder
    
    	switch(true) {
    		case (month >= 6 && month <= 8):
    			var seasonImg = "summer.jpg";
    			var season = "summer";
    			break;
    		case (month >= 9 && month <= 11):
    			var seasonImg = "fall.jpg";
    			var season = "fall";	  
    			break;
    		case (month == 12 || month == 1 || month == 2):
    			var seasonImg = "winter.jpg";
    			var season = "winter";
    			break;
    		default:
    			var seasonImg = "spring.jpg";
    			var season = "spring";
    	}
      	document.getElementById('changed_on_season').style.backgroundImage = 'url(' + imglocation + seasonImg + ')';
    	document.body.classList.add(season);
    	document.getElementById('changed_on_season').getElementsByClassName("av-special-heading-tag")[0].textContent = "It is "+season+""; 
    	
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'scheduling_per_season');

    see: https://webers-testseite.de/season-scheduling/

    #1427175

    Sure, I’ve used the one that changes it every time you open the page, exactly what I wanted. Thanks again!

    #1427178

    Hi,
    Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Random background image (possibly from a list) in color section’ is closed to new replies.