How do I put a rotating banner in my header?

Question

I want my gallery to have a multiple images in it's header chosen at random from some larger set. How do I accomplish this?

Answer 1

You can use SmugMug's random.mg feature to achieve this.

Choose a gallery that the random photos will be picked from (i.e. an existing gallery, or create a new gallery by uploading photos or by using the Smart Gallery feature to pull photos from other galleries).

When you're viewing this gallery, the address in your browser's address bar will look something like:

http://www.sherlockphotography.org/Animals/Insects/11199703_VVcTJf#!i=1614076338&k=wtTT3JR

The portion before the # mark, but after the final / character is the gallery's ID and key. In this URL, that's the "11199703_VVcTJf" portion, the first part of which is the gallery ID (11199703) and the second part is the gallery key (VVcTJf).

Now put the gallery ID and gallery key you found into this URL:

http://<your domain name>/photos/random.mg?AlbumID=<album id>&AlbumKey=<album key>&Size=M

So for my gallery, the URL becomes:

http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=M

You can change the size in the "Size=M" part to any one of X3, X2, XL, L, M, S, Th, or Ti to change the size of the image that will be displayed, or get a custom size with a width W and height H with Size=WxH, e.g. Size=300x200.

Now you can put that URL into an <img> tag in order to display the random image:

<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th">

The result: (refresh the page to fetch a new random photo)

Now, if you want to display three such random thumbnails side-by-side it gets a little trickier. If the random thumbnails all come from the same gallery, it's possible that two of the random thumbs end up displaying the same photo at the same time by chance, which will look funny. I recommend choosing three different galleries to pick random photos from, with a different set of photos in each so that there is no overlap. Then you can just create a random.mg URL for each of the three source galleries.

If you don't mind seeing duplicate thumbnails, and definitely want the random images to be loaded from one single source gallery, you still need to modify the random.mg URLs in order to prevent the web browser from assuming that each random.mg is the same image. For example, this code which just repeats the same <img> tag three times:

<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th">
<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th">
<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th">

Produces this in your web browser:

Modifying the URLs so that each is different fixes this, here I have added a "FixBrowser" parameter to the end (which SmugMug ignores) with a different number after each:

<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th&FixBrowser=1">
<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th&FixBrowser=2">
<img src="http://www.sherlockphotography.org/photos/random.mg?AlbumID=11199703&AlbumKey=VVcTJf&Size=Th&FixBrowser=3">

The result, with the random photos all being picked from the same gallery: