How to Position Photos Using Markdown
Position Photos Left or Right using Markdown
I am sure there is a better and prettier way of doing what I do. I am not a coder. I tried to find a tutorial on how to position photos using Markdown and didn't find one that I could understand. So I had to go out and kind of struggle around learning it for myself. Feel free to point out the errors in my coding. I am the first one to freely admit I don't have a clue. It may not be pretty, but it gets the job done.
I Am Not a Coder LOL!!!
In this video I show you exactly how I use Markdown to format my post in Steemit. Specifically, I am showing how to position pictures either on the right side of the page, or the left side. It is quick and easy and will give you that "text knows where the borders are" look.
All words and images are mine and can be also found on my various social media sites.
Twitter
Niume
YouTube Main channel
YouTube Photography
This pull-left thing is more of html. I tried using Markdown but found it's not so good in controlling the formatting. So, I decided to stick with HTML which is difficult for people who are not coder or not familiar with it.
Another thing is you don't need to physically resize your image though if you photo is high definition, reducing the size makes the post faster to load.
Have a look at one of my earlier post to see how I frame and sort of reduce the file size:
Now I show how and why import photos into Microsoft Powerpoint | 我示范如何和为什么导入照片到Microsoft Powerpoint 📷
As for resizing the image display, here's what I learn from another post before.
You can also just put the following in front of your image link https://img1.steemit.com/111x222 where 111 and 222 are the width and height you want in pixels. but its hard to know what height and width you want until you see it posted. For example.
1. 88x88
https://img1.steemit.com/88x88/https://steemitimages.com/DQmdPw8Svg2ytGVbExjEB1JbYYzwVTT8u4auf3D2Q6c1DKy/IGGY_1__PS__P1070598.jpg
2. 44x44
https://img1.steemit.com/44x44/https://steemitimages.com/DQmdPw8Svg2ytGVbExjEB1JbYYzwVTT8u4auf3D2Q6c1DKy/IGGY_1__PS__P1070598.jpg
Have fun! :-)
Oh this is very cool. That worked really well! I have been using Gimp to resize the image down to 400x300. Now I can skip that step! Putting the size right in the code will really save a bunch of time!!! Thanks so much and that deserves a follow!!!
You're welcome. My way is usually pop into Powerpoint to reduce the image file size but so far I have no real urge to resize the image display. Maybe in future. :-)
Yes I just saw your tutorial on Powerpoint and resizing. It is too old so I could not comment on it directly.
I agree. I don't think I will resize now that I know how to simply input the size directly into the coding; thanks to you ;)
You're welcome
This is an excellent tip @ace108. Thanks for sharing it :)
You're welcome
Is there a way to do this using Markdown?
Sadly not in here, I know with some versions of markdown you can just put
=(width)x(height)at the end of your image url likebut it doesn't look like it works here. Explains why they have that neat url resizer! A very cool workaround :)I'm just not sure how to integrate the rules resized into my markdown image code. I know enough html to be dangerous but struggle with it. I find markdown to be more intuitive so far.
So much great info in the comments, especially about the resizing. I'm going to use that. Resteeming this... To be sure I can find it to watch the video :)
Thanks since learning some new stuff from the comments and experimenting, you don't need to resize before you drop pic into the post. If you drop it between the 2 lines of code like in the video, it automatically sizes the photo to half the page width which saves the resizing step.
Great stuff @old-guy-photos! Living and learning and having fun! Nice tutorial, thanks!
Thanks for the kind words. I'm always willing to share what I know--even if its not much LOL
Handy stuff! You have gone straight to HTML! Perhaps now you can say you are a coder!! :0)
LOL thanks! I do enjoy learning new stuff :)
Excellent tutorial. I'm just trying to get up to speed up on posting skills so I can start contributing and this came along at a great time. Thanks for putting it together @old-guy-photos.
Thanks I followed you to see what you come up with :)
Great, thanks a lot! Don't hold expectations too high, but I'll see what I can figure out :)
Great post @old-guy-photos!
Thanks so much!
Informative. Thanks for sharing!
Thanks for checking it out.
I still haven't learned this one.
I am a slow learner, but I enjoy it. Thanks so much for stopping by :)
Thank you for this post. It really helped me out. Would love to see some more editing tricks from you