BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Random background image on refresh
  FAQ FAQ  Forum Search   Register Register  Login Login

Random background image on refresh

 Post Reply Post Reply
Author
Message
LP- View Drop Down
Newbie
Newbie


Joined: Oct 30 2014
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote LP- Quote  Post ReplyReply Direct Link To This Post Topic: Random background image on refresh
    Posted: Nov 24 2014 at 1:16pm
Hi,

I would like to have the background image change on page load/refresh. I'm using the responsive template. I found the following examples (in javascript and php) but have no idea where to start to implement them in openelement and specifically the responsive template:
http://stackoverflow.com/questions/15231812/random-background-images-css3

Do I have to edit the custom classes in the CSS expert features ? Or should it be added as a "code block-visual" ?
It would be cool to have this in openElement as a drag&drop media element

Thanks!
LP
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 24 2014 at 1:43pm
Hi.

The advantage of PHP is that it gives one specific image, randomly selected BEFORE the page starts to be loaded by a browser; this largely reduces loading time and/or avoids the image disappearing while JS/jQuery changes it.

So let's use the PHP approach.

0) First, open the project folder (menu Project->Other->Open the project folder) and create a subfolder MyImages in the Files/Other; "Other" is a special folder which gets completely uploaded by OE on the website publication, so it's more convenient.

1) Change the page type to PHP: menu Page->Server scripts->PHP. From now on it has the ".php" extention.

2) Type something in the Property Custom Classes for each element you want the background to be random, e.g. bgrandom01, bgrandom02 etc. for each element. No need for the page background.

3) Add the element Code Block (Source) type HTML (!) position Header. It will contain a combination of PHP and CSS. (You can either drag-drom the element, or click the button Source at the bottom-left and then add right inside the source code).

4) For each random background, enter the code like below (this will just affect the background image, leaving other Style settings like repetition or sizing):


<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg'); // images to choose from
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>

<style
type="text/css"> .bgrandom01{ background-image: url('Files/Other/MyImages/<?php echo $selectedBg; ?>'); } </style>


I had to edit the code in the link a bit, it seemed to be buggy.

You can copy-paste this code and each time replace .bgrandom01 by .name-of-your-custom-class, or by body (without the dot!) if it's the page background. You should of course rename images (either in the code or the file names), now the code assumes names like 
bg-01.jpg

This should be enough. If it does not work, please try to publish the site somewhere and give the link to verify errors.

Good day
D



Edited by Dmit OE - Nov 24 2014 at 1:46pm
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 24 2014 at 1:45pm
P.S. I've made a mistake on the Code Block type, it should be HTML (to not add any tags like <style>). I've edited the answer.
Back to Top
LP- View Drop Down
Newbie
Newbie


Joined: Oct 30 2014
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote LP- Quote  Post ReplyReply Direct Link To This Post Posted: Nov 24 2014 at 4:34pm

It works great! Thank you very much.

It took me a while to figure out that custom classes defined in the expert properties are separated by a space. In the responsive template there's "responsiveSection textShadowIE" and I just needed to add your custom class like this: "responsiveSection textShadowIE bgrandom01"
Inserting a new frame with only bgrandom01 would lose the cool resize features of the responsive template (it would look bad in a mobile phone browser).

Many thanks!

LP
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 24 2014 at 9:12pm
It's like in HTML ("class" attribute of a tag), one separates classes by spaces.
Back to Top
vaynenick View Drop Down
Newbie
Newbie


Joined: Feb 26 2015
Location: Duabi
Status: Offline
Points: 1
Post Options Post Options   Thanks (0) Thanks(0)   Quote vaynenick Quote  Post ReplyReply Direct Link To This Post Posted: Feb 26 2015 at 7:08am
More about....CSS Background Image
 
Vayne
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.047 seconds.