Sticky post

There is another way to make a sticky post. Use a text gadget. Drag it to the top of the page, like this one.

Wednesday, April 6, 2011

Wrap text around photos

The post editor box can be enlarged by dragging the bottom right corner of the box. This way we can see more clearly when we drag the photos around in that little box. Although I know a lot about photo placement, I find that it is still very difficult to wrap text around the photos like they do in a magazine or newspaper. I like the feature for adding a caption under each photo; but the padding below the caption seems not to be the same for every photo.
Method 1 
I have uploaded 6 imagess here in two neat columns. Now I will try to type some text around these 6 photos just to demonstrate how difficult it is. I will begin by labeling these images from 1 to 6:  Click on any photo and select "caption". Add the caption as required. I shall continue typing now to see exactly what will happen when I type here amongst the images. Apparently, it does not give me the desired result. The text went on top of all the photos. The wrapping is not ideal but it is sort of working ok. I also like the formating icon on the tool bar which allows me to arrange the text more neatly on the page near or around the photos to fill up all the empty spaces. I am trying to type more words so that the excess text would flow down around the photos; but it doesn't happen. All it did was, keep on pushing all the photos 1 to 6 down further and further! I cannot write any thing in between photos 1 and 2 here because the text kept on pushing all my photos down the page and will not flow into the gap between the photos. 
photo 2

photo 1
*At first, the cursor fought me all the way and refused to come down here from the previous line, above. Hurray! I used the down arrow to claim a new line to the left of photo 2 and I am set to write text between the images. I am going to use the same technique to put text on the right side of photo 3. The idea is to remember the padding size near each photo and giving it a wide berth. Otherwise, text will continue to push all the remaining photos 3 to 6 downwards as you type here in between photo 1 and photo 2. You cannot always type to the side of photos as you wish to do. The cursor always fought me and refused to go where I wanted it to go. It is a struggle between man and mouse, with the mouse winning most of the time. Seriously, no one can teach you how to do this part here. You have to try this out yourself on your own test blog and go through all the above steps to see exactly what I mean by struggling. It is not easy to put all this fiddling around into words. Please try it and you will understand what I am trying to explain here. If you see a very long flashing cursor next to the photo at any time, be very careful here, because one mistake, you will delete this photo and have to upload it again and there is never any guarantee where it will go next time. Did you notice how much space the text allows photo 2 because of the caption and the padding around it? Also there seems to be less padding below photo 1. How do you explain that?
Method 2
I know of a sure way of getting the same result as I have achieved so far by fiddling like this for the past  hour: Type the text first and then (under edit HTML mode) cut the photo codes and paste them any where among all these text. It has worked for me on countless other occasions in years gone by. The time required is only a small fraction required for method 1 by typing text and just hoping that it will flow around all the images. It doesn't, as most of you have found out the hard way. As I typed I also noticed now that photo 5 is being pushed down, as more text is being added here. I will need to pause here to try to rescue photo 5 first before it disappears completely. This is an endless cycle of fiddling with the backspace button to bring photo 5 back up again into the post editor, so that I can keep an eye on it. I need to rearrange the text, using cut and paste inside the same post editor. (Those of you who have worked as type setters at a printing press will definitely have a slight advantage here). Be aware that what you see in the post editor is not exactly what you will get (no wysiwyg here!) after you publish post.
photo 3
photo 4
* Take note that the [preview] button does not show a true picture of the final result ever. So, never ever use preview as a guide. This is exactly where most bloggers have gone wrong. They were using preview as a guide! You are much better off using your intuition here because the preview feature is matched to the old classic template which is narrower than the layout/design templates we are given now.To see exactly how everything fits together, I always press [publish post], followed by [view post]; taking my time to study and mark exactly where I need to cut off the text and then return to the post editor to do the actual cutting and paste. All these back and forth movements get very tedious if you have many photos in one post and have a lot of text to fit around your photos. In cases like this, I strongly recommend using the other shorter method of using HTML mode and cutting the image codes and pasting them among the text. You do not need [preview] for that. Just be sure that you have cut off all the codes and tags for each photo, starting with < and ending with a matching closing tag >
Method 3
The third method is the easiest one. You place your cursor at any position inside the post editor, among some text, if they are already there, upload your photo using the new editor and it appears right there! No more fiddling around and trying to preview the final arrangement or worrying whether photo 6 is being pushed down and down by your typing. Do some typing first, if you prefer; then place the photo. Then add some more text to fill up the empty spaces and you are done. If you happen to have too much text in any spot, just use cut and paste to move the text somewhere else.

photo 5

photo 6
*To avoid problems, the asterisk can be placed here first, immediately after uploading the photos. Whenever you get too close to a photo, the cursor will disappear. This is why so many bloggers are not happy working with this tiny post editor. Their cursor keeps on getting too close to the images, causing them to disappear in a flash when they touch the [enter] or [backspace] keys. Actually, at any point, you can abort and go back by clicking [view blog] and [leave this page]. You will lose all your latest edits (typing) and have to redo them again. That is fine, so long as you do not need to upload images again.  Most bloggers do not mind redoing the text repeatedly using cut and paste. Learn to use the [publish post] and [view blog] keys more often, thus avoiding too much repeat typing or uploading of the same images again and again. Until now, I bet that not too many bloggers know about this way to backtrack to save their images. If the photo disappears from the post editor, at any stage, just backtrack by clicking "view blog/leave this page". (You do not need to upload the same photo again and again).

Frustration level grows with each upload because there is no telling where the photo will go, when uploaded again. At times like this, bloggers rather go back to dragging the photos around inside this tiny post editor, as they did before; but the updated editor would not allow this drag and drop method any more. This is the major problem with older users using the new updated editor. A few bloggers just flatly refused to learn to use the new updated editor. They kept on asking: why fix it, if it ain't broken? They knew for sure that the old method worked before. Their photos will not disappear suddenly like it is doing now with the new editor. Hence the frustration levels are rising higher for these bloggers. They are still asking for an easier way to arrange photos on their blogs, not realizing that Google has already given them what they have been asking for, all these years. Use the updated post editor. Case closed!

Hint about the *
If you prefer to upload the 6 photos first and add the text later, you must remember to place an * to one side of each photo to mark off the spot (for text to be added later). You do this as soon as the photos appear inside your post editor. If you wait for a while or publish post, you may not be able to place your cursor there at all when you wish to add more text later when you return to edit this post. The * sort of reserve a spot for your cursor, for later...


Dr. Lisa said...

OK, I tried to post a question a minute ago and it didn't seem to work so I will try it again. I was given a link to your post when I asked a question about a problem I'm having with my blog. When I scroll down or up, the pictures and text often mash into each other as I'm scrolling. It happens when I scroll by using the down and up bar on the right or when I click on the blog and use the wheel on the mouse. Suddenly, the text and pictures seem to come apart and mash into each other. It makes it impossible to read anything and it looks awful. Do you know why that happens? I thought it was endemic to my blog, (maybe I used too many pictures) but I noticed that it happens when looking at your posting, too. Thanks for any insight you can offer.

David Chin said...

When I scroll down I do not see the merging of images and text as you have described. Every thing seems normal to me. Perhaps it has something to do with your browser. I am using Google Chrome.

Marcia Fremont said...

I keep reading that the new editor drops the picture where the cursor is when you upload the picture...but that just doesn't happen. Post Editor chooses what size, what side and ALWAYS drops below the last text. No matter how many times i try. I can of course change the left right small medium and i edit my size further by html...but i cannot position the images where i want, even to stack or put them horizontal and i cannot text wrap...a feature important to me. Frankly i don't like the new editor but NOT because i haven't tried to learn to work with it. It uploads faster that's all i can say for it..

David Chin said...

The updated post editor is not working for you because you are still using a classic template. You need to upgrade to a newer template like the Simple template in [in season Israel]

Sad Catholic 101 said...

I think I'm having the same problem with regard to paragraph spacing. When I load my text using the "Edit HTML" tab and then view it using the "Compose" tab, the paragraph spacing suddenly becomes double spaced instead of the single spaced I loaded. If I go in to make any edits, the paragraph spacing gets screwed up again. Same when I load pictures. It means a LOT of extra time adjusting paragraph spacking. How can I set it so that the paragraph spacing will remain the same as the original upload? Many thanks.

David Chin said...

Yes, Blogger is having formatting problems right now, especially when you copy-paste new posts:

Sad Catholic 101 said...

Hi David, have you noticed that the Twitter feeds on Blogger don't seem to be updating? Thanks.