FAQtoid

ccs · Apr-16-2011, 08:49 AM #1

Hi!

Can anyone tell me how to make 3 columns in an album description (e.g. where I could put three separate columns of text or pictures?)

Thanks!
Chris

denisegoldberg · Apr-16-2011, 09:00 AM #2

There are a couple of different ways to do this. Take a look at Allen's tutorial at http://allen-steve.smugmug.com/gallery/3539056 and see if that does what you are after.

That should work well if you always want the same number of elements across the browswer window. If you want the number of elements to change based on the width of the window then you will need to use CSS to set up some floating elements. If that's the case, post back and let us know.

Examples of the different methods from my site (you should be able to see the difference if you resize the browser window):
>>> my About page uses a table for the images - http://www.denisegoldberg.com/Medley...24505685_9QGTY.
>>> my Kaleidoscope page uses CSS to float the images - http://www.denisegoldberg.com/Medley...46145545_kcCkw

--- Denise

ccs · Apr-16-2011, 09:20 AM #3

Thanks!
So in Allen's tutorial, I would just replace an image with text, if that's what I wanted to do then right?
Could I even place a slideshow (like JFriend's) in one of the table cells?

Cheers,
chris

denisegoldberg · Apr-16-2011, 09:24 AM #4

Quote:

Originally Posted by ccs

So in Allen's tutorial, I would just replace an image with text, if that's what I wanted to do then right? Could I even place a slideshow (like JFriend's) in one of the table cells?

Yes, you can replace an image with text or with a slideshow. You would probably need to set the slideshow to a specific size rather than stretchy though.

Here's another example of a table from my site, two columns, photo in one, text in the other - http://www.denisegoldberg.com/Medley...40022995_mTMaJ.

--- Denise

ccs · Apr-16-2011, 09:34 AM #5

NICE! That looks great Denise. Time for me to get workin'!

.. the only thing I don't get is where the image hover is controlled in Allen's tutorial (although I do see where the text hover color is controlled)

denisegoldberg · Apr-16-2011, 09:40 AM #6

Quote:

Originally Posted by ccs

NICE! That looks great Denise. Time for me to get workin'!

.. the only thing I don't get is where the image hover is controlled in Allen's tutorial (although I do see where the text hover color is controlled)

Why don't you go ahead and put the page together, then post a link here and describe what you want to happen for the image hover?

--- Denise

ccs · Apr-16-2011, 09:45 AM #7

OK, here's what I want to do:

Create two columns. The one on the left with my text, the one on the right with the slideshow. Here's how I have it coded, but it won't save for me.

Am I doing something wrong?

Here's the code I was trying to insert in the gallery description:

<html>
<table align="center" width="900">
<tbody>
<tr>
<td>
<p id="PortTitle"><style="text-decoration:none">
Executive, Family, Engagement, and all other portrait sessions start at $150.00 and include: <br></p>
<p id="PortINFO"><style="text-decoration:none">
◆ Two Photographers<br>
◆ A 60 to 90 minute photo session in a location of your choice (indoor, outdoor, or both)<br>
◆ A private online proof gallery to select your favorite photos<br>
◆ A CD with high resolution copies of your favorite 30, fully edited photos. <br>
◆ One 8x10, two 5x7, and 16 wallet sized prints. <br><br>

Additional prints packages can be ordered through your private online proof gallery
Note that indoor shoots have the option of studio lighting.
<br><br></p>
</td>

<td>
<script type="text/javascript"> JF.InsertSlideshowHere({
galleryURL: "http://www.quarkview.com/Portfolio/People/15663689_yCAuz#1173974855_XshVA",
splashImageURL: "http://ccmixed.smugmug.com/photos/1212768420_HwAtR-XL.png",
splashMinDisplayTime: "3.0",
splashBorderColor: "#0F0F0F",
clickToURL: "/galleries",
slideBorderWidth: "1.5",
slideBorderColor: "#777",
selectOrientation: "landscape",
useNativeSizesOnly: "true",
superSize: "true",
height: "200",
width: "500",
transitionsList: "Fade",
randomSlideOrder: "true",
transitionDuration: "1"}
); </script>
</td>
</tbody>
</table>

</html>

And here's the gallery:

http://www.quarkview.com/Information...16602257_yWe3E

The description just won't save (it keeps the edit box open and doesn't save with a refresh or anything)

hm..thanks in advance for your help!
Chris

Allen · Apr-16-2011, 09:49 AM #8

Quote:

Originally Posted by ccs

NICE! That looks great Denise. Time for me to get workin'!

.. the only thing I don't get is where the image hover is controlled in Allen's tutorial (although I do see where the text hover color is controlled)

You could create three div's each containing something like I have in the
example. Then using floats get them side by side. Using html and CSS you
can eventually get any look you'd want.

ccs · Apr-16-2011, 09:53 AM #9

Quote:

Originally Posted by Allen

You could create three div's each containing something like I have in the
example. Then using floats get them side by side. Using html and CSS you
can eventually get any look you'd want.

Hi Allen,

thanks for the feedback. Im not sure I understand what your getting at. I apologize for that - Im not too programming savvy yet!

Would the three divs make columns like this: (?)

<div>
<div></div>
<div></div>
</div>

And then I put whatever I want in each div?

Or are you referring to the hovering question I had asked?

Thanks again!
Chris

denisegoldberg · Apr-16-2011, 09:55 AM #10

Interesting.

Try to save it using the table but putting a placeholder in for the slideshow - just to make sure that the table syntax is ok. The one thing that I noticed is that you are missing the </tr> tag, but smug doesn't normally choke on html problems like that. Once that saves ok, go back in and add the slideshow code in the second cell.

It's also possible that John's slideshow can't be embedded like that, but with size constraints I can't imagine that is the problem.

By the way I just copied the code from your post and saved it to an unlisted gallery on my site. It saved fine. The slideshow doesn't run because I don't have the slideshow code installed on my site, just wanted to see if there was something that jumped out at me in the html.

--- Denise

ccs · Apr-16-2011, 09:57 AM #11

No matter what I put in my album description it's refusing to save with anything new added! Do I have something goofy in it?!

I deleted the slideshow to be sure it wasn't that, and that wasn't the problem..

http://www.quarkview.com/Information...16602257_yWe3E

ccs · Apr-16-2011, 09:59 AM #12

Thanks for the test Denise. I will try clearing my cache or something,... maybe that'll help!

Allen · Apr-16-2011, 10:08 AM #13

Quote:

Originally Posted by ccs

Thanks for the test Denise. I will try clearing my cache or something,... maybe that'll help!

Try something like this. Two div's side by side. Adjust the widths to fit. Might have to resize the slideshow also.

Code:

<html>
<div id="textContainer" style="text-decoration:none; width: 300px; float:left;">   

<div id="PortTitle">
Executive, Family, Engagement, and all other portrait sessions start at $150.00 and include:
</div>

<div id="PortINFO">
◆ Two Photographers<br>
◆ A 60 to 90 minute photo session in a location of your choice (indoor, outdoor, or both)<br>
◆ A private online proof gallery to select your favorite photos<br>
◆ A CD with high resolution copies of your favorite 30, fully edited photos. <br>
◆ One 8x10, two 5x7, and 16 wallet sized prints. 
<br><br>

<p>Additional prints packages can be ordered through your private online proof gallery
Note that indoor shoots have the option of studio lighting.
<br><br></style="text-decoration:none"></p>
</div>

</div> <!-- closes textContainer -->

<div id="showContainer">
<script type="text/javascript"> JF.InsertSlideshowHere({
galleryURL: "http://www.quarkview.com/Portfolio/People/15663689_yCAuz#1173974855_XshVA",
   splashImageURL: "http://ccmixed.smugmug.com/photos/1212768420_HwAtR-XL.png",
   splashMinDisplayTime: "3.0",
   splashBorderColor: "#0F0F0F",
   clickToURL: "/galleries",
   slideBorderWidth: "1.5",
   slideBorderColor: "#777",
   selectOrientation: "landscape",
   useNativeSizesOnly: "true", 
   superSize: "true",
   height: "500",
   width: "900",
   transitionsList: "Fade",
   randomSlideOrder: "true",
   transitionDuration: "1"}
); 
</script>
</div>
<div style="clear: both;"></div>
</html>

ccs · Apr-16-2011, 10:09 AM #14

Hm. I cannot do anything in gallery descriptions in either of these galleries:

http://www.quarkview.com/Information...16602257_yWe3E
http://www.quarkview.com/Information...16602508_9GBat

I cleared my cache in my browser. I attached a picture of the screen Im getting that never goes away when I try to update.

Weirdnesssss.haha..... I can't even save an EMPTY gallery description at this point!! is it an error in my CSS or something? Does it have something to do with the javascript void(0) error in the bottom left of my screen?

Allen · Apr-16-2011, 10:12 AM #15

Quote:

Originally Posted by ccs

@font-face { font-family: "ＭＳ明朝"; }@font-face { font-family: "ＭＳ明朝"; }@font-face { font-family: "Cambria"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; } Hm. I cannot do anything in gallery descriptions in either of these galleries:

http://www.quarkview.com/Information...16602257_yWe3E
http://www.quarkview.com/Information...16602508_9GBat

I cleared my cache in my browser. I attached a picture of the screen Im getting that never goes away when I try to update.

Weirdnesssss.

Go into gallery settings and replace the description in there with what I
posted. Then it will need some adjustments. to widths, etc.

ccs · Apr-16-2011, 10:13 AM #16

Quote:

Originally Posted by Allen

Try something like this. Two div's side by side. Adjust the widths to fit. Might have to resize the slideshow also.

Code:

<html>
<div id="textContainer" style="text-decoration:none; width: 300px; float:left;">   

<div id="PortTitle">
Executive, Family, Engagement, and all other portrait sessions start at $150.00 and include:
</div>

<div id="PortINFO">
◆ Two Photographers<br>
◆ A 60 to 90 minute photo session in a location of your choice (indoor, outdoor, or both)<br>
◆ A private online proof gallery to select your favorite photos<br>
◆ A CD with high resolution copies of your favorite 30, fully edited photos. <br>
◆ One 8x10, two 5x7, and 16 wallet sized prints. 
<br><br>

<p>Additional prints packages can be ordered through your private online proof gallery
Note that indoor shoots have the option of studio lighting.
<br><br></style="text-decoration:none"></p>
</div>

</div> <!-- closes textContainer -->

<div id="showContainer">
<script type="text/javascript"> JF.InsertSlideshowHere({
galleryURL: "http://www.quarkview.com/Portfolio/People/15663689_yCAuz#1173974855_XshVA",
   splashImageURL: "http://ccmixed.smugmug.com/photos/1212768420_HwAtR-XL.png",
   splashMinDisplayTime: "3.0",
   splashBorderColor: "#0F0F0F",
   clickToURL: "/galleries",
   slideBorderWidth: "1.5",
   slideBorderColor: "#777",
   selectOrientation: "landscape",
   useNativeSizesOnly: "true", 
   superSize: "true",
   height: "500",
   width: "900",
   transitionsList: "Fade",
   randomSlideOrder: "true",
   transitionDuration: "1"}
); 
</script>
</div>
<div style="clear: both;"></div>
</html>

thanks so much! As soon as I can update descriptions ,I will try this out! OK... perfect, I will try it the way you suggest.

Allen · Apr-16-2011, 10:24 AM #17

Quote:

Originally Posted by ccs

thanks so much! As soon as I can update descriptions ,I will try this out! OK... perfect, I will try it the way you suggest.

I would also get away from the stretchy page and switch to a static width
page like journal. Then set a static page width to your liking to fit whatever
size boxes you want.

ccs · Apr-16-2011, 10:24 AM #18

AWESOME. That worked. I've sorted out the spacing and floated the slideshow div to the right.

http://ccmixed.smugmug.com/Informati...16602257_yWe3E

Two questions:

(1) how would I create a border around the text (to match the border of the slideshow, for example)
(2) how can I keep the two div's the same distance apart in the middle (i.e. between them) so that in wide browser screens they don't drift to opposite corners with nothing inbetween?
...is this the static width idea you recommend? I do that using a width specification in CSS if I recall correctly.... ?

Thanks again!

ccs · Apr-16-2011, 10:31 AM #19

OK, I set the width of my other static pages using CSS like this:

.galleries #homepage {width: 900px !important; margin: 0 auto !important;}
.recent #homepage {width: 900px !important; margin: 0 auto !important;}
.mypopular #homepage {width: 900px !important; margin: 0 auto !important;}

but Im not sure how to reference the information portraits gallery specifically....

Allen · Apr-16-2011, 10:32 AM #20

Quote:

Originally Posted by ccs

AWESOME. That worked. I've sorted out the spacing and floated the slideshow div to the right.

http://ccmixed.smugmug.com/Informati...16602257_yWe3E

Two questions:

(1) how would I create a border around the text (to match the border of the slideshow, for example)
(2) how can I keep the two div's the same distance apart in the middle (i.e. between them) so that in wide browser screens they don't drift to opposite corners with nothing inbetween?
...is this the static width idea you recommend? I do that using a width specification in CSS if I recall correctly.... ?

Thanks again!

Change to a journal style. It's a set width page so the side by side box
separation can be adjusted. Just a matter of setting a page width so both
boxes fit side by side.

<div id="textContainer" style="text-decoration: none; width: 600px; float: left; border: 1px solid #ccc; padding: 20px 0 20px 20px; height: 358px;">

Looks like it would take a page width of over 1200px to fit both. I'd reduce the show to maybe 400 wide.


Similar Threads	Thread Starter	Forum	Replies	Last Post

Favorite Album Vendors and Albums	Jeremy Winterberg	Weddings	52	Apr-06-2011 10:38 AM
Want to create sub-category when creating gallery	jfriend	SmugMug Support	2	Jun-08-2005 05:40 AM
Backprinting @ smugmug	K.Van	SmugMug Support	62	Apr-05-2005 12:11 PM
smugmug.py create album really works!	rutt	SmugMug APIs, Hacks & Tricks	0	Dec-04-2004 03:17 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Apr-16-2011, 08:49 AM #1
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	Create Columns in Album Description? Hi! Can anyone tell me how to make 3 columns in an album description (e.g. where I could put three separate columns of text or pictures?) Thanks! Chris __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 09:00 AM #2
denisegoldberg Major grins Join Date: Nov 2006 Location: North Andover, MA Posts: 13,172	There are a couple of different ways to do this. Take a look at Allen's tutorial at http://allen-steve.smugmug.com/gallery/3539056 and see if that does what you are after. That should work well if you always want the same number of elements across the browswer window. If you want the number of elements to change based on the width of the window then you will need to use CSS to set up some floating elements. If that's the case, post back and let us know. Examples of the different methods from my site (you should be able to see the difference if you resize the browser window): >>> my About page uses a table for the images - http://www.denisegoldberg.com/Medley...24505685_9QGTY. >>> my Kaleidoscope page uses CSS to float the images - http://www.denisegoldberg.com/Medley...46145545_kcCkw --- Denise __________________ http://www.denisegoldberg.com ... http://denise.smugmug.com Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+

Apr-16-2011, 09:20 AM #3
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	Thanks! So in Allen's tutorial, I would just replace an image with text, if that's what I wanted to do then right? Could I even place a slideshow (like JFriend's) in one of the table cells? Cheers, chris __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 09:34 AM #5
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	NICE! That looks great Denise. Time for me to get workin'! .. the only thing I don't get is where the image hover is controlled in Allen's tutorial (although I do see where the text hover color is controlled) __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 09:45 AM #7
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	OK, here's what I want to do: Create two columns. The one on the left with my text, the one on the right with the slideshow. Here's how I have it coded, but it won't save for me. Am I doing something wrong? Here's the code I was trying to insert in the gallery description: <html> <table align="center" width="900"> <tbody> <tr> <td> <p id="PortTitle"><style="text-decoration:none"> Executive, Family, Engagement, and all other portrait sessions start at $150.00 and include: <br></p> <p id="PortINFO"><style="text-decoration:none"> ◆ Two Photographers<br> ◆ A 60 to 90 minute photo session in a location of your choice (indoor, outdoor, or both)<br> ◆ A private online proof gallery to select your favorite photos<br> ◆ A CD with high resolution copies of your favorite 30, fully edited photos. <br> ◆ One 8x10, two 5x7, and 16 wallet sized prints. <br><br> Additional prints packages can be ordered through your private online proof gallery Note that indoor shoots have the option of studio lighting. <br><br></p> </td> <td> <script type="text/javascript"> JF.InsertSlideshowHere({ galleryURL: "http://www.quarkview.com/Portfolio/People/15663689_yCAuz#1173974855_XshVA", splashImageURL: "http://ccmixed.smugmug.com/photos/1212768420_HwAtR-XL.png", splashMinDisplayTime: "3.0", splashBorderColor: "#0F0F0F", clickToURL: "/galleries", slideBorderWidth: "1.5", slideBorderColor: "#777", selectOrientation: "landscape", useNativeSizesOnly: "true", superSize: "true", height: "200", width: "500", transitionsList: "Fade", randomSlideOrder: "true", transitionDuration: "1"} ); </script> </td> </tbody> </table> </html> And here's the gallery: http://www.quarkview.com/Information...16602257_yWe3E The description just won't save (it keeps the edit box open and doesn't save with a refresh or anything) hm..thanks in advance for your help! Chris __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 09:55 AM #10
denisegoldberg Major grins Join Date: Nov 2006 Location: North Andover, MA Posts: 13,172	Interesting. Try to save it using the table but putting a placeholder in for the slideshow - just to make sure that the table syntax is ok. The one thing that I noticed is that you are missing the </tr> tag, but smug doesn't normally choke on html problems like that. Once that saves ok, go back in and add the slideshow code in the second cell. It's also possible that John's slideshow can't be embedded like that, but with size constraints I can't imagine that is the problem. By the way I just copied the code from your post and saved it to an unlisted gallery on my site. It saved fine. The slideshow doesn't run because I don't have the slideshow code installed on my site, just wanted to see if there was something that jumped out at me in the html. --- Denise __________________ http://www.denisegoldberg.com ... http://denise.smugmug.com Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+

Apr-16-2011, 09:57 AM #11
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	No matter what I put in my album description it's refusing to save with anything new added! Do I have something goofy in it?! I deleted the slideshow to be sure it wasn't that, and that wasn't the problem.. http://www.quarkview.com/Information...16602257_yWe3E __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 09:59 AM #12
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	Thanks for the test Denise. I will try clearing my cache or something,... maybe that'll help! __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 10:09 AM #14
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	Hm. I cannot do anything in gallery descriptions in either of these galleries: http://www.quarkview.com/Information...16602257_yWe3E http://www.quarkview.com/Information...16602508_9GBat I cleared my cache in my browser. I attached a picture of the screen Im getting that never goes away when I try to update. Weirdnesssss.haha..... I can't even save an EMPTY gallery description at this point!! is it an error in my CSS or something? Does it have something to do with the javascript void(0) error in the bottom left of my screen? Attached Images __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 10:24 AM #18
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	AWESOME. That worked. I've sorted out the spacing and floated the slideshow div to the right. http://ccmixed.smugmug.com/Informati...16602257_yWe3E Two questions: (1) how would I create a border around the text (to match the border of the slideshow, for example) (2) how can I keep the two div's the same distance apart in the middle (i.e. between them) so that in wide browser screens they don't drift to opposite corners with nothing inbetween? ...is this the static width idea you recommend? I do that using a width specification in CSS if I recall correctly.... ? Thanks again! __________________ Chris Quarkview Photography Popular Recent

Apr-16-2011, 10:31 AM #19
ccs ^OP ba'baby grins Join Date: Jun 2010 Location: Halifax Posts: 222	OK, I set the width of my other static pages using CSS like this: .galleries #homepage {width: 900px !important; margin: 0 auto !important;} .recent #homepage {width: 900px !important; margin: 0 auto !important;} .mypopular #homepage {width: 900px !important; margin: 0 auto !important;} but Im not sure how to reference the information portraits gallery specifically.... __________________ Chris Quarkview Photography Popular Recent