Random banner shots?

[rutt]

Suppose I want my gallery to have a couple or three shots in it's header chosen at random from some larger set. Just like dgrin and smugmug do. How do I accomplish this? Can I?

[DJ-S1]

:ear

Just upgraded my account and I'm dying to do this too!

[{JT}]

If you look at the source code for Dgrin you will see the javascript code that does all of the work, it is fairly straight forward.

[DJ-S1]

<!--
var authLl = new Array();
var authP = new Array();
var authLr = new Array();

// authors for Ll folder, array count matches image filename
authLl[0]="Mitchell";
authLl[1]="Shakey";
authLl[2]="pete";
authLl[3]="trish";
authLl[4]="Danny";
authLl[5]="Andy";
authLl[6]="Adrian";
authLl[7]="damon";
authLl[8]="skippy";

// authors for P folder, array count matches image filename
authP[0]="Ginger";
authP[1]="Harry";
authP[2]="snapapple";
authP[3]="purified";
authP[4]="fish";
authP[5]="Gus";
authP[6]="edhughes";
authP[7]="gubbs";

// authors for Lr folder, array count matches image filename
authLr[0]="4labs";
authLr[1]="Lynn";
authLr[2]="mitchell";
authLr[3]="windoze";
authLr[4]="stan";
authLr[5]="david cothran";
authLr[6]="KevinKal";
authLr[7]="Lynnma";
authLr[8]="rutt";
authLr[9]="stevecav";

//-->
</script>
<!-- logo -->
<STYLE TYPE="text/css" MEDIA=screen>
.smborder {
border-style: solid;
border-width: 1px;
border-color: #777777; }
</STYLE>
<div align="center">
<table border="0" width="731" cellpadding="0" cellspacing="0">
<tr>
<td width="188">
<a href="/index.php">
<img src="/images/misc/BannerLeftBlack.gif" width="176" height="105" border="0" hspace="6" vspace="0" alt="Digital Grin">
</a>
</td>
<td width="158">
<script type="text/javascript">
Ll = Math.floor(Math.random()*authLl.length);
document.write('<img width="148" height="103" hspace="4" vspace="0" class="smborder"');
document.write(' src="/images/banner/Ll/'+Ll+'.jpg"');
document.write(' alt="'+authLl[Ll]+'"');
document.write(' alt="'+authLl[Ll]+'"');
document.write(' />');
</script>
<noscript>
<img src="/images/banner/Ll/0.jpg" width="148" height="103" hspace="4" vspace="0" class="smborder" alt="Mitchell" title="Mitchell" />
</noscript>
</td>
<td width="90">
<script type="text/javascript">
P = Math.floor(Math.random()*authP.length);
document.write('<img width="82" height="103" hspace="4" vspace="0" class="smborder"');
document.write(' src="/images/banner/P/'+P+'.jpg"');
document.write(' alt="'+authP[P]+'"');
document.write(' alt="'+authP[P]+'"');
document.write(' />');
</script>
<noscript>
<img src="/images/banner/P/0.jpg" width="82" height="103" hspace="4" vspace="0" class="smborder" alt="Ginger" title="Ginger" />
</noscript>
</td>
<td width="158">
<script type="text/javascript">
Lr = Math.floor(Math.random()*authLr.length);
document.write('<img width="148" height="103" hspace="4" vspace="0" class="smborder"');
document.write(' src="/images/banner/Lr/'+Lr+'.jpg"');
document.write(' alt="'+authLr[Lr]+'"');
document.write(' alt="'+authLr[Lr]+'"');
document.write(' />');
</script>
<noscript>
<img src="/images/banner/Lr/0.jpg" width="148" height="103" hspace="4" vspace="0" class="smborder" alt="4labs" title="4labs" />
</noscript>
</td>
<td>
<a href="http://www.smugmug.com (http://www.smugmug.com/)">
<img src="/images/misc/BannerRightBlack.gif" width="129" height="105" border="0" hspace="0" vspace="0" alt="smugmug.com" />
</a>
</td>
</tr>
</table>
</div>
<!-- /logo -->You mean this part? :scratch Yup, pretty straightforward... :lol3

So I take it you made 3 arrays, one each for the left, middle and right image. Then you name the images left1, left2, etc and the script randomly chooses the number to tack on the end of the name, and does some other magic as well. I'm not sure I could do this, since I can't control the naming of the images?

[rutt]

I reverse engineered this from the dgrin headers. My take is a little more readable, I think.

In the script field of the customize page, I have:


var Ll = new Array();
Ll[0] = "http://rutt.smugmug.com/photos/20842723-Ti.jpg";
Ll[1] = "http://rutt.smugmug.com/photos/21539361-Ti.jpg";
Ll[2] = "http://rutt.smugmug.com/photos/12248309-Ti.jpg";
Ll[3] = "http://rutt.smugmug.com/photos/21541053-Ti.jpg";
Ll[4] = "http://rutt.smugmug.com/photos/21541086-Ti.jpg";

var P = new Array();
P[0] = "http://rutt.smugmug.com/photos/21541448-Ti.jpg";
P[1] = "http://rutt.smugmug.com/photos/21541604-Ti.jpg";

var Lr = new Array();
Lr[0] = "http://rutt.smugmug.com/photos/21566240-Ti.jpg";
Lr[1] = "http://rutt.smugmug.com/photos/21566271-Ti.jpg";
Lr[2] = "http://rutt.smugmug.com/photos/21566326-Ti.jpg";

function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx];
document.write('<img border="2" src="' + img + '"/>');
}


This defines the javascript function choosePhoto which takes an array of image URLs as argument. It chooses one from the array at random and writes an img tag for it to the document with a 2 pixel border.

This can be then used in the header code. The simplest use would be something like:

<script type="text/javascript">choosePhoto(Ll);</script>

which just picks one of the L1 images and puts in in the banner.

Something more like the dgrin header can be accomplished by reusing this in a table. I now have this in my header field:

<center>
<table cellpadding="0" cellspacing="10">
<tr align=center valign=middle>
<td align=left width=300>
<img src="http://rutt.smugmug.com/photos/21631873-O.jpg">
</td>
<td>
<script type="text/javascript">
choosePhoto(Ll);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/20842723-Ti.jpg"/>
</noscript>
</td>
<td>
<script type="text/javascript">
choosePhoto(P);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/21541448-Ti.jpg">
</noscript>
</td>
<td>
<script type="text/javascript">
choosePhoto(Lr);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/21566240-Ti.jpg">
</noscript>
</td>
<td width=300/>
</tr>
</table>
</center>


I think something a lot nicer could be done if I knew how to use the API from javascript. Then it would be possible to use a gallery as argument to the choosePhoto function and it would choose a random image from the gallery. That the header code wouldn't have to change to add/remove images from the base of images for random selection.

[DoctorIt]

this is cool! thanks rutt, I'll have to pirate that...

[DJ-S1]

:agree :nod Thanks!

[Andy]

where do you grab your photos from? any gallery? do you resize the shots? i've found that some shots work better than others at the tiny size...

[rutt]

There was a bug in the code I posted. Actually, it wasn't exactly my bug. In the chooseImage function I indexed the array parray with the variable i. It turns out that this is a vbulletin tag, the one that starts italics, and so it got eaten. I've fixed by changing the name of the variable. The code in my post should now work.

OK, guys, how to I post the string open-bracket i close-bracket?

[rutt]

where do you grab your photos from? any gallery? do you resize the shots? i've found that some shots work better than others at the tiny size...

This is a good point. I'm still in the development stage here. I'm glad to have made the code work and have just started to try to make things look good. I don't think smugmug thumbnails are quite large enough. They can be resized by the html code, but the resolution won't be perfect. (Might not matter.)

I'm thinking I'll do the following:


Keep a local directory for each of the image slots
Use ImageMagick to resize all the images in each directory to the right size (whatever that is.)
Use my python script sm_tool.py keep smugmug mirrors of each local directory.
Enhance sm_tool.py to generate lists of the URLs for the iamges in each of these galleries
Write a little script to transform these lists into array initializations for inclusion in the script field of the Customize form.


As you can see, I'm still working on the mechanism and not the actual look of the thing. That's always my problem.

[{JT}]

The code could be even simpler if you just did a .src swap with an image on the body load. The main reason I implemented all of those document.write's for each image was that some people here were having a problem not seeing the mini-banners. It was a failed attempt though, but I just never went back to fix it :)

[rutt]

The code could be even simpler if you just did a .src swap with an image on the body load. The main reason I implemented all of those document.write's for each image was that some people here were having a problem not seeing the mini-banners. It was a failed attempt though, but I just never went back to fix it :)

Please elaborate.

[Maki]

Something more like the dgrin header can be accomplished by reusing this in a table. I now have this in my header field:

<center>
<table cellpadding="0" cellspacing="10">
<tr align=center valign=middle>
<td align=left width=300>
<img src="http://rutt.smugmug.com/photos/21631873-O.jpg">
</td>
<td>
<script type="text/javascript">
choosePhoto(Ll);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/20842723-Ti.jpg"/>
</noscript>
</td>
<td>
<script type="text/javascript">
choosePhoto(P);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/21541448-Ti.jpg">
</noscript>
</td>
<td>
<script type="text/javascript">
choosePhoto(Lr);
</script>
<noscript>
<img src="http://rutt.smugmug.com/photos/21566240-Ti.jpg">
</noscript>
</td>
<td width=300/>
</tr>
</table>
</center>


I think something a lot nicer could be done if I knew how to use the API from javascript. Then it would be possible to use a gallery as argument to the choosePhoto function and it would choose a random image from the gallery. That the header code wouldn't have to change to add/remove images from the base of images for random selection.
aaaaaahhhh... please forgive my ignorance... I believe I understand most of it, but I can't seem to get why you have img src tags in the section above? I see that the first one is for a non-rotating image, but what are the others for?

[winnjewett]

OK, guys, how to I post the string open-bracket i close-bracket? Here goes:
[i]This text isn't in italics[/i]

I did this by substituting '&#91;' and '&#99;' for '[' and ']' respectively.

hth,
-winn

[rutt]

aaaaaahhhh... please forgive my ignorance... I believe I understand most of it, but I can't seem to get why you have img src tags in the section above? I see that the first one is for a non-rotating image, but what are the others for?

The sections that say "noscript" appear in browsers that don't support scripting. So they are sort of lame alternatives to the random banners.

[Maki]

The sections that say "noscript" appear in browsers that don't support scripting. So they are sort of lame alternatives to the random banners.
Ah... Incidentally, just checked what my page is doing in IE and I see that occasionally I'm getting the red x (fine on firefox). It's random though... any thoughts on these? oh wait... I think I figured it out.

It appears that IE doesn't like pulling direct links from password protected galleries. I got lazy and didn't pull all pictures into my banner gallery.

All is well now. Thanks!

[aciurczak]

I modified the function a bit so the small pictures would be clickable, and would bring up the large pictures on a separate page. You need to remove the size at the end of the image names in the array above, so when you add "Th.jpg" on it the file name is correct..


function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx] + "Th.jpg";
img2= parray[inx]+"L.jpg";
document.write('<a href="' + img2 + '"><img border="0" src="' + img + '" height="113" />');
}

[sheriffvedder@mac.com]

I modified the function a bit so the small pictures would be clickable, and would bring up the large pictures on a separate page. You need to remove the size at the end of the image names in the array above, so when you add "Th.jpg" on it the file name is correct..


function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx] + "Th.jpg";
img2= parray[inx]+"L.jpg";
document.write('<a href="' + img2 + '"><img border="0" src="' + img + '" height="113" />');
}


ok, forgive me for being a newb but, is there a way to get these to link to the gallery the photo is from and not just the image? Also I'm having a hard time getting it to center on the site, any help would be great!

Da Sheriff

[aciurczak]

Anythings possible, but it would require quite different code. You'd need to have a different array, or two separate arrays; one with the file location of the picture, and one with the file location of the gallery you'd want to load. Centering isn't due to the function call; that's all going to work or not work based on where you call that function from.

[Dalantech]

I reverse engineered this from the dgrin headers. My take is a little more readable, I think.

Thanks Rutt -those instructions were very easy to use! I've already got mine going -I just need to iron out some minor layout issues with the rest of the site :): http://dalantech.smugmug.com/

[suz]

i am having probs making this work. i can only get one pic to show in the header????????

I reverse engineered this from the dgrin headers. My take is a little more readable, I think.

In the script field of the customize page, I have:


var Ll = new Array();
Ll[0] = "http://rutt.smugmug.com/photos/20842723-Ti.jpg";
Ll[1] = "http://rutt.smugmug.com/photos/21539361-Ti.jpg";
Ll[2] = "http://rutt.smugmug.com/photos/12248309-Ti.jpg";
Ll[3] = "http://rutt.smugmug.com/photos/21541053-Ti.jpg";
Ll[4] = "http://rutt.smugmug.com/photos/21541086-Ti.jpg";

var P = new Array();
P[0] = "http://rutt.smugmug.com/photos/21541448-Ti.jpg";
P[1] = "http://rutt.smugmug.com/photos/21541604-Ti.jpg";

var Lr = new Array();
Lr[0] = "http://rutt.smugmug.com/photos/21566240-Ti.jpg";
Lr[1] = "http://rutt.smugmug.com/photos/21566271-Ti.jpg";
Lr[2] = "http://rutt.smugmug.com/photos/21566326-Ti.jpg";

function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx];
document.write('<img border="2" src="' + img + '"/>');
}


This defines the javascript function choosePhoto which takes an array of image URLs as argument. It chooses one from the array at random and writes an img tag for it to the document with a 2 pixel border.

This can be then used in the header code. The simplest use would be something like:

******** type="text/javascript">choosePhoto(Ll);</********

which just picks one of the L1 images and puts in in the banner.

Something more like the dgrin header can be accomplished by reusing this in a table. I now have this in my header field:

<center>
<table cellpadding="0" cellspacing="10">
<tr align=center valign=middle>
<td align=left width=300>
<img src="http://rutt.smugmug.com/photos/21631873-O.jpg">
</td>
<td>
******** type="text/javascript">
choosePhoto(Ll);
</********
<noscript>
<img src="http://rutt.smugmug.com/photos/20842723-Ti.jpg"/>
</noscript>
</td>
<td>
******** type="text/javascript">
choosePhoto(P);
</********
<noscript>
<img src="http://rutt.smugmug.com/photos/21541448-Ti.jpg">
</noscript>
</td>
<td>
******** type="text/javascript">
choosePhoto(Lr);
</********
<noscript>
<img src="http://rutt.smugmug.com/photos/21566240-Ti.jpg">
</noscript>
</td>
<td width=300/>
</tr>
</table>
</center>


I think something a lot nicer could be done if I knew how to use the API from javascript. Then it would be possible to use a gallery as argument to the choosePhoto function and it would choose a random image from the gallery. That the header code wouldn't have to change to add/remove images from the base of images for random selection.

[Andy]

i am having probs making this work. i can only get one pic to show in the header????????
Hi, those that will help you, will need your smugmug site to see what's going on.

http://nickname.smugmug.com please :thumb

[suz]

i am having probs making this work. i can only get one pic to show in the header????????

ok i got the pics to come up and then noticed that i had **** in place of script, not script, ect. in what i had in the header section-- replaced the *** with what you had and now i don't have any pics???????????
oh, and when i had pics to come up, they would not change

sorry i did not give you my addy soar.smugmug

[suz]

Ok, thanks--i have written back to rutt. i think i am on the brink to making
this work.
can i make the click back to the homepage on the left of the header directly across from the pic's banner instead of below it?





Hi, those that will help you, will need your smugmug site to see what's going on.

http://nickname.smugmug.com please :thumb

[suz]

i found out that i have to give you my addy in this format
http://soar.smugmug.com


i am having probs making this work. i can only get one pic to show in the header????????

[suz]

i still have not heard from anyome on how to make the pics in my header
change????????????????
http://soar.smugmug.com



Hi, those that will help you, will need your smugmug site to see what's going on.

http://nickname.smugmug.com please :thumb

[suz]

http://soar.smugmug.com
hey andy, i still have not got the banner pics to change. and, in the process
i have messed up the 4 across gallery thing??????????



Hi, those that will help you, will need your smugmug site to see what's going on.

http://nickname.smugmug.com please :thumb

[Mike Lane]

:nono

This does not belong in your CSS

var Ll = new Array();
Ll[0] = "http://soar.smugmug.com/photos/96238290-M.jpg";
Ll[1] = "http://soar.smugmug.com/photos/96144414-M.jpg";
Ll[2] = "http://soar.smugmug.com/photos/96144375-M.jpg";
Ll[3] = "http://soar.smugmug.com/photos/96144368-M.jpg";
Ll[4] = "http://soar.smugmug.com/photos/96144394-M.jpg";

var P = new Array();
P[0] = "http://soar.smugmug.com/photos/96185803-M.jpg";
P[1] = "http://soar.smugmug.com/photos/96144368-M.jpg";

var Lr = new Array();
Lr[0] = "http://soar.smugmug.com/photos/96238228-M.jpg";
Lr[1] = "http://soar.smugmug.com/photos/96144370-M.jpg";
Lr[2] = "http://soar.smugmug.com/photos/96144401-M.jpg";

function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx];
document.write('<img border="2" src="' + img + '"/>');
}

[suz]

http://soar.smugmug.com
does it belong somewhere else??? what makes the pics change????


:nono

This does not belong in your CSS

var Ll = new Array();
Ll[0] = "http://soar.smugmug.com/photos/96238290-M.jpg";
Ll[1] = "http://soar.smugmug.com/photos/96144414-M.jpg";
Ll[2] = "http://soar.smugmug.com/photos/96144375-M.jpg";
Ll[3] = "http://soar.smugmug.com/photos/96144368-M.jpg";
Ll[4] = "http://soar.smugmug.com/photos/96144394-M.jpg";

var P = new Array();
P[0] = "http://soar.smugmug.com/photos/96185803-M.jpg";
P[1] = "http://soar.smugmug.com/photos/96144368-M.jpg";

var Lr = new Array();
Lr[0] = "http://soar.smugmug.com/photos/96238228-M.jpg";
Lr[1] = "http://soar.smugmug.com/photos/96144370-M.jpg";
Lr[2] = "http://soar.smugmug.com/photos/96144401-M.jpg";

function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx];
document.write('<img border="2" src="' + img + '"/>');
}

[Mike Lane]

http://soar.smugmug.com
does it belong somewhere else??? what makes the pics change????That'd be javascript. Make sure you're following along carefully when you read instructions for those sorts of things.

[suz]

http://soar,smugmug.com

ok thanks
i think i am going to have to start all over on this banner thing.
what i originally wanted was 3 shots that randomly changed. i am really
new at this and it can become overwhelming.

in trying to change the banner i have messed up lining up the galleries 4 across and cannot find how to change it back.
i really need alot of help.

i would appreciate it if you would take a look




That'd be javascript. Make sure you're following along carefully when you read instructions for those sorts of things.

[suz]

ok fixed the galleries.
now just need to work on those pics in the header.
would a fillmstip be easier????


http://soar,smugmug.com

ok thanks
i think i am going to have to start all over on this banner thing.
what i originally wanted was 3 shots that randomly changed. i am really
new at this and it can become overwhelming.

in trying to change the banner i have messed up lining up the galleries 4 across and cannot find how to change it back.
i really need alot of help.

i would appreciate it if you would take a look

[suz]

oops--i put a comma in my addy
http://soar.smugmug.com


ok fixed the galleries.
now just need to work on those pics in the header.
would a fillmstip be easier????

[m. dob]

I was curious if I could put 4 photos in the header like I have created in my banner here www.echoimagery.smugmug.com (http://www.echoimagery.smugmug.com) Would I need to create this in a table some how?

I am pretty sure I follow all that has been said about this so far and appreciate anyones insight/insite.

Thanks!

[JS4KIKZ]

Hey, I've been lurking around for a while and finally needed an answer. I dont like posting unless the answer just isnt there or I cant find it. Well, I have managed to get my banner up and get it to change, but I cant figure out how to center it. Any help would be greatly appreciated.


my site: http://js4kikz.smugmug.com/


TIA

Lenny

[Allen]

Hey, I've been lurking around for a while and finally needed an answer. I dont like posting unless the answer just isnt there or I cant find it. Well, I have managed to get my banner up and get it to change, but I cant figure out how to center it. Any help would be greatly appreciated.


my site: http://js4kikz.smugmug.com/


TIA

Lenny
Hope this helps, define the banner div in the header code and format it in CSS.

Change your header code to this

<div id="my_banner">
<img src="http://www.js4kikz.com/smugmug/banner4.jpg">
</div>

Add this to your CSS

#my_banner {
border:2px solid white;
margin:0 auto;
margin-top:10px;
height:150px;
width:800px;}

[JS4KIKZ]

thank you very much! you are the man :wink

[JS4KIKZ]

hmmmmmm, now the banner will not rotate through the 5 different banner pics i have.....

the banner links are: http://www.js4kikz.com/smugmug/banner1.jpg ....../banner5.jpg

[JS4KIKZ]

bump

[Andy]

Can someone rewrite this hack to use feeds instead?

[richtersl]

I found this thread and have been fooling around with the code a bit. I've not implemented it on my site yet, but it works fine on just a plain old html page -- the photos change, etc.

It wasn't too difficult to figure out how to link to a single gallery but I'm not well versed enough in Javascript to figure out how to link each photo to the gallery from which it originated. I thought that a two-dimensional array might be the ticket but don't know how to incorporate that into the function.


var Ll = new Array();
Ll[0][0] = image1 URL
Ll[0][1] = image1 gallery URL
Ll[1][0] = image2 URL
Ll[1][1] = image2 gallery URL
Ll[2][0] = image3 URL
Ll[2][1] = image3 gallery URL
Ll[3][0] = image4 URL
Ll[3][1] = image4 gallery URL


How do I reference that here? About all I do know is that I have to construct an "a href" tag with the appropriate reference from the array. :scratch


function choosePhoto(parray)
{
inx = Math.floor(Math.random()*parray.length);
img = parray[inx];
document.write('<img border="2" src="' + img + '"/>');
}


This part's easy. (Whew!)


******** type="text/javascript">choosePhoto(Ll);</********


Is there a javascript knowledgeable person out there who can perhaps lend a hand?

Thanks!

[guttman]

Hey all!
Actually, what I want is to do a similar thing in the body section with larger pictures: 3 vertical rotating pictures from 3 different galleries (rotating only when reloading page) and with an option to link to a specific gallery.
Somebody? Help??
Chen
PS - my site is @ guttman.smumug.com

[Mike Lane]

Hey all!
Actually, what I want is to do a similar thing in the body section with larger pictures: 3 vertical rotating pictures from 3 different galleries (rotating only when reloading page) and with an option to link to a specific gallery.
Somebody? Help??
Chen
PS - my site is @ guttman.smumug.comUse this URL to generate a random image:

http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE


You can use it in a linked image tag like so:


<a href="#">
<img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" />
</a>


If you need more specific help, just let us know what it is exactly you want to do.

[guttman]

Use this URL to generate a random image:

http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE


You can use it in a linked image tag like so:


<a href="#">
<img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" />
</a>


If you need more specific help, just let us know what it is exactly you want to do.

Hey Mike and thanks for the reply!
I don't know where to paste the code :scratch - obviously, not in the CSS part (nor in the JS part) - so, where? I want the three picture to show at the body part of the site (instead of smugmug's thumbnails of the different categories). I want to define the size and the location of each picture so that they will be placed at the center of the page, one next to each other.
Hope this will help see what I want (I am also attaching a sketch so you could get what I want - in the picture there are three pictures, representing each of my main categories - stage, travel and family).
http://guttman.smugmug.com/photos/171162938-L.jpg

[Mike Lane]

Hey Mike and thanks for the reply!
I don't know where to paste the code :scratch - obviously, not in the CSS part (nor in the JS part) - so, where? I want the three picture to show at the body part of the site (instead of smugmug's thumbnails of the different categories). I want to define the size and the location of each picture so that they will be placed at the center of the page, one next to each other.
Hope this will help see what I want (I am also attaching a sketch so you could get what I want - in the picture there are three pictures, representing each of my main categories - stage, travel and family).
http://guttman.smugmug.com/photos/171162938-Th.jpgThat'll go in your bio box. Something like this (don't forget to change the parts in red):


<html>
<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

</html>


We'll probably have to finagle it a little bit with CSS so once you get that in there just let us know. :thumb

[guttman]

That'll go in your bio box. Something like this (don't forget to change the parts in red):


<html>
<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

</html>


We'll probably have to finagle it a little bit with CSS so once you get that in there just let us know. :thumb

Hey Mike!
Thanks for the fast reply - the album ID is the gallery number? and the smugsize is the amount of pixels on the long orientation?:dunno
Chen

[Mike Lane]

Hey Mike!
Thanks for the fast reply - the album ID is the gallery number? and the smugsize is the amount of pixels on the long orientation?:dunno
Chenyes for the gallery #. And yes for the size but you can have any of the smugmug sizes, Ti, Th, S, M, L, widthxheight

[guttman]

yes for the gallery #. And yes for the size but you can have any of the smugmug sizes, Ti, Th, S, M, L, widthxheight

Hey Mike!
Sorry to bother more, but heck - it didn't work!
:scratch
Here is the HTML:

<html>
<a href="http://guttman.smugmug.com/Stage%20Photography"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=3124672&Size=333x500" /></a>

<a href="http://guttman.smugmug.com/Travel%20Photography"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=500px" /></a>

<a href="http://guttman.smugmug.com/Family%20&%20Friends"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=500px" /></a>

</html>

I created only one gallery to see that it works well - I hope the fact the rest of the code is undefined didn't mess it up (I also used the original www.smugmug.com/photos... (http://www.smugmug.com/photos...) and it didn't work wither...
Can you please add a full example that I will see how exactly I write the attributes?
I really appreciate your time and effort!

[Mike Lane]

Hey Mike!
Sorry to bother more, but heck - it didn't work!
:scratch
Here is the HTML:

<html>
<a href="http://guttman.smugmug.com/Stage%20Photography"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=3124672&Size=333x500" /></a>

<a href="http://guttman.smugmug.com/Travel%20Photography"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=500px" /></a>

<a href="http://guttman.smugmug.com/Family%20&%20Friends"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=500px" /></a>

</html>

I created only one gallery to see that it works well - I hope the fact the rest of the code is undefined didn't mess it up (I also used the original www.smugmug.com/photos... (http://www.smugmug.com/photos...) and it didn't work wither...
Can you please add a full example that I will see how exactly I write the attributes?
I really appreciate your time and effort!I fixed some things up for you. add the gallery numbers to the second 2 images and you're on your way.

[guttman]

I fixed some things up for you. add the gallery numbers to the second 2 images and you're on your way.
:barb
SOO COOL!!! Thanks very much!!!:thumb
What did I make wrong in the code??
I can specify the borders of the pictures through CSS, I persume - what is the code for doing that?

Oh, and another thing...In my Customer HTML page I want to put a logo of the company/studio on the right side and a description on the left - how can I specify a specific location for the picture location and also for the text? (In my "About Me" I didn't know how to specify a specific location for every element so I left it as is...)

[Mike Lane]

:barb
SOO COOL!!! Thanks very much!!!:thumb
What did I make wrong in the code??
I can specify the borders of the pictures through CSS, I persume - what is the code for doing that?

Oh, and another thing...In my Customer HTML page I want to put a logo of the company/studio on the right side and a description on the left - how can I specify a specific location for the picture location and also for the text? (In my "About Me" I didn't know how to specify a specific location for every element so I left it as is...)First off you had your bio box hidden to your control panel. That was easy enough to fix by clicking show. But then it didn't show so I looked in your CSS and found this:

.bioBox {display:block;}
.loggedIn .bioBox {display:none;}


Which would explain why I couldn't see it. So since I couldn't for the life of me figure out why you would have that code :dunno I deleted it.

I think that was everything I did.

About your customer html page...

There are lots of ways to make this happen. It'd be easiest if I knew what content was actually going to go in there before I futzed with it though.

[guttman]

First off you had your bio box hidden to your control panel. That was easy enough to fix by clicking show. But then it didn't show so I looked in your CSS and found this:

.bioBox {display:block;}
.loggedIn .bioBox {display:none;}


Which would explain why I couldn't see it. So since I couldn't for the life of me figure out why you would have that code :dunno I deleted it.

I think that was everything I did.

About your customer html page...

There are lots of ways to make this happen. It'd be easiest if I knew what content was actually going to go in there before I futzed with it though.

Hey Mike and thanks for the tip!
Tell you the truth, I played with lots of stuff that I read on the way so it must have been a relic of some sort of experimenting...
About the customers HTML - The content is a brief description on the left side and on the right side, the logo of the company/customer. I will prepare a sample (text and logo) and you can take it from there - once you gonna do one code, I will know how to replicate...
Also, how can I change the border thickness and color of the Bio box pictures?
and by the way, for some reason the photos in the sub-categories don't appear when Im logged off...any knowledge why?

[GJMPhoto]

I'd like to do this as well...read through the entire thread and am now wondering...do I use the code posted by Rutt on May-09-2005, 11:24 AM or do I use the code Mike posted? What is the official solution now?

Thanks,
- Gary.

[Mike Lane]

I'd like to do this as well...read through the entire thread and am now wondering...do I use the code posted by Rutt on May-09-2005, 11:24 AM or do I use the code Mike posted? What is the official solution now?

Thanks,
- Gary.You can use what I posted :thumb

[fencingcellist]

Thanks to everyone for such great information! It's helped me start to put together my own random banner.

I've got a couple of questions to try to finish it off, here's the most pressing:

How can I add a SmugMug logo to the end of the banner with a link to my referral code? I've seen all sorts of references to removing the SmugMug logo from the top, but not how to add it so that it looks a bit like the banner on this forum site.

Thanks so much! As I never got a response to another question I had a few months ago, I hope I'm posting this correctly.

TIA, Brenda

www.bnphotogallery.com (http://www.bnphotogallery.com)

[fencingcellist]

Hey Folks,

Again, many, many thanks for such great information on these forums. :clap
I have used so much of this information in working towards customizing my pages. However, I still need help. Is this the right place to ask for it? (I'm a newb, obviously.) Anyway, I've posted 4 times before (erased one after getting no response and spending many, many more hours on the forum here and finally fixing my problem more or less) so this is my 5th attempt at getting help and I'm batting about 25% success here so far. . . :cry

OK -- the questions is:

Same question as in the last post -- how do I put a "powered by SmugMug" image at the end of the banner with a link to my referral code?

OK. Please, please, please help. I'm a newbie but I really, really love SmugMug, and really want to customize my page. If I'm in the wrong place, or posting in the wrong forum or in the wrong format, please tell me -- I'll ask in the right place next time. I learn fast.
And really, I'm a BIG fan :lust-- I've now purchased 2 pro memberships, one power, and one regular including my own -- I give them as gifts!

Please . . .

TIA, Brenda
http://fencingcellist.smugmug.com

[redkulas]

I fixed some things up for you. add the gallery numbers to the second 2 images and you're on your way.

Is there a way to show the actual picture that was clicked when using the random.mg?

Thanks,
Redkulas

[aciurczak]

I think it's time I revisit my solution as well. I have a horrendously complicated javascript in my header code. It has an array of 500+ pictures; the code shows a certain number of small images, which are clickable to bring up a larger version of the clicked image in a centered popup window. The pictures also rotate out 1 by 1 every 15 seconds. It works great, but uploading new pictures is terribly cumbersome and simply pointing to a gallery would be a dream. But here's my question, I need something like this:


<a href="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE(large)"">
<img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE(small)" />
</a>


But obviously, this will pull two different random images so it won't work as intended. How can I use the random.mg code, but get hyperlinks to 2 different sizes of the same picture?

Here's a link (http://www.smugmug.com/community/MSMC) to the current page. If folks want to view the current code, they are welcome to it; here is a link to the javascript:

http://www.montgomerybikers.com/forums/clientscript/picrotate2.js

[terterphotography]

That'll go in your bio box. Something like this (don't forget to change the parts in red):


<html>
<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

<a href="#"><img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" /></a>

</html>


We'll probably have to finagle it a little bit with CSS so once you get that in there just let us know. :thumb






I am new here and I am trying to get my page set up. i feel like a dummy but all the codes are confusing to me. I want mine to look similar to your header. Can you help?
I am at www.terrasphotos.smugmug.com (http://www.terrasphotos.smugmug.com)

[terterphotography]

I am new to this and need some help. I feel like a dummy but all this code stuff is very confusing to me! I am looking for my header to look something similar to yours with my photos of course.
I am at www.terrasphotos.smugmug.com (http://www.terrasphotos.smugmug.com)
If you could give me some help with codes and all I would really appreaciate it!



Hey Mike and thanks for the reply!
I don't know where to paste the code :scratch - obviously, not in the CSS part (nor in the JS part) - so, where? I want the three picture to show at the body part of the site (instead of smugmug's thumbnails of the different categories). I want to define the size and the location of each picture so that they will be placed at the center of the page, one next to each other.
Hope this will help see what I want (I am also attaching a sketch so you could get what I want - in the picture there are three pictures, representing each of my main categories - stage, travel and family).
http://guttman.smugmug.com/photos/171162938-L.jpg

[aciurczak]

I'm having weird issues with the random banner code. If I put in the album ID of my older albums, it works fine. But for my newer albums, it doesn't work anymore.

For example, this code works fine:

http://www.smugmug.com/photos/random.mg?AlbumID=2873989_f85R7&Size=800x800

But this same code, for a newer album, shows nothing.

http://www.smugmug.com/photos/random.mg?AlbumID=5058623_P6ULM&Size=800x800

I've cut and pasted a dozen times to make sure I wasn't just mistyping things, but I'm pretty sure that something is hosed. It appears that the albums with the new sizes (not the old S,M,L,O) don't work. Any ideas?

[denisegoldberg]

I'm having weird issues with the random banner code. If I put in the album ID of my older albums, it works fine. But for my newer albums, it doesn't work anymore.

For example, this code works fine:
http://www.smugmug.com/photos/random.mg?AlbumID=2873989_f85R7&Size=800x800

But this same code, for a newer album, shows nothing.
http://www.smugmug.com/photos/random.mg?AlbumID=5058623_P6ULM&Size=800x800
You need to add the album key for the newer albums. I use the random code all of the time, and it works fine as long as the key is specified in addition to the album id. When you look at the url for your gallery, you will see something like 5150485_u2pN4. The first part of that is the album id, and the second is the album key.

Here's an example from one of my galleries:http://www.denisegoldberg.com/photos/random.mg?AlbumID=5150485&AlbumKey=u2pN4&Size=450x450 (http://www.denisegoldberg.com/photos/random.mg?AlbumID=5150485&AlbumKey=u2pN4&Size=450x450)

--- Denise

[aciurczak]

That did it, thx! I was putting the album key as "albumID_albumkey" since that is what the url looks like when you click on a picture in the gallery, didn't try explicitly stating "albumkey=", but it worked, just like you said! Thx again.

[aciurczak]

Well, it's working, but the behavior is markedly different in IE vs. Firefox. IE sees it at as a new picture upon every page reload, but FF requires the user to hit refresh before a new page is loaded.

Check out http://ninjette.org. The splash page works fine in either browser. But once it gets to the forum page, the behavior is different between the two browsers for the pic in the upper left. Click on any link on the page and IE pops up a new pic, FF keeps it the same until "refresh".

[Maki]

This does not work with protected galleries, no? I've been using the old Rutt method (hey, I've been away from these forums for almost 3 years?) by specifying the file names, which works for protected galleries as well.

Use this URL to generate a random image:

http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE

You can use it in a linked image tag like so:


<a href="#">
<img src="http://www.smugmug.com/photos/random.mg?AlbumID=XXX&Size=SMUGSIZE" />
</a>


If you need more specific help, just let us know what it is exactly you want to do.