How to Line up Images In a Steemit Post
How to Place Your Images Side by Side in a Steemit Post
Yesterday I made a quick little post with several pictures in it. I tinkered around with the markdown code to get several of them lined up horizontally. That was a chore for someone new to HTML!
I had everything nice and ordered .....it looked perfect!
When I hit the post button all my pictures were scrambled and text was scattered all over the place!
It took me several hours to rearrange things so that it was presentable to the public.
Do you know what I discovered?
The editor preview window isn't the same size as the posting window!!!
My code was okay, my image sizes were off!
I spent two hours resizing and testing and testing again before I finally to got things correct!
The pixel width of the posting window is 630 pixels wide! Exceed this and your project is ruined!
This is the code I worked out to display pictures three across.
<div class="pull-left">Image here
Image here
Image here</dev>
I used my preview software on my MacBook Pro to resize the images to 210 pixels wide. They should look like this in your blog.
The code will look something like this with your image files loaded. Be sure to strip out everything but the necessary elements of the image file, i.e. everything before the 'https' and delete the last parenthesis')' too.
<div class="pull-left">https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg</dev>
Use this code to align two different sized images!
The first image is 420 pixels wide and the second is 210 pixels wide. Together they are 630 pixels, the limit of the Post window.
This is the code I used for this effect.
<div class="pull-left">Image here
Image here
</dev>
I'm assuming you can align any number of images as long as they don't exceed the 630 pixel limit.
I've been toying with centering captions under each image but haven't had much success yet.
Update:
This will not appear correctly in a phone browser! I'm still working on that problem!
Thanks for reading!
CARRY ON!
thank you very helpfull
Thank you for the kind comment! And the resteem and upvote too! You're the BEST!
You have been resteemed by @resteemy, courtesy of @beekerst!
Want to increase your following? Read more about me here
Not following where the images are actually side by side ...
I actually don't think the CSS code for side by side images is available in Markdown, as I've tried this many times and it doesn't work, even though it renders perfectly offsite. I've also never seen a post on here with side by side images.
As for centering your caption, you use:
You don't see three images of a dog side by side up there?
If you don't want your code to render preface the tags with a forward slash
<center>This</center> or four spaces to show it in a slider (greyed out area)
No I don't. I see them stacked on top of each other vertically. If that's what you meant by side by side. I figured you meant next to each other horizontally.
Mine are horizontal ...... Hmmmm....I've asked others and they appear side by side to them also......I use a Macbook Pro....Safari Browser....I did not know it could appear different ....so....I'm confused now.
Here's a screen shot:
Here's how I'm seeing it on my iPhone. I also saw it this way on my PC last night using Chrome as well. This is very interesting (and annoying) that we are getting different outputs. I just started posting on here last week and even made a post about how annoying I find Steemit to be as far as these editing issues, because in my intro post I wanted to do a side by side as well. And it was perfect in MarkdownPad, everywhere. Then when I actually posted it the images splayed out every which way, so I eventually just conformed and went back to the annoying vertical stacking.
Ha! It is annoying! But it’s what we have to work with! Carry On!
Either you are viewing on a phone or your screen resolutions are set tighter than most..... that’s all I can think of???
That one I'm viewing on a phone. The other I am viewing on my desktop and my screen resolutions are normal. It still looks like that. 🤷🏼♀️ <~ ps I just inserted an iPhone emoji in here and the preview is taking it. I wonder how it will render lol
Of course my code is rendering when I post lol. Aye. Look here https://steemit.com/steemit/@steemitblog/new-advanced-formatting-features
I actually tried to incorporate this code
into mine, to put captions at the bottom of each image. It won't work inside the div tag.....I'm playing around with nested div's but no luck so far....I'm just learning this stuff but it fascinates me!
As far as CSS code...phffffft! It doesn't work here or I should say ,it doesn't work as expected here.....I sure wish we could change font colors and styles. I'm looking for work arounds.
CARRY ON!
Thanks for the info @beekerst, I'm gonna give this a shot at some point for sure!
Thanks for the comment @sunnieside......here is a useful link for newbies I hope you like it! Help to Boost Post
Hi!
Why are you always closing the <div tag with </dev ???
Why wouldn't you? It defines your code block for others to follow and it doesn't hurt.....does it?
I'm new at this.....enlighten me. I know some tags like <br> wouldn't like it but <dev>?
Formatting pictures on Steemit is driving me nuts! Particularly how the Editor Preview window is not the same width as the Post window. You're the first one I've read who corroborates my suspicion on that, as often my posts will look perfect while writing them, then look messed up after posting.
I tried using your code above, but it didn't line up my photos. I also tried using... div position:relative
but that didn't work either.
Have you come up with any additional info? Thanks!
I finally just started centering all mine. That seems to work in cell phone format and computer screens too. My OCD is satisfied that way and my post look alright too.
haha,
thanks for the reply @beekerst. That's what I ended up having to do with my latest post, just center the photos. But you might have a point, about how it would look on a cell phone anyway.