Format Table Width
Please can someone tell me how to align the table of images on my homepage exactly to the header picture&links?
I originally set up a photo gallery but then realised that I couldn’t have links from the images so inserted a table instead with the images in it but it sticks out to one side.
If the solution involves html please can you provide very straightforward instructions, preferably the exact text itself to insert! I can kinda read html but can’t write it.
The blog I need help with is victoriajarman.com.
It would be better not to use a table. Oxygen theme is responsive, which means that as the screen size gets smaller so does the content: this makes a site using this theme display well on phones, tablets, laptops etc.
A table can be coded to be flexible width but it is unnecessary to bother with all of that.
You can do most of this in the visual editor. Insert your three pictures (full size), each one set to alignleft, one after the other with no line breaks between them. Then click to edit each photo in the advanced mode so that you are adding some margins.
picture 1: margin-left:0px margin-right:2px
picture 2: margin left and right 2px
picture 3 margin left 2px and margin right 0px
Change the width and height of each picture to 32%
Your code will look something like this if you look at the text editor.
Each picture (with its link) will begin with
You should see
</a><awith no space or line breaks between to show the second and third pictures on one line.
<a href="http://LINK/"><img class="alignleft" style="margin-left:0;margin-right:2px;" alt="" src="http://PICTURE1.jpg" width="32%" height="32%" /></a><a href="LINK/"><img class="alignleft" style="margin-left:2px;margin-right:2px;" alt="" src="http://PICTURE2.jpg" width="32%" height="32%" /></a><a href="http://LINK/"><img class="alignleft" style="margin-left:2px;margin-right:0;" alt="" src="http://PICTURE3.jpg" width="32%" height="32%" /></a>
Now when you drag the corner of your screen to simulate looking at your page on a smaller screen you should see the picture automatically shrink.
@tess: You overlooked the fact that the images are captioned. Vixjarman can’t do what you’re describing, at least not as long as the Text editor displays the shortcodes. First you need to replace the shortcodes with the real code (and when you do that, the values will have to be different than in the case of non-captioned images). You can work this out, or I’ll do it later.
Thanks, I’ve got this working! It threw me at first because when I changed the height and width to 32% it squished the images up in the editor but seems to look ok in the preview and responds as you said it would.
New problem – I don’t seem to be able to have the captions on my photos anymore. When I add a caption in it pushes the second and third pictures down to new lines. When I go into the text editor and delete the gaps (so I see <a) then it removes the caption as well. The html doesn’t seem to have changed other than the spaces but the caption disappears anyway.
How can I add a caption into the code for each picture?
@justpi – I just hit submit as your post appeared! didn’t understand what you were saying about shortcodes, etc… :)
I’ve also just discovered that the pictures in the table look perfectly aligned in Firefox and IE it’s just Chrome that shunts everything over to the right…
When you insert captioned images you don’t see the actual code in the so-called Text editor, you see a special formula that starts with “[caption” and ends with “/caption]”. This is called a shortcode, and it cannot be manipulated the way Tess suggested. Her idea is correct, and she’s right that you don’t need a table, but the exact instructions she gave won’t do for captioned images. As I said above, I’ll work this out for you later if Tess doesn’t.
In the meantime, care to know why your table didn’t produce the result you expected? (And no, it’s not just Chrome.)
Oh, my bad. I did see the captions, but completely forgot about the extra coding/planning/compensation for them. I usually avoid using captions except in galleries—I’ve been using wp.org and a blog on wp.com for work so must do things as quickly and simply as possible…
I am so sorry. Unfortunately I’m working on other things this afternoon. So JustPi, if you can please help the OP.
Thanks both. If there’s a way to add captions that would be great.
When I added captions to the images it didn’t add the “[caption” bits in…
@justpi thanks, it’d be useful to know why tables didn’t work for future reference :)
When I added captions to the images it didn’t add the “[caption” bits in…
No way. At the moment you’ve got the table on your page, with captioned images. Edit the page, switch the editor to Text and see for yourself.
Here’s what’s going on with your table:
The maximum width of a no-sidebar page on Oxygen is 940px. You inserted the images at a width of 300px, which seems reasonable for three images per row, but:
a) Table cells on most new themes have a default padding (space between the boundaries of the cell and the content that’s inside the cell).
b) You inserted captioned images. Captioned images have a fixed width, and this width includes 5+5px of extra space left and right (on most themes it’s a visible frame that encloses image+caption).
c) So the leftmost image doesn’t start flush left (because of the padding and the extra space around the image), and the total width of three images plus space around them plus cell padding exceeds the total width of the page. When this happens, some browser versions can shrink captioned images inside a table but other browser versions cannot.
Also, as Tess already pointed out, Oxygen has a responsive layout. This means that even if you inserted narrower captioned images to produce a result that would seem acceptable to you, again things wouldn’t be ok when viewed on a narrower screen: the theme would shrink but on some browser versions the table wouldn’t.
So, if you used a table, you’d have to insert plain (non-captioned) images at full-width, type the captions as regular text inside each cell, and use some extra coding (inline CSS, not HTML), to correct the padding and other details.
To learn more about table coding, you can study my tutorial:
But as Tess said, you don’t need a table to arrange a few images. You do need to do things manually in the Text editor, however, because the code that’s produced when you insert images the normal way (via the Add Media button) won’t let you. First copy the URLs of all the pages you link to, and the URLs of all the images. Then use this model for each row of images:
<div class="wp-caption" style="width:32%;float:left;"><a href="PAGE URL HERE"><img style="width:100%;" alt="DESCRIPTION HERE" src="IMAGE URL HERE" /></a><p class="wp-caption-text">CAPTION HERE</p></div> <div class="wp-caption" style="width:32%;float:left;margin-left:2%;"><a href="PAGE URL HERE"><img style="width:100%;" alt="DESCRIPTION HERE" src="IMAGE URL HERE" /></a><p class="wp-caption-text">CAPTION HERE</p></div> <div class="wp-caption" style="width:32%;float:right;"><a href="PAGE URL HERE"><img style="width:100%;" alt="DESCRIPTION HERE" src="IMAGE URL HERE" /></a><p class="wp-caption-text">CAPTION HERE</p></div> <div style="clear:both;"></div>
Thank you, all fixed! Brilliant clear instructions :)
Ah I hadn’t noticed that was your blog – I was using that to try and format my table before!
The topic ‘Format Table Width’ is closed to new replies.