[Notes to self and any fellow Blogger users.]
To remove the extra space that Blogger now adds below a centered image, switch from Compose to HTML and change padding: 1em 0px; to padding: 0em 0px.
To remove the extra space that Blogger now adds below a left- or right-justified image, switch from Compose to HTML and change margin-bottom: 1em; to margin-bottom: 0em;.
To resize an image, click on it in Compose and choose an image size by selecting the dotted-window icon or gear icon. To make further changes, switch to HTML and enter new values for height and width. Original height and width should stay the same. Changing the display values by hand is how I get 800-pixel-wide screenshots to display at 400 pixels. I figure out the values I need for a given image with the Mac Preview app.
I remove all the <div></div> stuff that now begins and ends the HTML for an image. If any problems result from doing so, I trust I’ll begin to notice them.
Tuesday, September 8, 2020
Images in the new Blogger
Subscribe to:
Post Comments (Atom)
comments: 18
Thanks so much, Michael!
Did you manage to resize images, too?
Yes. I’m going to add a bit more to this post, which fortunately has a broad enough title to make that possible. :)
I normally work in HTML mode anyway but I'll keep an eye out for anything new.
HTML for me too. But it looks like Blogger expects users to use Compose. My only use for it has been to resize images so that I can then enter my own numbers for height and width in HTML.
Yes, I've been resizing all the images in Compose and then hand-editing the HTML to take out the divs and padding and so on... sigh.... Taking it out to BBedit when I have a lot of images so find/replace is easier.
What a pain.
And the fact that it doesn't put in a linefeed with the P tags or the breaks just makes it soooooooooo hard to look at!
Somehow I don’t get the paragraph elements. I made a shortcut to add < /br>< /br> and a Return for clarity. I guess we’re all making artisanal HTML now.
If I paste text (from a text editor) into Compose, it does BR tags and a Return... but if you want to paste into the HTML editor because you've included HTML in your text, old Blogger used to maintain or translate linebreaks into P tags or something.
You don't know what you've got 'til it's gone.
[And the comment engine it just rejected the HTML tags I had in here, so I've changed them into pretend tags.]
Yeah, you have to type & # 60; and 62; (minus the spaces) to get sharp brackets to display (in posts too).
There used to be an option to read Returns as line breaks (or something like that), but now it’s gone.
"There used to be an option to read Returns as line breaks (or something like that), but now it’s gone."
Michael, maybe this is what you're thinking of:
https://1.bp.blogspot.com/-JkHFjlFuD1o/X1s81wkibmI/AAAAAAAAaVc/CzRmfmuH2QIzkgjS-q9t03fAEqPMPHrkQCLcBGAsYHQ/s0/Screenshot_2020-09-11%2BBlogger%2BArts%2BTEST%2Bblog%2B-%2BEdit%2Bpost.png
On Blogger's old "Post Settings" menu, in the "Options" section, the "Line breaks" option. I ALWAYS went with "Press ENTER for line breaks" so as not to litter the page with formatting symbols.
I think the recent "improvements" are telling us that Blogger is not a money-maker for Google, and Google wants us to go somewhere else to do our blogging.
Art, yes, that’s it. (And I remember now that Enter, not Return, is the correct term.) I made that choice so long ago that I forgot all about it.
In the Compose window, Enter does still make line breaks, which then show up as code in the HTML. My old posts all have <br /> codes now. I think Blogger really, really wants us to write in the Compose window, something I’ve only rarely done.
I'm in the process of clumsily learning some HTML... something I had never thought of.
It’s fun to figure it out, and it gives you much more control over how things look. There are any number of helpful sites — HTML.am looks like a good one. I’ve sometimes tried out bits of formatting in this online editor.
I’m going to try to make sense of the differences in image coding for the old and new interfaces. I noticed today that one image I was posting (subway map) would display with the proper sharpness only with the old format. I’ll share whatever I can figure out.
RE: Image size and sharpness
Old Blogger, when you uploaded an image, would save four different versions of it, the same image but in four different sizes. When you went to Compose Mode and selected a different image size, the editor used the appropriate image from the set of four. These images were always sharp.
If you needed an in-between size, you could force an image to the size you wanted by using the HTML Mode and entering new values for height and width, as noted in the post. I found, however, that the images tended to be fuzzy if you changed the size this way.
I solved the "fuzzy" problem to my own satisfaction by picking a standard size to use for all my graphs and some of my other images. I would
1. Resize the image to the size I wanted, using Paint or some other image editor;
2. Upload the resized image; and
3. Always use the "use original size" option in Old Blogger to display it.
In Old Blogger, when you used the original size you don't get the "width=..." and "height=..." in the HTML: You just get the original size. Not sure how it works in the new Blogger. (I always ignore the "original-width" and "original-height" stuff.)
If your images typically vary in size, you would have the problem of figuring out the desired size every time. My images are typically graphs and I wanted 'em all to be a large, standard size, so I didn't have that problem.
In the new Blogger, they make the image a different size by using "height=" and "width=" in the HTML, which is why it gives fuzzy images. But they probably save only one version of the image instead of four, which would save them a lot of storage space.
I think the best way to get sharp images would probably still be to resize the image off-line, then upload it, and use the "original" size of the resized image.
Note, the above is mostly just my guess as to what Blogger is doing behind the scenes, and it could be wrong. Also, I recount this all from memory, and that could be wrong too.
Thanks for your investigations, Art. What I’ve been doing: loading images at twice the size at which they’ll display, then changing height and width accordingly. I’ve been under the impression that that’s what’s needed for images to display to display sharply on a Mac with Retina display. I may be wrong. I’m going to have to experiment with a no-readers blog I created to try out the new Blogger. Uploading an image in the size I want to display would save me a lot of tedium. Here’s hoping.
Should have said: My Blogger/image investigations have only been in Windows. Could be different for a Mac with Retina.
My thinking was that the Image Resize option in Paint is very good, and the Image Upload in Old Blogger (where four different size images were created) was also very good, but that the resize-on-the-fly routine that is used when we put, say, width="515" in the HTML is not very good. So I like to do all the resizing on my own computer, off-line. Dunno yet how it will work with New Blogger.
You said: "Blogger really, really wants us to write in the Compose window".
I think you're right. I'm trying to cooperate, and the result seems better than when I use the HTML window.
With the Mac it’s easy to resize with Preview. And in iOS, Khoi Vinh’s ExactPic makes it easy.
Another complication is that the new Blogger now adds height and width numbers to the URL for an image. You can tell by the way I keep planning to figure these things out how much I’m looking forward to trying to do that. :)
I see the four standard sizes are back now.
But all four (five if you count "original") all use the same path or url. In other words, they create ONE copy of the file rather than four or five.
I tested it with one image, and it came out clear in all versions.
You never know.
Huh! With Retina display things might be different — I know that the images in many of my older posts no longer display sharply.
Post a Comment