Monday, February 1, 2021

Revisiting the Blooming Agave and HTML

Well - I got the photos side by side, but I'm not at all sure what sequence of keystrokes made that happen.  It would be better if either the top edge or the bottom edge were aligned, but they're not, and I'm not going to mess with it.  According to the help function, aligning stuff now requires editing of html - so we're going with this paltry effort.

Anyway, if you go back to my post of January 5, 2020 you'll see the first photo of the blooming agave parrasana, that's the photo on the right.  The photo on the left was taken yesterday. My phone camera could not focus on the buds that are coming out. Look how much the spike has grown, it's impressive.

 I took this photo today, with a camera, so you can see the flower buds.

The amount of energy expended by these plants when reproducing is always amazing to me.  It's no wonder they bloom and die.


I'm pasting the text from the help file on the subject  of side by side photos so I'll have it for later.  I'm not suggesting that you want to try this, but I don't want to lose the code.

The immediately useful thing I learned from reading the help file, is the formatting button in html mode.  I've complained (a lot) about the way the new blogger displays html.  Using the formatting button makes it look nice and easier to read.  It's the three stacked lines fifth from the left (don't count the <> button).  It spreads out the html so it's readable.

DarkUFO says: Ok. I think I've found a workaround that should work for you.

1) Create a New Post
3) Upload all your Images and Select the Size you want and set alignment to NONE
4) You should then get a block of HTML in your Post
5) Click on the Remove Formatting Icon. It's the one that looks like 3 slanted lines
6) This should display the HTML a bit nicer for you.

Each image is surrounded by an opening DIV line.

<div class="separator" style="clear: both;">

and a closing one


You need to remove all those lines of code.

 Then finally for each image you will see this code

style="display: block; padding: 1em 0; text-align: center; "

Remove the display:block; part so that it looks like this.

style="padding: 1em 0; text-align: center; "

It does work, but at present it's turned them in to two very small photos.  I read further on and apparently this is a feature and not a bug. That's what they look like in my test edit post.

A fact learned, but I still can't make the side by side look good. 



  1. Too much work for me. Thanks for going to all of that effort.
    Love the agave flower!

  2. There is no way I would go anywhere near something that said to use html. When I post you get what you get. The agave is amazing. Probably got all excited about the rain.

  3. At some point in the past I did a workaround for posting side-by-side, but as I recall it also required me to go into the code. Here's the post:

    I linked to the page that gave me the solution. It may be the same as yours. I remember I had to tweak the size of the photos to get it right.

    That's not the same agave plant, right? Just the same type?

  4. I can't deal with it, literally. I'll work a little to make the post look good, but not htmlie.

  5. My brain shuts off when I see the acronym HTML, and I decide there must be another way. Also, on my blog site, the pencil is back. I don't see it on your site, I wonder why?

  6. sounds like a lot of trouble. I just gave up side by side photos.

  7. Hari OM
    Hi Allison... I saw you'd responded to a comment of mine over at Angus and Sophie's page so came looking... and this post conundrum I can help you with!!! If you click to my recent post you will see a couple side by side as you scroll down... and it is quite easy to do from the standard compose page.

    When you enter your first image, don't resize, but align left. Then click on the image so that it turns blue, then use the arrows on your keyboard to right shift the cursor. You will see it flashing all the way down the right margin of the first photo. Now enter the second image, which will at first centre below the first. Click on it and align right. Then drag it gently to come up level with the first. Then you simply resize by clicking and using the drag buttons that appear! In the compose page they will look out of position, but keep checking the preview page till you have the sizing and spacing that you desire.

    That looked like a lot of words, but the actions, once learned, are super easy!!! (If you are familiar with HTML as you appear to be, you can also then enter that mode and edite the height and width that way... I find 440 width to 600 height is usually okay.) Have fun! YAM xx