Galleries Page

[usrjpj]

Hi all,

This is my first post - I hope I'm putting it in the right place. I've spent hours (literally!) trying to figure out how to get my galleries page to look the way I want. Basically, I want little boxes with the name underneath, similar to http://www.moonriverphotography.com/Galleries. I like how the boxes are all the same and the text underneath is level / aligned. I've found multiple different pieces of code on dgrin, but everything I try doesn't work. Having ZERO coding knowledge, I'm sure I'm doing something wrong - I was hoping it was as easy as cutting and pasting the code, but alas, no.

Here's what I have so far, but this doesn't give me a picture in the box, and looks nothing like moon river...is there anyone who can help me?

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

But there is no

[Allen]

Hi all,

This is my first post - I hope I'm putting it in the right place. I've spent hours (literally!) trying to figure out how to get my galleries page to look the way I want. Basically, I want little boxes with the name underneath, similar to http://www.moonriverphotography.com/Galleries. I like how the boxes are all the same and the text underneath is level / aligned. I've found multiple different pieces of code on dgrin, but everything I try doesn't work. Having ZERO coding knowledge, I'm sure I'm doing something wrong - I was hoping it was as easy as cutting and pasting the code, but alas, no.

Here's what I have so far, but this doesn't give me a picture in the box, and looks nothing like moon river...is there anyone who can help me?

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

But there is no
Welcome to Dgrin :wave
Those that could help would need a link to our site.

[usrjpj]

Oops...forgot the link to my site:
elizabethgracephotography.com

Note that because my galleries page was a mess (and I don't have an environment to test changes other than my real website) I've left it without the code/galleries the way I want and put it to something that I know works (even though it's not what I want!).


Welcome to Dgrin :wave
Those that could help would need a link to our site.

[Allen]

Oops...forgot the link to my site:
elizabethgracephotography.com

Note that because my galleries page was a mess (and I don't have an environment to test changes other than my real website) I've left it without the code/galleries the way I want and put it to something that I know works (even though it's not what I want!).
What you are seeing on Andy's is the Galleries category page. He has a category
named Galleries.

He used the mini-hack to align all the galleries.

Mini-box hack #10 in the FAQ:
http://www.dgrin.com/showpost.php?p=300387&postcount=8

[usrjpj]

Hi Al,

I despertly wish I could understand this stuff better! In my hours of searching and trying out code (before I ever did my first post) I found the link you listed below. So, I cut and paste it into my galleries code - all I saw was the code show up on my page - no aligned boxes. I apologize for being sucn a complete novice - any chance you or one of the other smart people could tell me how to use the code? I've found I just can't cut and paste?


What you are seeing on Andy's is the Galleries category page. He has a category
named Galleries.

He used the mini-hack to align all the galleries.

Mini-box hack #10 in the FAQ:
http://www.dgrin.com/showpost.php?p=300387&postcount=8

[Allen]

Hi Al,

I despertly wish I could understand this stuff better! In my hours of searching and trying out code (before I ever did my first post) I found the link you listed below. So, I cut and paste it into my galleries code - all I saw was the code show up on my page - no aligned boxes. I apologize for being sucn a complete novice - any chance you or one of the other smart people could tell me how to use the code? I've found I just can't cut and paste?
Are you referring to this?

Mini-box hack #10 in the FAQ:
http://www.dgrin.com/showpost.php?p=300387&postcount=8

It goes in your CSS.

[usrjpj]

Yes, that's what I was referring to. In my smugmug, when I'm logged in, I see an "edit" link in each of my pages, and when I click that, I have a tiny window in which I can edit code.

I don't know what CSS is, but I had remembered seeing it so I went and found it. Am I correct that I am supposed to have only one CSS box? Here is what my CSS box currently has in in (see below) - do I just add in the stuff from the mini-box hack #10 in there too? Do I need to set up a category first?

My CSS stuff (by the way, I have no idea what any of the below means - up until this point I've had someone that was helping me write code, but that person is no longer available, hence my hours of searching for answers on dgrin!) --

#ssSlide {
margin-left: 75px;
}
#feeds {
display:none;
}
.box {
background: none;
}
.loginLink {
display: none;
}
.cartlink_footer {
display: none;
}
/* html only page for gallery XXXXXX */
.gallery_pricing .pageNav {
display: none;
}
gallery_about .pageNav {
display:none;
}
.gallery_galleries .pageNav {
display:none;
}
.nophotos h3 {
display:none;
}
#breadcrumb {
display:none;
}

-- end of my CSS stuff --

Are you referring to this?

Mini-box hack #10 in the FAQ:
http://www.dgrin.com/showpost.php?p=300387&postcount=8

It goes in your CSS.

[Allen]

Yes, that's what I was referring to. In my smugmug, when I'm logged in, I see an "edit" link in each of my pages, and when I click that, I have a tiny window in which I can edit code.

I don't know what CSS is, but I had remembered seeing it so I went and found it. Am I correct that I am supposed to have only one CSS box? Here is what my CSS box currently has in in (see below) - do I just add in the stuff from the mini-box hack #10 in there too? Do I need to set up a category first?

My CSS stuff (by the way, I have no idea what any of the below means - up until this point I've had someone that was helping me write code, but that person is no longer available, hence my hours of searching for answers on dgrin!) --
..
Yelp, looks like you found it in your control panel.
Here's a short blurb I copied from one of my pages.
Go to your control panel and select the "customize" tab, click "Customize" in the list.
On the "Customization Settings" page, the top box, "css - optional" is where you will paste the CSS. After pasting it in go to the bottom of the page and click "Update".

[usrjpj]

Did I miss the blurb? Or am I just supposed to paste in the CSS stuff from that mini-box hack link -- and if I do cut and paste, does it matter if it goes before or after all the other stuff I have there? Is it supposed to replace anything I have there? I have no test environment to see what impact any changes have, so I'm always quite nervous when doing any code changes (especially since it's a foreign language to me). BTW, over 10,000 posts??!! You must have helped thousands of people - WOW!!!

Yelp, looks like you found it in your control panel.
Here's a short blurb I copied from one of my pages.
Go to your control panel and select the "customize" tab, click "Customize" in the list.
On the "Customization Settings" page, the top box, "css - optional" is where you will paste the CSS. After pasting it in go to the bottom of the page and click "Update".

[Allen]

Did I miss the blurb? Or am I just supposed to paste in the CSS stuff from that mini-box hack link -- and if I do cut and paste, does it matter if it goes before or after all the other stuff I have there? Is it supposed to replace anything I have there? I have no test environment to see what impact any changes have, so I'm always quite nervous when doing any code changes (especially since it's a foreign language to me). BTW, over 10,000 posts??!! You must have helped thousands of people - WOW!!!
Paste this at the bottom of your CSS box, really doesn't matter where, it's
all new. It should work as is with no changes.


/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

This is the page (http://allen-steve.smugmug.com/gallery/3819841_ywRwQ) I copied the blurb from.:D

[usrjpj]

Ooohhh, I'm getting close! I've pasted in the mini-box hack to my CSS, and now I see boxes on my "proofs" page (although there's a big gap between boxes?). My issue now is that I still don't have any picture showing up in the box. Here's the link to my gallery page:

http://www.elizabethgracephotography.com/gallery/3309869

And here's my code (once I get the boxes showing up with pictures I know I can delete the span stuff (at least I think I can!):

<html>
<p></P>

<div class="boxBottom">
<p id="friends4" class="nav"><span class="title">proofs galleries:</span>
<a href="/gallery/3887745" class="nav">Darren and Boys</a> <span class="title">-</span>
<a href="/gallery/3935094" class="nav">Baby Claire</a> <span class="title">-</span>
<a href="/gallery/3986653" class="nav">Baby Elsie</a> <span class="title">-</span>
<a href="/gallery/4083870" class="nav">Big Brother Lucas</a> <span class="title">-</span>
<a href="/gallery/4185447" class="nav">Em & Steve</a> <span class="title">-</span>
<a href="/gallery/4320205_mVzb8" class="nav">Harper's 1st Birthday</a> <span class="title">-</span>

</p>
</div>
<div class="spacer">
</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/4185447_PELcj"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">em and steve</font><p class="albumTitle" id="albumTitle_4185447_PELcj">

</div>


<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="miniBox">
<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>
</html>

*******

Paste this at the bottom of your CSS box, really doesn't matter where, it's
all new. It should work as is with no changes.


/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}
This is the page (http://allen-steve.smugmug.com/gallery/3819841_ywRwQ) I copied the blurb from.:D

[Allen]

Ooohhh, I'm getting close! I've pasted in the mini-box hack to my CSS, and now I see boxes on my "proofs" page (although there's a big gap between boxes?). My issue now is that I still don't have any picture showing up in the box. Here's the link to my gallery page:

http://www.elizabethgracephotography.com/gallery/3309869

And here's my code (once I get the boxes showing up with pictures I know I can delete the span stuff (at least I think I can!):
...
Remove the <div class="miniBox"> on all but the first. All those should be
wrapped in one miniBox.

[usrjpj]

AAAHHH!! I don't know what I did, but my boxes are all over the place (staggered down my page) and the text is no longer underneath. And, I still don't have any pictures showing up in my little boxes. I'm completely lost. :dunno Any more help you can give?

Here's my code (and I had to take this code out except for the span stuff, since I didn't want my real website page looking like a mess!):

<html>

<div class="boxBottom">
<p id="friends4" class="nav"><span class="title">proofs galleries:</span>
<a href="/gallery/3887745" class="nav">Darren and Boys</a> <span class="title">-</span>
<a href="/gallery/3935094" class="nav">Baby Claire</a> <span class="title">-</span>
<a href="/gallery/3986653" class="nav">Baby Elsie</a> <span class="title">-</span>
<a href="/gallery/4083870" class="nav">Big Brother Lucas</a> <span class="title">-</span>
<a href="/gallery/4185447" class="nav">Em & Steve</a> <span class="title">-</span>
<a href="/gallery/4320205_mVzb8" class="nav">Harper's 1st Birthday</a> <span class="title">-</span>

</p>
</div>


<div class="miniBox">
<div class="photo"><a href="/gallery/4185447_PELcj"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="century gothic" color="#7C552A" size="3">em and steve</font><p class="albumTitle" id="albumTitle_4185447_PELcj">

</div>


<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="century gothic" color="#7C552A" size="3">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>

<div class="photo"><a href="/gallery/3396081"><img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" /></div>
<td><font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font><p class="albumTitle" id="albumTitle_3396081">

</div>


</html>




Remove the <div class="miniBox"> on all but the first. All those should be
wrapped in one miniBox.

[usrjpj]

Anyone that knows what may be wrong with this mess of code?

[Allen]

Anyone that knows what may be wrong with this mess of code? I see a lot of open tags. Exmples shown in red below.


<div class="photo">
<a href="/gallery/3396081">
<img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" />
</div>
<td>
<font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font>
<p class="albumTitle" id="albumTitle_3396081">

</div>

[usrjpj]

Thanks for pointing me in the right direction. I appreciate that you're trying to "teach me to fish" instead of just "providing" me with the fish, but knowing zero about coding, I'm not sure what my next step should be. I know to use a / to close a tag, but have no idea where the closed tags should go, or if my darn code is even correct to begin with. I've done some experimenting with closing tags on my website, and all I get is a mess of boxes without the text being aligned underneath - and this is on my real website as I have no text environment. I guess I'm hoping for an example of correctly written text that I would be able to copy and paste (and then replicate to create my additional boxes on my galleries page). I'm nearly bald from pulling my hair out on this thing and despertly in need of help. Allen or anyone that can lend some coding assistance so I know I'm working with correct code to begin with?

I see a lot of open tags. Exmples shown in red below.


<div class="photo">
<a href="/gallery/3396081">
<img vspace="0" hspace="0" border="0" alt="Proofs : " title="Proofs : " src="/photos/random.mg?AlbumID=3396081&Size=Tiny&rand=3238" class="imgBorder" />
</div>
<td>
<font face="Rolling Ball Cursive" color="#7C552A" size="5">eli m.</font>
<p class="albumTitle" id="albumTitle_3396081">

</div>

[Allen]

Thanks for pointing me in the right direction. I appreciate that you're trying to "teach me to fish" instead of just "providing" me with the fish, but knowing zero about coding, I'm not sure what my next step should be. I know to use a / to close a tag, but have no idea where the closed tags should go, or if my darn code is even correct to begin with. I've done some experimenting with closing tags on my website, and all I get is a mess of boxes without the text being aligned underneath - and this is on my real website as I have no text environment. I guess I'm hoping for an example of correctly written text that I would be able to copy and paste (and then replicate to create my additional boxes on my galleries page). I'm nearly bald from pulling my hair out on this thing and despertly in need of help. Allen or anyone that can lend some coding assistance so I know I'm working with correct code to begin with?
Try this.
Replace your album description with this.

<html>
<div class="boxBottom">
<div class="friends4" class="nav">
<span class="title">proofs galleries:</span>
<a href="/gallery/3887745" class="nav">Darren and Boys</a>
<span class="title"> - </span>
<a href="/gallery/3935094" class="nav">Baby Claire</a>
<span class="title"> - </span>
<a href="/gallery/3986653" class="nav">Baby Elsie</a>
<span class="title"> - </span>
<a href="/gallery/4083870" class="nav">Big Brother Lucas</a>
<span class="title"> - </span>
<a href="/gallery/4185447" class="nav">Em &amp; Steve</a>
<span class="title"> - </span>
<a href="/gallery/4320205_mVzb8" class="nav">Harper's 1st Birthday</a>
</div>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>
</html>

Add this to your CSS

.friends4 {
margin: 0 auto 20px; /* top right/left bottom */
width: 600px;
font-size: 200%;
}

.friends4 a {
font-size: 80%;
font-weight: bold;
}

[usrjpj]

Thank you!!

I'm getting closer - now I have aligned boxes with the text underneath (actually two lines of text???), but still no pics showing up in the boxes. Here's the link to my site with the new code provided by Allen:

http://www.elizabethgracephotography.com/gallery/3309869

Try this.
Replace your album description with this.

<html>
<div class="boxBottom">
<div class="friends4" class="nav">
<span class="title">proofs galleries:</span>
<a href="/gallery/3887745" class="nav">Darren and Boys</a>
<span class="title"> - </span>
<a href="/gallery/3935094" class="nav">Baby Claire</a>
<span class="title"> - </span>
<a href="/gallery/3986653" class="nav">Baby Elsie</a>
<span class="title"> - </span>
<a href="/gallery/4083870" class="nav">Big Brother Lucas</a>
<span class="title"> - </span>
<a href="/gallery/4185447" class="nav">Em &amp; Steve</a>
<span class="title"> - </span>
<a href="/gallery/4320205_mVzb8" class="nav">Harper's 1st Birthday</a>
</div>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>
</html>
Add this to your CSS

.friends4 {
margin: 0 auto 20px; /* top right/left bottom */
width: 600px;
font-size: 200%;
}

.friends4 a {
font-size: 80%;
font-weight: bold;
}

[Allen]

Thank you!!

I'm getting closer - now I have aligned boxes with the text underneath (actually two lines of text???), but still no pics showing up in the boxes. Here's the link to my site with the new code provided by Allen:

http://www.elizabethgracephotography.com/gallery/3309869
You might have to change to an actual photo link, don't know how the random
photo works, maybe doesn't work with new security feature.

/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8

/photos/xxxxxxxxxx_xxxxx-Th.jpg

[denisegoldberg]

You might have to change to an actual photo link, don't know how the random
photo works, maybe doesn't work with new security feature.

/photos/random.mg?AlbumID=4185447_PELcj&amp;Size=Tiny&amp;rand=323 8

/photos/xxxxxxxxxx_xxxxx-Th.jpg
I am still using random, although I don't think any of my galleries are new since the security change. Here's a link to the wiki page with examples - http://wiki.smugmug.com/display/SmugMug/Random+Photos+Code, don't know what the rand=3238 is in the code posted above. Maybe just try removing that?

Example of one of my urls using random:
<img src="/photos/random.mg?AlbumID=3961344&Size=190x190">

--- Denise

[usrjpj]

Thanks to both of you! I know I'm getting close, but still not there yet!

Here's my new code - see below. I only had the span stuff there because I can't get these darn gallery boxes to work.

And, here's the link to what my site now looks like - where I tried to edit the first picture gallery box:

http://www.elizabethgracephotography.com/gallery/3309869

I have no picture???!!!



<html>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img src="/photos/3263016_Lo2ef#254775248-Th.jpg" border="2" height="150" width="150"></a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>
</html>



I am still using random, although I don't think any of my galleries are new since the security change. Here's a link to the wiki page with examples - http://wiki.smugmug.com/display/SmugMug/Random+Photos+Code, don't know what the rand=3238 is in the code posted above. Maybe just try removing that?

Example of one of my urls using random:
<img src="/photos/random.mg?AlbumID=3961344&Size=190x190">

--- Denise

[usrjpj]

OK, I've figured out how to get the gallery boxes set up. However, I've noticed that the "old" galleries (e.g., xxxxxxx) do fine with showing the thumbnail, but the "new" galleries (xxxxxxx_MexUl -- or whatever that appended part may be) do not show up. Here's a iink to my site - anyone have any ideas of how to get around this? Or, maybe my hypothesis about what is wrong is incorrect?

http://www.elizabethgracephotography.com/gallery/3309869

THANKS!
Jen



Thanks to both of you! I know I'm getting close, but still not there yet!

Here's my new code - see below. I only had the span stuff there because I can't get these darn gallery boxes to work.

And, here's the link to what my site now looks like - where I tried to edit the first picture gallery box:

http://www.elizabethgracephotography.com/gallery/3309869

I have no picture???!!!



<html>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img src="/photos/3263016_Lo2ef#254775248-Th.jpg" border="2" height="150" width="150"></a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>

<div class="miniBox">
<div class="photo">
<a href="/gallery/4185447_PELcj">
<img alt="Proofs : " title="Proofs : "
src="/photos/random.mg?AlbumID=4185447_PELcj&Size=Tiny&rand=3238"
class="imgBorder" border="0" hspace="0" vspace="0" />
</a>
</div>
<font color="#7c552a" face="century gothic" size="3">em and steve</font>
<p class="albumTitle" id="albumTitle_4185447_PELcj">xxxxxx xxxxx</p>
</div>
</html>

[Allen]

OK, I've figured out how to get the gallery boxes set up. However, I've noticed that the "old" galleries (e.g., xxxxxxx) do fine with showing the thumbnail, but the "new" galleries (xxxxxxx_MexUl -- or whatever that appended part may be) do not show up. Here's a iink to my site - anyone have any ideas of how to get around this? Or, maybe my hypothesis about what is wrong is incorrect?

http://www.elizabethgracephotography.com/gallery/3309869

THANKS!
Jen
Lose the gallery part.

<img src="/photos/3263016_Lo2ef#254775248-Th.jpg" bord.....

like this

<img src="/photos/254775248-Th.jpg" bord.....

or if key is needed

<img src="/photos/254775248_xxxxxx-Th.jpg" bord.....

[denisegoldberg]

OK, I've figured out how to get the gallery boxes set up. However, I've noticed that the "old" galleries (e.g., xxxxxxx) do fine with showing the thumbnail, but the "new" galleries (xxxxxxx_MexUl -- or whatever that appended part may be) do not show up. Here's a iink to my site - anyone have any ideas of how to get around this? Or, maybe my hypothesis about what is wrong is incorrect?

http://www.elizabethgracephotography.com/gallery/3309869

THANKS!
Jen
I'm a little confused by this. It looks like the code pasted in this thread like you are actually building your own gallery page. Are you? Are the galleries on the page that you linked in a single category or subcategory?

If the galleries on that page are in one category or subcategory, and if you are building your own page, why not just use the category/subcategory page? Allen already pointed you to the mini-box hack, and I can see that in your CSS. That's what Andy is using in the moonriverphotography.com page. (He also is using the bulk zoom thumbnail hack to build square thumbs.)

If you want an example of showing a category without coding the look and feel yourself.... if you go to my page, the Gallery link from the navbar takes you to an html-only page that I built to show my categories because I wanted larger thumbs than normal. The pages linked from there are just normal category pages, no coding needed other than the mini-box hack.

--- Denise

[usrjpj]

Hi Al & Denise,

Thank you for your continued support - you much be blessed with patience beyond what I've got to hang with me! :bow

As to Denise's question, I have no idea whether I'm building my own gallery page or not. I don't know one iota of html, and I've been trying to piece together the code based on help I've received through dgrin. I actually just scrapped all the code I had previously (when you asked if I was building my own gallery or not) and gave something new a try...this is what I now have (see directly below). This has worked like a charm (YEAH!!) except when I try to zoom the thumbnail on the "new" galleries. Al, I saw the advice you gave about removing the gallery, from what I can tell from my code I have done that??? It seems to be an issue with the new galleries that have the appended stuff on the end (e.g., xxxxxxx_MexIO). I just can't figure out how to get the pic to show for these galleries - it was easy with my "old" galleries - just zoom the thumbnail and then put the picture # into the code. I did the same process with these new galleries, but I just get a question mark showing up? Any thoughts? And, Al, if I misunderstood the help you already tried to give me, sorry! But, I think I've already done that?

Here's the link to my site so you can see what it looks like...and also code below.

http://www.elizabethgracephotography.com/gallery/3309869

Any thoughts???

Jen



<html>
<font face="century gothic" color="#7C552A">
<h3><center>client proofs</center></h3>

<table align="center" width="700">
<tbody>

<tr>
<td>
<a href="/gallery/3887745">
<img src="/photos/225368308-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/3935094">
<img src="/photos/228501171-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/3986653">
<img src="/photos/231764811-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/4083870">
<img src="/photos/237962136-Th.jpg" border="2" height="150" width="150"></a>
</td>
</tr>

<tr align="center" height="50" valign="top">
<td><a href="/gallery/3887745">darren and boys</a></td>
<td><a href="/gallery/3935094">baby claire</a></td>
<td><a href="/gallery/3986653">baby elsie</a></td>
<td><a href="/gallery/4083870">lucas</a></td>
</tr>

<tr>
<td>
<a href="/gallery/4185447">
<img src="/photos/244564890-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/4320205_mVzb8">
<img src="/photos/253372009-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/xxxxxxxx">
<img src="/photos/xxxxxxxx-Th.jpg" border="2" height="150" width="150"></a>
</td>

<td>
<a href="/gallery/4350468_RmNTd">
<img src="/photos/255269476-Th.jpg" border="2" height="150" width="150"></a>
</td>
</tr>

<tr align="center" height="50" valign="top">
<td><a href="/gallery/4185447">em and steve</a></td>
<td><a href="/gallery/4320205">harper’s first birthday</a></td>
<td><a href="/gallery/xxxxxxxx">gallery7</a></td>
<td><a href="/gallery/4350468_RmNTd">CARDS & ANNOUNCEMENTS</a></td>
</tr>

</tbody>
</table>
</html>



I'm a little confused by this. It looks like the code pasted in this thread like you are actually building your own gallery page. Are you? Are the galleries on the page that you linked in a single category or subcategory?

If the galleries on that page are in one category or subcategory, and if you are building your own page, why not just use the category/subcategory page? Allen already pointed you to the mini-box hack, and I can see that in your CSS. That's what Andy is using in the moonriverphotography.com page. (He also is using the bulk zoom thumbnail hack to build square thumbs.)

If you want an example of showing a category without coding the look and feel yourself.... if you go to my page, the Gallery link from the navbar takes you to an html-only page that I built to show my categories because I wanted larger thumbs than normal. The pages linked from there are just normal category pages, no coding needed other than the mini-box hack.

--- Denise

[Allen]

Hi Al & Denise,

Thank you for your continued support - you much be blessed with patience beyond what I've got to hang with me! :bow

As to Denise's question, I have no idea whether I'm building my own gallery page or not. I don't know one iota of html, and I've been trying to piece together the code based on help I've received through dgrin. I actually just scrapped all the code I had previously (when you asked if I was building my own gallery or not) and gave something new a try...this is what I now have (see directly below). This has worked like a charm (YEAH!!) except when I try to zoom the thumbnail on the "new" galleries. Al, I saw the advice you gave about removing the gallery, from what I can tell from my code I have done that??? It seems to be an issue with the new galleries that have the appended stuff on the end (e.g., xxxxxxx_MexIO). I just can't figure out how to get the pic to show for these galleries - it was easy with my "old" galleries - just zoom the thumbnail and then put the picture # into the code. I did the same process with these new galleries, but I just get a question mark showing up? Any thoughts? And, Al, if I misunderstood the help you already tried to give me, sorry! But, I think I've already done that?

Here's the link to my site so you can see what it looks like...and also code below.

http://www.elizabethgracephotography.com/gallery/3309869

Any thoughts???

Jen

..
The bulk zoom thumbnail is broken for new galleries and they are working on
a fix. So for now, the one you want to use go under photo tools and pick
zoom thumbnail. Then from under share photo button get the full photo
number including the key.

bogus example
/photos/123344556_fhJin-Th.jpg

Then put that in here. Might need the gallery key also.

<td>
<a href="/gallery/1232456_fhJin">
<img src="/photos/123344556_fhJin-Th.jpg" border="2" height="150" width="150"></a>
</td>

[usrjpj]

THANKS! I was missing the key - now it's working just great! I really really appreciate it!!!

The bulk zoom thumbnail is broken for new galleries and they are working on
a fix. So for now, the one you want to use go under photo tools and pick
zoom thumbnail. Then from under share photo button get the full photo
number including the key.

bogus example
/photos/123344556_fhJin-Th.jpg

Then put that in here. Might need the gallery key also.

<td>
<a href="/gallery/1232456_fhJin">
<img src="/photos/123344556_fhJin-Th.jpg" border="2" height="150" width="150"></a>
</td>