help with laying out photos and captions please

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I created this page with a 2 column layout, thumbnail photos in the left vertical column, and paragraph captions in the right column. I'm using a lightbox effect (thanks to Nathan) to pop up the thumbnails when they are clicked on. I've been using the top margin feature to adjust the thumbnails and captions so that they line up next to each other. But every time I add a new photo and caption, it gets all out of wack. Is there an easy way to make this page work so I don't constantly have to adjust the margins to make it lay out correctly? Here is a link: http://tinyurl.com/48duo9k Essentially, I just want the thumbnail to be centered vertically in the height of the caption across from it.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like

Posted 7 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Yes, but it does mean restarting the page.

If you save the page as pagename2 (Page Tab -> Save Page As)

If you then change the page layout to 1 column.

Then, add a Column Divider.

Insert 1 image into the left hand side of the column divider, and add the caption to the right hand side.

Add a new column divider and repeat the process of image in the left and text in the right.

This will always work and makes it much easier for you to rearrange the images by simply dragging the column dividers up and down.

Good Luck, if you need anymore info and advice, please let me know.

Andi
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi Andi,
Thanks for the reply. I just tried doing what you suggested for the first row, and it looked like it was going to work, but the picture is not centered vertically with the paragraph on the right, take a look: http://tinyurl.com/4pkzck9 Also, it took forever to drag the picture all the way up to where it goes since it moved them down below all the text boxes.. Is there some code I put in the html for the thumbnail to make the picture center vertically?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for the help, Andi!
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Ok, take a peek, it's pretty much all finished! http://tinyurl.com/48duo9k Thanks again for your help as this was beginning to drive me nuts.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problems.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Not that I am aware of. You can change the margins of the image and it will stay within the area of the column divider, and will not affect any other images. There probably is a code but I am not aware of it.

As for the long time it took to scroll, try zooming out (using browser controls or Ctrl + +). This will reduce the amount of scrolling you have to do and makes it much easier!
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
What browser do you use? I'm using firefox and even zoomed out, it's still hard to drag the image all the way up smoothly and quickly =( Maybe I should try chrome..
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
For that I would use Opera because you can scroll using the mouse wheel.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Ahh the mouse wheel, that works! I can use chrome, click and hold the mouse button and roll the wheel up! Thanks, this won't be too bad now. I'll move them all and see how it comes out.. stay tuned...
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
http://tinyurl.com/4pkzck9 Ok, I put everything back in using the column divider and I removed all the margin settings I had on everything. So I guess now I have to go back in and add some margin code again to make it all look right. But now at least when I add a new row, it will be contained so adding a row won't cause other rows to get messed up.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Yeah that is true, just change the Photo's margin settings so that they are central to the text.

Oh and Brianna, no problem!