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! :-)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!!!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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. :-)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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 ;)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
You're welcome
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
This is an excellent tip @ace108. Thanks for sharing it :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
You're welcome
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Is there a way to do this using Markdown?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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 :)Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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 :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Great stuff @old-guy-photos! Living and learning and having fun! Nice tutorial, thanks!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks for the kind words. I'm always willing to share what I know--even if its not much LOL
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Handy stuff! You have gone straight to HTML! Perhaps now you can say you are a coder!! :0)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
LOL thanks! I do enjoy learning new stuff :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks I followed you to see what you come up with :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Great, thanks a lot! Don't hold expectations too high, but I'll see what I can figure out :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Great post @old-guy-photos!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks so much!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Informative. Thanks for sharing!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks for checking it out.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I still haven't learned this one.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I am a slow learner, but I enjoy it. Thanks so much for stopping by :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for this post. It really helped me out. Would love to see some more editing tricks from you
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit