Display a random background image each time the page is loaded

thenickdude · September 17, 2013

Hey everyone,

This customisation allows you to load a different background image on your site each time the page is loaded.

You can find the details here:

http://www.sherlockphotography.org/Customisations/Random-background-image

Here's an example page which uses that code:

http://www.sherlockphotography.org/Customisations/Random-background-image/Example

pilotdave · September 17, 2013

Looks great. But I take it there's no way to try it without unveiling, since it needs access to a new smug gallery?

I don't know how ugly the code gets, but any chance you could share a sample that could be modified manually?

Dave

mountaindew · September 17, 2013

Lamah wrote: »

Hey everyone,

This customisation allows you to load a different background image on your site each time the page is loaded.

You can find the details here:

http://www.sherlockphotography.org/Customisations/Random-background-image

Here's an example page which uses that code:

http://www.sherlockphotography.org/Customisations/Random-background-image/Example

Good one Nicholas ... Love to implement this . Do we have the tweak inside same CSS to provide the auto-random rather force refresh each time ?

thenickdude · September 17, 2013

pilotdave wrote: »

Looks great. But I take it there's no way to try it without unveiling, since it needs access to a new smug gallery?

I don't know how ugly the code gets, but any chance you could share a sample that could be modified manually?

Ah, gotcha. I've updated the generator now so you can just enter the number of photos you want to switch between instead of entering a gallery URL. It'll generate some empty code for you to fill in. e.g. for randomly switching between 5 images, the HTML is:

<div class="ss-random-background"></div>

And the CSS is:

.sm-page-widget-body[id$='a'] div,.sm-page-widget-body[id$='b'] div,.sm-page-widget-body[id$='c'] div,.sm-page-widget-body[id$='d'] div,.sm-page-widget-body[id$='e'] div,.sm-page-widget-body[id$='f'] div,.sm-page-widget-body[id$='g'] div,.sm-page-widget-body[id$='h'] div,.sm-page-widget-body[id$='i'] div,.sm-page-widget-body[id$='j'] div,.sm-page-widget-body[id$='k'] div,.sm-page-widget-body[id$='l'] div{
  background-image: url(image1);
}
.sm-page-widget-body[id$='m'] div,.sm-page-widget-body[id$='n'] div,.sm-page-widget-body[id$='o'] div,.sm-page-widget-body[id$='p'] div,.sm-page-widget-body[id$='q'] div,.sm-page-widget-body[id$='r'] div,.sm-page-widget-body[id$='s'] div,.sm-page-widget-body[id$='t'] div,.sm-page-widget-body[id$='u'] div,.sm-page-widget-body[id$='v'] div,.sm-page-widget-body[id$='w'] div,.sm-page-widget-body[id$='x'] div,.sm-page-widget-body[id$='y'] div{
  background-image: url(image2);
}
.sm-page-widget-body[id$='z'] div,.sm-page-widget-body[id$='A'] div,.sm-page-widget-body[id$='B'] div,.sm-page-widget-body[id$='C'] div,.sm-page-widget-body[id$='D'] div,.sm-page-widget-body[id$='E'] div,.sm-page-widget-body[id$='F'] div,.sm-page-widget-body[id$='G'] div,.sm-page-widget-body[id$='H'] div,.sm-page-widget-body[id$='I'] div,.sm-page-widget-body[id$='J'] div,.sm-page-widget-body[id$='K'] div{
  background-image: url(image3);
}
.sm-page-widget-body[id$='L'] div,.sm-page-widget-body[id$='M'] div,.sm-page-widget-body[id$='N'] div,.sm-page-widget-body[id$='O'] div,.sm-page-widget-body[id$='P'] div,.sm-page-widget-body[id$='Q'] div,.sm-page-widget-body[id$='R'] div,.sm-page-widget-body[id$='S'] div,.sm-page-widget-body[id$='T'] div,.sm-page-widget-body[id$='U'] div,.sm-page-widget-body[id$='V'] div,.sm-page-widget-body[id$='W'] div,.sm-page-widget-body[id$='X'] div{
  background-image: url(image4);
}
.sm-page-widget-body[id$='Y'] div,.sm-page-widget-body[id$='Z'] div,.sm-page-widget-body[id$='0'] div,.sm-page-widget-body[id$='1'] div,.sm-page-widget-body[id$='2'] div,.sm-page-widget-body[id$='3'] div,.sm-page-widget-body[id$='4'] div,.sm-page-widget-body[id$='5'] div,.sm-page-widget-body[id$='6'] div,.sm-page-widget-body[id$='7'] div,.sm-page-widget-body[id$='8'] div,.sm-page-widget-body[id$='9'] div{
  background-image: url(image5);
}

The code looks a lot less ugly if you turn off wordwrapping in the editor...

. Just fill in those urls where it says "image1" etc.

mountaindew wrote: »

Good one Nicholas ... Love to implement this . Do we have the tweak inside same CSS to provide the auto-random rather force refresh each time ?

You shouldn't need to force refresh, it should change on every simple page load.

mountaindew · September 18, 2013

Lamah wrote: »

Ah, gotcha. I've updated the generator now so you can just enter the number of photos you want to switch between instead of entering a gallery URL. It'll generate some empty code for you to fill in. e.g. for randomly switching between 5 images, the HTML is:

<div class="ss-random-background"></div>

And the CSS is:

.sm-page-widget-body[id$='a'] div,.sm-page-widget-body[id$='b'] div,.sm-page-widget-body[id$='c'] div,.sm-page-widget-body[id$='d'] div,.sm-page-widget-body[id$='e'] div,.sm-page-widget-body[id$='f'] div,.sm-page-widget-body[id$='g'] div,.sm-page-widget-body[id$='h'] div,.sm-page-widget-body[id$='i'] div,.sm-page-widget-body[id$='j'] div,.sm-page-widget-body[id$='k'] div,.sm-page-widget-body[id$='l'] div{
  background-image: url(image1);
}
.sm-page-widget-body[id$='m'] div,.sm-page-widget-body[id$='n'] div,.sm-page-widget-body[id$='o'] div,.sm-page-widget-body[id$='p'] div,.sm-page-widget-body[id$='q'] div,.sm-page-widget-body[id$='r'] div,.sm-page-widget-body[id$='s'] div,.sm-page-widget-body[id$='t'] div,.sm-page-widget-body[id$='u'] div,.sm-page-widget-body[id$='v'] div,.sm-page-widget-body[id$='w'] div,.sm-page-widget-body[id$='x'] div,.sm-page-widget-body[id$='y'] div{
  background-image: url(image2);
}
.sm-page-widget-body[id$='z'] div,.sm-page-widget-body[id$='A'] div,.sm-page-widget-body[id$='B'] div,.sm-page-widget-body[id$='C'] div,.sm-page-widget-body[id$='D'] div,.sm-page-widget-body[id$='E'] div,.sm-page-widget-body[id$='F'] div,.sm-page-widget-body[id$='G'] div,.sm-page-widget-body[id$='H'] div,.sm-page-widget-body[id$='I'] div,.sm-page-widget-body[id$='J'] div,.sm-page-widget-body[id$='K'] div{
  background-image: url(image3);
}
.sm-page-widget-body[id$='L'] div,.sm-page-widget-body[id$='M'] div,.sm-page-widget-body[id$='N'] div,.sm-page-widget-body[id$='O'] div,.sm-page-widget-body[id$='P'] div,.sm-page-widget-body[id$='Q'] div,.sm-page-widget-body[id$='R'] div,.sm-page-widget-body[id$='S'] div,.sm-page-widget-body[id$='T'] div,.sm-page-widget-body[id$='U'] div,.sm-page-widget-body[id$='V'] div,.sm-page-widget-body[id$='W'] div,.sm-page-widget-body[id$='X'] div{
  background-image: url(image4);
}
.sm-page-widget-body[id$='Y'] div,.sm-page-widget-body[id$='Z'] div,.sm-page-widget-body[id$='0'] div,.sm-page-widget-body[id$='1'] div,.sm-page-widget-body[id$='2'] div,.sm-page-widget-body[id$='3'] div,.sm-page-widget-body[id$='4'] div,.sm-page-widget-body[id$='5'] div,.sm-page-widget-body[id$='6'] div,.sm-page-widget-body[id$='7'] div,.sm-page-widget-body[id$='8'] div,.sm-page-widget-body[id$='9'] div{
  background-image: url(image5);
}

The code looks a lot less ugly if you turn off wordwrapping in the editor...

. Just fill in those urls where it says "image1" etc.

You shouldn't need to force refresh, it should change on every simple page load.

Sorry Lamah , by force refresh I mean auto load of the page . I would like this to be as like random slideshow image display but not as slideshow .

brandofamily · September 21, 2013

Lamah wrote: »

Hey everyone,

This customisation allows you to load a different background image on your site each time the page is loaded.

You can find the details here:

http://www.sherlockphotography.org/Customisations/Random-background-image

Here's an example page which uses that code:

http://www.sherlockphotography.org/Customisations/Random-background-image/Example

Any chance you can modify this to pluck images from my popular photo list and use it on a thumbs list on my home page?
www.brandolinoimaging.com
I have a short list on the left right now but it's static and gets old quick.

thenickdude · September 21, 2013

It is possible to pick photos like that, assuming that you can get them into a gallery to pick from (or are willing to manually write down the image URLs of those pictures), but the generator would have to be modified a bit to really make it practical.

You can add this custom CSS as a block on your page instead of adding the CSS to your theme as the instructions say:

.ss-random-background {
	background-position: center center;
	background-size: cover;
	padding-bottom:100%;
	border-radius:15px;
}

Now add 5 HTML content blocks to the page, each using the HTML and CSS that the generator creates for you. You can use the Dimensions settings for the blocks to set their width. The result looks something like this:

http://www.sherlockphotography.org/Test/n-C9s7M

There are some caveats here:

- The thumbs aren't clickable
- The generator always chooses the largest available image, which will be way too large. You might want to find-and-replace X3,X2,XL, etc with S in the URLs for the images.
- The SmugMug page editor doesn't allow you to put multiple HTML content blocks into one column, and be able to add a block to the right of that entire column (it will force the right content block and the first thumbnail to be on the same row, with the same height).

These issues could be solved by me adding substantial features to the generator, but I'm working on other things at the moment.

A service which provided an RSS feed for the Feeds block would be much simpler, and much faster to load.

brandofamily · September 21, 2013

Lamah wrote: »
It is possible to pick photos like that, assuming that you can get them into a gallery to pick from (or are willing to manually write down the image URLs of those pictures), but the generator would have to be modified a bit to really make it practical.

You can add this custom CSS as a block on your page instead of adding the CSS to your theme as the instructions say:
.ss-random-background {
    background-position: center center;
    background-size: cover;
    padding-bottom:100%;
    border-radius:15px;
}
Now add 5 HTML content blocks to the page, each using the HTML and CSS that the generator creates for you. You can use the Dimensions settings for the blocks to set their width. The result looks something like this:

http://www.sherlockphotography.org/Test/n-C9s7M

There are some caveats here:

- The thumbs aren't clickable
- The generator always chooses the largest available image, which will be way too large. You might want to find-and-replace X3,X2,XL, etc with S in the URLs for the images.
- The SmugMug page editor doesn't allow you to put multiple HTML content blocks into one column, and be able to add a block to the right of that entire column (it will force the right content block and the first thumbnail to be on the same row, with the same height).

These issues could be solved by me adding substantial features to the generator, but I'm working on other things at the moment.

A service which provided an RSS feed for the Feeds block would be much simpler, and much faster to load.

Thanks for the reply. Nice outcome on the page... How do you achieve the centering of those images? I have found no other way than to add a blank/ empty div content box to the left to push the images over until centered.

brandofamily · September 21, 2013

tried generating code using

http://www.brandolinoimaging.smugmug.com/Image-Galleries/My-Portfolio/Views-Choice/Viewers-Choice

I got an oops message

thenickdude · September 21, 2013

Is that a gallery, or just a page? The generator only knows how to find photos in galleries.

The images are probably centred because my page is set to fixed-width.

brandofamily · September 21, 2013

Lamah wrote: »

Is that a gallery, or just a page? The generator only knows how to find photos in galleries.

The images are probably centred because my page is set to fixed-width.

oh, its a page with a popular image block... gotcha... I'll need to use the real popular image gallery

brandofamily · September 21, 2013

Nope it does not like

http://www.brandolinoimaging.smugmug.com/popular/

either

thenickdude · September 21, 2013

That's not a gallery either, it's a system page, sorry.

brandofamily · September 21, 2013

Lamah wrote: »

That's not a gallery either, it's a system page, sorry.

Oh beans...

I can see how to simply stack 5 or 6 divs in the html, but the current code generated the same pic for each div. Is there an "easy" way to get each div within the same html box to generate a different pic?

I figure if I changed the div name in the css code it would do it, but I wanted to ask 1st as the gallery has 400+ pics

That's a lot o code!!!

TheBradford · September 21, 2013

Ok having a problem but not sure what to do or change and my page isn't live. I have put the proper code in and everything but when it goes to load instead it puts a chunk of a photo as backgrond to my top logo and then another behind the menu bar but no actual background photo. Not sure what's happening or if I am putting the code in the wrong place or something.

My hang up for going live is the lack of client login so I guess i have a catch 22 at the moment with my problem unless someone else has had this problem and can suggest a solution without actually being able to see my page since it's still in sandbox mode lol.

thenickdude · September 21, 2013

Did you add the CSS to the HTML block on the page, or did you accidentally add it to your theme's CSS instead?

Have you seen the client login system customisation on my site?

TheBradford · September 27, 2013

I may have added it to the theme. So do I create a CSS block on the homepage add that stuff, then another one and add the HTML or do I put it all in one box. Little confused there.

But yes I put the gallery generated stuff and that HTML in the theme's CSS. I think i put the other stuff in a css box on homepage.

Please advise.

thenickdude · September 27, 2013

It all goes into one HTML block (using both the HTML and CSS tabs of the settings for that block).

TheBradford · September 28, 2013

Ok I put the HTML block in "Center" in the Homepage part of sandbox. the image does not show up in the background however, jsut inside that little box still. What am i still doing wrong?

TheBradford · September 28, 2013

oh wait - refresh'd it's good! Except it in the sandbox I still see the custom photo I put for the theme photo when I am in sandbox with the above still occuring. When I preview it however the generated images show except it loads like "on top" of the custome theme photo i had rather than loading INSTEAD of that photo (if that makes sense). When I go live (if I ever go live as I am still waiting on the client login change to happen) - will I have to be concerned by this? Am I still doing something wrong or is this as good as it gets?

leftquark · October 8, 2013

Lamah,
I'm not sure if you've already fixed this bug or not but I thought I'd mention it.

I implemented the random background (although since removed it) to have it load a different background every time any one of my pages is loaded. I added a HTML block to the "Entire Site" with the HTML/CSS. It's been a couple weeks since I did this so I can't remember the instructions (and I can't get to your site while at work) ... I think I also had to add a smidge of CSS to my theme's CSS (advanced settings)?

When I visited a page that extended beyond the height of the screen and required scrolling, it would cause a number of issues. In collage layouts, some of the images got moved all over. In SmugMug layout, if the caption was long, you would not be able to click on the text (to highlight it) or click on any links. You had to scroll back up to the top of the page to be able to select text and click on links. I had to remove the code because of it.

If you'd like I can throw together a sample test gallery and see if the bug still exists.

Mike Lane · December 10, 2013

And the CSS is:

.sm-page-widget-body[id$='a'] div,.sm-page-widget-body[id$='b'] div,.sm-page-widget-body[id$='c'] div,.sm-page-widget-body[id$='d'] div,.sm-page-widget-body[id$='e'] div,.sm-page-widget-body[id$='f'] div,.sm-page-widget-body[id$='g'] div,.sm-page-widget-body[id$='h'] div,.sm-page-widget-body[id$='i'] div,.sm-page-widget-body[id$='j'] div,.sm-page-widget-body[id$='k'] div,.sm-page-widget-body[id$='l'] div{
  background-image: url(image1);
}
.sm-page-widget-body[id$='m'] div,.sm-page-widget-body[id$='n'] div,.sm-page-widget-body[id$='o'] div,.sm-page-widget-body[id$='p'] div,.sm-page-widget-body[id$='q'] div,.sm-page-widget-body[id$='r'] div,.sm-page-widget-body[id$='s'] div,.sm-page-widget-body[id$='t'] div,.sm-page-widget-body[id$='u'] div,.sm-page-widget-body[id$='v'] div,.sm-page-widget-body[id$='w'] div,.sm-page-widget-body[id$='x'] div,.sm-page-widget-body[id$='y'] div{
  background-image: url(image2);
}
.sm-page-widget-body[id$='z'] div,.sm-page-widget-body[id$='A'] div,.sm-page-widget-body[id$='B'] div,.sm-page-widget-body[id$='C'] div,.sm-page-widget-body[id$='D'] div,.sm-page-widget-body[id$='E'] div,.sm-page-widget-body[id$='F'] div,.sm-page-widget-body[id$='G'] div,.sm-page-widget-body[id$='H'] div,.sm-page-widget-body[id$='I'] div,.sm-page-widget-body[id$='J'] div,.sm-page-widget-body[id$='K'] div{
  background-image: url(image3);
}
.sm-page-widget-body[id$='L'] div,.sm-page-widget-body[id$='M'] div,.sm-page-widget-body[id$='N'] div,.sm-page-widget-body[id$='O'] div,.sm-page-widget-body[id$='P'] div,.sm-page-widget-body[id$='Q'] div,.sm-page-widget-body[id$='R'] div,.sm-page-widget-body[id$='S'] div,.sm-page-widget-body[id$='T'] div,.sm-page-widget-body[id$='U'] div,.sm-page-widget-body[id$='V'] div,.sm-page-widget-body[id$='W'] div,.sm-page-widget-body[id$='X'] div{
  background-image: url(image4);
}
.sm-page-widget-body[id$='Y'] div,.sm-page-widget-body[id$='Z'] div,.sm-page-widget-body[id$='0'] div,.sm-page-widget-body[id$='1'] div,.sm-page-widget-body[id$='2'] div,.sm-page-widget-body[id$='3'] div,.sm-page-widget-body[id$='4'] div,.sm-page-widget-body[id$='5'] div,.sm-page-widget-body[id$='6'] div,.sm-page-widget-body[id$='7'] div,.sm-page-widget-body[id$='8'] div,.sm-page-widget-body[id$='9'] div{
  background-image: url(image5);
}

Look how clever this is. Just to make sure I actually get it, what you're doing here is hooking into the class .sm-page-widget-body which has an id of sm-page-widget-<random alphanumeric string>. Then via use of the CSS3 $ selector you're saying, hey, if the first character of the string in the id is a through l, display image1, if it is m through y, display image2, if it is z through K, image 3, and so on for all 62 available characters. You could, therefore, have 62 unique images using this method. I suppose if you used the first and second characters from aa to 00 you could have 62^2 = 3844 unique images (though the css would get a bit unruly!).

Am I understanding that properly? If I've got it wrong, then I may be misunderstanding how the [id$=*] selector works. Is it the case that this selector is looking only at the first character of the random string? (Also, I'm only assuming that this 8 character string actually is randomly generated by SM upon each page load. Is that the case?)

thenickdude · December 10, 2013

$= looks at the last character of the string, but apart from that you're spot-on. The generator will do that 3844 image case for you, but the CSS is pretty large. It compresses extremely well, so the download time is short, but I imagine the memory usage is a bit unruly due to the number of rules involved.

SM does indeed generate that ID randomly on every pageload. I think this is their way of ending up with a unique ID to later refer to elements they've added to the page, without having to have all their code co-ordinate on one central counter which would be required to generate IDs sequentially.

Mike Lane · December 10, 2013

Lamah wrote: »

$= looks at the last character of the string, but apart from that you're spot-on. The generator will do that 3844 image case for you, but the CSS is pretty large. It compresses extremely well, so the download time is short, but I imagine the memory usage is a bit unruly due to the number of rules involved.

SM does indeed generate that ID randomly on every pageload. I think this is their way of ending up with a unique ID to later refer to elements they've added to the page, without having to have all their code co-ordinate on one central counter which would be required to generate IDs sequentially.

Brilliant. I need to investigate that selector more, it seems. Would id$=ab look at the last two characters of that unique id string and display the image if it ended in "ab"?

EDIT: From W3C: "The [attribute$=value] selector matches every element whose attribute value ends with a specified value." Reading, it's FUNdamental.

Jtring · December 10, 2013

Lamah,

Let me add to chorus. I've had your background randomizer up on my site since late October. I remember looking at the code when I got it and realizing, "I'm looking at a truly amazing example of lateral thinking." I didn't write to thank you at the time. I do now.

Jim Ringland
jtringl.smugmug.com

thenickdude · December 10, 2013

Thanks guys! I love SmugMug because it's part excellent photo host, part interesting software development puzzle like this one here, and part blackbox security exercise. It's worth the SM subscription fee simply for the amount of HTML, CSS and JS development I've learned while messing with SM, it has upped my game in my day-job significantly.

Jtring · December 11, 2013

By the way, I adjusted the home page CSS to load X3's rather than O's. X3's can load considerably faster on those days when the web or SM's server or whatever is being slow. Probably some friendlier caching behavior at work too. Doing so takes advantage of SM's rather nice sharpening adjustment between my large O's (up to 4000 x 3000) and the smaller X3's (no more than 1600 x 1200). Quality seems comparable to using the O's on my 1920 x 1200 monitor even though there can be a bit of up-sampling at the last step.

Jim Ringland
jtringl.smugmug.com

Display a random background image each time the page is loaded

Comments