Tables are great if you are showing data and need rigid alignment, or if you don't mind your mobile device visitors having to either scroll, or to pinch their screen so much that they cannot read the text.
But there is a way to lay out pictures so that they display side by side if there's room on the screen, or start on a new line if there's not.
I've done this recently on a blog where really wanted to make a display for last / next week and last / next year on two different dimensions. It looks like this on a smartphone vs a tablet. Notice that on the tablet, the two middle pictures are on the same line.
How to lay out several pictures side-by-side if there's space, or one-under-another if not
Start to prepare your post in the usual way.Add your pictures to the post in the usual way. Ideally, put them just before or just after some marker text that you can use to help you to find the code for it in the next step.
Hover over each picture, and choose the small size (you can change this later)
Go into HTML mode.
Find the place where the pictures are. (If you've used marker-text, just use your browser's search feature to go to it.)
Add this code, just where you want the line of images (or other items) to end up.
IMAGE CODE FOR PICTURE
IMAGE CODE FOR PICTURE
IMAGE CODE FOR PICTURE
That has space for three pictures - you can delete one or add more lines if you want to - just make sure that the very last one has margin-right: 0em; and the others all have margin-right: 2em;
Now, for each picture that you added,
- Find the HTML code for it. (This post has a detailed explanation of what the HTML code for a picture)
- Delete the height = "nn" part from it (nnn = whatever number is there)
- In the width = "nnn" part, replace nnn with "100%", so it says width = "100%"
Note: this is saying to make the picture take up the whole width of the division you have assigned it to. You can make it smaller than 100%. But you want to do it put a bigger margin between the two pictures, then you can do this by increasing the value in margin-right: 2em;
- Move the picture code to where it says IMAGE CODE FOR PICTURE
- Decide how wide the picture should be, and change the value in Width: NN within that DIV statement to the right amount.
You can either use pixels (eg width: 100px;), ems (eg width: 20em;) or percentages (width: 40%;) If you use percentages, then the total amount for all the pictures should be a little less than 100%, so allow for some space between the pictures: for example, with a 2em margin and three pictures in a row, you may need to make the total approx 90%.
Go back into Compose mode, and check that your pictures look roughly right - if necessary, you may need to adjust the picture sizes. (See the note below under Troubleshooting for more about this.)
Delete the marker text.
Job done! Your pictures will now display side-by-side if they can all fit into the user's screen, or one under another if not.
Troubleshooting
Getting the pictures right can be quite fiddly, so I recommend preparing the blog post in private, so you can do this in stages, and save your work regularly as you go.Your pictures will be vertically aligned on the bottom axis, and this means that the approach will work best with pictures that are the same height. (I'm working on another article looking at alignment issues - it's they're quite tricky.)
Post editor view vs your visitor's screen
An issue that many new bloggers struggle with is that what they can see in the post editor is not the same as what their blog-visitors will see.The post editor screen is only a certain width. Most times, it is smaller than the width of the main body of your blog. So, if you have used fixed-widths (ie in pixels, or ems, not percentages), more pictures fit on the same line in your blog than in the post editor. But if a visitor is using their smartphone to read your blog (and I do a lot of my blog-reading on the phone these days) - the screen width is less than it is in the post editor.
This is why using
statements instead of 's is a good idea. But it does means that sometimes you will have to compromise on whether things can be put together.
ليست هناك تعليقات: