Difference between revisions of "Including images in your posts"
From Steem Center
(New function on Steemit!) |
(→Links:: @justineh) |
||
| (10 intermediate revisions by 3 users not shown) | |||
| Line 3: | Line 3: | ||
Also, make sure that you are not violating any copyright laws if you are using someone else's material/images. It is a good idea to list the sources and provide credit to the original authors. | Also, make sure that you are not violating any copyright laws if you are using someone else's material/images. It is a good idea to list the sources and provide credit to the original authors. | ||
| − | As promised in the [ | + | As promised in the [[2017 Roadmap]], the Steemit pictures host limitation changed in february, a free integrated image hosting service was deployed, permitting anyone to drag-and-drop any image on their computer into any post or comment. This feature was announced to be available in Q2 (april to june) but the release happened in february 2017. |
| − | == Image Hosting Sites == | + | === Image Hosting Sites === |
To host the posts' pictures before the upload feature release, despite the Steemit users oriented site [http://www.steemimg.com SteemIMG], many steemians prefered using [http://imgsafe.org Imgsafe.org], where registration is optional, not mandatory. Other alternative was [https://supload.com Supload.com], a host and sharing image site that pays bitcoin to registered users acording to their pictures' number of views. More options were [https://imgur.com Imgur.com], [https://www.pictub.club/ Pictub.club], [https://postimage.io Postimg.io] etc. | To host the posts' pictures before the upload feature release, despite the Steemit users oriented site [http://www.steemimg.com SteemIMG], many steemians prefered using [http://imgsafe.org Imgsafe.org], where registration is optional, not mandatory. Other alternative was [https://supload.com Supload.com], a host and sharing image site that pays bitcoin to registered users acording to their pictures' number of views. More options were [https://imgur.com Imgur.com], [https://www.pictub.club/ Pictub.club], [https://postimage.io Postimg.io] etc. | ||
| − | == Alignments == | + | === Alignments === |
The default image alignment is on the left, but In the "Markdown" mode option it is possible to align images to the center using the code below: | The default image alignment is on the left, but In the "Markdown" mode option it is possible to align images to the center using the code below: | ||
| Line 21: | Line 21: | ||
* <nowiki><div class="pull-left">http://yourimage/link.png</div> Right side column</nowiki> | * <nowiki><div class="pull-left">http://yourimage/link.png</div> Right side column</nowiki> | ||
| − | == Optimal Image Sizes & Resizes == | + | === Optimal Image Sizes & Resizes === |
After some experimentations the steemian [https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are @pkattera] recommended the "perfect" dimensions for the post's main image. Within the main feed on [[Steemit]], this image when presented as a thumbnail should display in full on smaller mobile screens, while the area within the "safe zone" ([https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are see the template]) should be visible on desktop. | After some experimentations the steemian [https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are @pkattera] recommended the "perfect" dimensions for the post's main image. Within the main feed on [[Steemit]], this image when presented as a thumbnail should display in full on smaller mobile screens, while the area within the "safe zone" ([https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are see the template]) should be visible on desktop. | ||
| Line 37: | Line 37: | ||
You can also specify only the height or width and leave the other attribute empty, and the code will also work. | You can also specify only the height or width and leave the other attribute empty, and the code will also work. | ||
| − | == Mobile App & Chrome Extension == | + | === Mobile App & Chrome Extension === |
A current feature in '''eSteem''', mobile and desktop application for Steem(it) developed by [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image @good-karma], allow the users direct upload images to [https://imgur.com Imgur.com] that is listed in a gallery where you select to post. | A current feature in '''eSteem''', mobile and desktop application for Steem(it) developed by [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image @good-karma], allow the users direct upload images to [https://imgur.com Imgur.com] that is listed in a gallery where you select to post. | ||
| − | Other steemian, [https://steemit.com/steem-help/@savandra/the-easiest-way-to-post-photo-image-on-steemit @savandra], annouced in july 2016 a Google Chrome Extension called '''Steemitor'''. The idea was to allow users to just drag and drop one image and get | + | Other steemian, [https://steemit.com/steem-help/@savandra/the-easiest-way-to-post-photo-image-on-steemit @savandra], annouced in july 2016 a Google Chrome Extension called '''Steemitor'''. The idea was to allow users to just drag and drop one image and get ready-to-go picture but the link to Chrome Store is not active anymore. |
| − | |||
==Links:== | ==Links:== | ||
| − | * '''Steemit''' : https://steemit.com | + | * '''Steemit''' : https://steemit.com |
| − | * '''SteemIMG''' : http://www.steemimg.com, created by [https://steemit.com/steemit/@blueorgy/steemimg-com-first-dedicated-steem-image-hosting-website @blueorgy] in July 2016 | + | * '''SteemIMG''' : http://www.steemimg.com, created by [https://steemit.com/steemit/@blueorgy/steemimg-com-first-dedicated-steem-image-hosting-website @blueorgy] ''in July 2016'' |
| − | * '''Steemithelp.net''' : | + | * '''Steemithelp.net''' : https://www.steemithelp.net |
| − | + | * '''@steemitblog''' : [https://steemit.com/steemit/@steemitblog/steemit-2017-roadmap Steemit 2017 Roadmap]. ''January 2017'' | |
| − | * '''@steemitblog''' : [https://steemit.com/steemit/@steemitblog/steemit-2017-roadmap Steemit 2017 Roadmap]. January 2017 | + | * '''@steemitguide''' : [https://steemit.com/steemit/@steemitguide/tips-on-how-to-edit-and-customize-images-via-steemit-s-raw-html-editor-add-links-source-reliable-image-hosting-services-and Tips on how to Edit & Customize Images via Steemit's Raw HTML Editor; Add Links, Source Reliable Image Hosting Services and Center Align Images]. ''January 2017'' |
| − | * '''@steemitguide''' : [https://steemit.com/steemit/@steemitguide/tips-on-how-to-edit-and-customize-images-via-steemit-s-raw-html-editor-add-links-source-reliable-image-hosting-services-and Tips on how to Edit & Customize Images via Steemit's Raw HTML Editor; Add Links, Source Reliable Image Hosting Services and Center Align Images]. January 2017 | + | * '''@billbutler''' : [https://steemit.com/steem/@billbutler/adding-images-to-your-steem-posts Adding images to your Steem posts]. ''June 2016'' |
| − | * '''@ | + | * '''@boarddavid''' : [https://steemit.com/image/@boarddavid/inserting-zoomable-images-on-your-steemit-post Inserting "zoomable" images on your Steemit post]. ''July 2016'' |
| − | * '''@ | + | * '''@savandra''' : [https://steemit.com/steem-help/@savandra/the-easiest-way-to-post-photo-image-on-steemit The easiest way to post photo/image on Steemit] (Chrome Extension). ''July 2016'' |
| − | * '''@ | + | * '''@ace108''' : [https://steemit.com/steemit/@ace108/how-to-include-image-in-your-post-reference-to-using-steeming-com-in-include-pictures-your-post How to include image in your post - Reference to using Steemimg.com in include pictures your post]. ''July 2016'' |
| − | * '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?]. October 2016 | + | * '''@questd23''' : [https://steemit.com/steemit/@questd23/beginners-guide-on-how-to-post-images-and-video-to-steemit Beginners Guide on how to post images and video to steemit] (video tutorial). ''July 2016'' |
| − | * '''@ | + | * '''@blueorgy''' : [https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list Steemit Emoji Master List]. ''September 2016'' |
| − | * '''@ | + | * '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?]. ''October 2016'' |
| − | * '''@ | + | * '''@pkattera''' : [https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are The perfect dimensions for the main image in your Steemit.com post are...]. ''December 2016'' |
| − | * '''@ | + | * '''@rossenpavlov''' : [https://steemit.com/steemit/@rossenpavlov/easy-resize-images-inside-the-steemit-editor Easy Resize Images Inside The Steemit Editor]. ''January 2017'' |
| − | * '''@ | + | * '''@good-karma''' : [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image eSteem - Feature Set #7 (Select Image, My Images, Manage My Images, CopyPaste Image)]. ''January 2017'' |
| − | * '''@ | + | * '''@edrivegom''' : [https://steemit.com/steemit/@edrivegom/new-function-in-steemit-to-insert-images New Function in Steemit To insert images]. ''February 2017'' |
| + | * '''@scrooger''' : [https://steemit.com/howto/@scrooger/how-to-post-with-html-markdown-super-simple-with-copy-paste-cheat-sheet-make-your-posts-looks-so-much-better Pimp your post with this simple Cheat Sheet! Just copy and paste!] ''June 13th, 2017'' | ||
| + | * '''@dmcamera''' : [https://steemit.com/photography/@dmcamera/why-not-to-use-images-you-find-on-the-internet-it-s-illegal-you-are-stealing Why not to use images you find on the internet – it's illegal – you are stealing!] ''January 6th, 2018'' | ||
| + | * '''@justineh''' : [https://steemit.com/steemit/@justineh/how-to-change-your-profile-photo-and-other-settings-on-steemit-com How To Change Your Profile Photo And Other “Settings” on Steemit.com] ''June 18th, 2019'' | ||
==Related articles:== | ==Related articles:== | ||
| + | * [[Creative Commons]] | ||
| + | * [[Copyright]] | ||
| + | * [[Increase_your_Steem_Net_Worth|Increase your Steem Net Worth]] | ||
* [[Tips for formatting your post]] | * [[Tips for formatting your post]] | ||
| − | |||
| − | |||
| − | == | + | ==External Links== |
| + | |||
| + | * '''Arcane Bear [[YouTube]] Channel''' : [https://www.youtube.com/watch?v=5ce--cpC0JQ&feature=youtu.be How to: Add a profile picture | STEEMIT] ''Video tutorial by Tijo ([https://steemit.com/steemit/@thearcanebear/steemit-how-to-add-a-profile-picture @thearcanebear]} published in 5/19/2017'' | ||
| + | * '''Frot Design''' : [http://www.frot.co.nz/design/computing/a-bunch-of-stuff-about-steemit/ A bunch of stuff about Steemit] ''Written by unsigned, published in 10/27/2016'' | ||
| + | |||
| + | == In other languages == | ||
| − | * | + | * [[Galego]] : [[Formatear imaxes]] |
| + | * [[日本語]] (Japanese): [[記事に画像をつける方法]] | ||
<br> | <br> | ||
| Line 82: | Line 91: | ||
|} | |} | ||
<br> | <br> | ||
| + | |||
| + | [[Category:Tutorial]] [[Category:Content]] | ||
Latest revision as of 21:36, 18 June 2019
After a good formating, it is also highly recommended to use images in your posts but Steemit didn't have the capacity of hosting image files until february 2017. Before the feature release it was necessary to upload your image in a third party site like Imgsafe.org or SteemIMG. Then, copy the image link (that usually start with http or https and ends with .jpg, .png or .gif - the most popular image file formats), and paste this image adress in the post (Steemit Submit a Story window) you are editing.
Also, make sure that you are not violating any copyright laws if you are using someone else's material/images. It is a good idea to list the sources and provide credit to the original authors.
As promised in the 2017 Roadmap, the Steemit pictures host limitation changed in february, a free integrated image hosting service was deployed, permitting anyone to drag-and-drop any image on their computer into any post or comment. This feature was announced to be available in Q2 (april to june) but the release happened in february 2017.
Contents
Image Hosting Sites
To host the posts' pictures before the upload feature release, despite the Steemit users oriented site SteemIMG, many steemians prefered using Imgsafe.org, where registration is optional, not mandatory. Other alternative was Supload.com, a host and sharing image site that pays bitcoin to registered users acording to their pictures' number of views. More options were Imgur.com, Pictub.club, Postimg.io etc.
Alignments
The default image alignment is on the left, but In the "Markdown" mode option it is possible to align images to the center using the code below:
- <center>http://yourimage/link.png</center>
Or like floating left or right next to a text. To do that, as explained by @ervin-lemark, you can use these codes:
- <div class="pull-right">http://yourimage/link.png</div> Left side column
- <div class="pull-left">http://yourimage/link.png</div> Right side column
Optimal Image Sizes & Resizes
After some experimentations the steemian @pkattera recommended the "perfect" dimensions for the post's main image. Within the main feed on Steemit, this image when presented as a thumbnail should display in full on smaller mobile screens, while the area within the "safe zone" (see the template) should be visible on desktop.
- 1680 x 1292 pixels, 840 x 646 pixels or smaller images with the same 1.3:1 ratio
And according to @rossenpavlov's tip there is a easy way to resize pictures inside the Markdown editor. He explains that when you insert a image link the editor adds the following prefix:
- https://img1.steemit.com/0x0/http://yourimage/link.png - where the value /0x0/ render the original size.
Knowing that you can change the value to resize the image replacing the 0s by other numbers of pixels. If the original image is 600x300 and you want to have it smaller to half, the code would look like this:
- https://img1.steemit.com/300x150/http://yourimage/link.png
You can also specify only the height or width and leave the other attribute empty, and the code will also work.
Mobile App & Chrome Extension
A current feature in eSteem, mobile and desktop application for Steem(it) developed by @good-karma, allow the users direct upload images to Imgur.com that is listed in a gallery where you select to post.
Other steemian, @savandra, annouced in july 2016 a Google Chrome Extension called Steemitor. The idea was to allow users to just drag and drop one image and get ready-to-go picture but the link to Chrome Store is not active anymore.
Links:
- Steemit : https://steemit.com
- SteemIMG : http://www.steemimg.com, created by @blueorgy in July 2016
- Steemithelp.net : https://www.steemithelp.net
- @steemitblog : Steemit 2017 Roadmap. January 2017
- @steemitguide : Tips on how to Edit & Customize Images via Steemit's Raw HTML Editor; Add Links, Source Reliable Image Hosting Services and Center Align Images. January 2017
- @billbutler : Adding images to your Steem posts. June 2016
- @boarddavid : Inserting "zoomable" images on your Steemit post. July 2016
- @savandra : The easiest way to post photo/image on Steemit (Chrome Extension). July 2016
- @ace108 : How to include image in your post - Reference to using Steemimg.com in include pictures your post. July 2016
- @questd23 : Beginners Guide on how to post images and video to steemit (video tutorial). July 2016
- @blueorgy : Steemit Emoji Master List. September 2016
- @ervin-lemark : How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?. October 2016
- @pkattera : The perfect dimensions for the main image in your Steemit.com post are.... December 2016
- @rossenpavlov : Easy Resize Images Inside The Steemit Editor. January 2017
- @good-karma : eSteem - Feature Set #7 (Select Image, My Images, Manage My Images, CopyPaste Image). January 2017
- @edrivegom : New Function in Steemit To insert images. February 2017
- @scrooger : Pimp your post with this simple Cheat Sheet! Just copy and paste! June 13th, 2017
- @dmcamera : Why not to use images you find on the internet – it's illegal – you are stealing! January 6th, 2018
- @justineh : How To Change Your Profile Photo And Other “Settings” on Steemit.com June 18th, 2019
Related articles:
External Links
- Arcane Bear YouTube Channel : How to: Add a profile picture | STEEMIT Video tutorial by Tijo (@thearcanebear} published in 5/19/2017
- Frot Design : A bunch of stuff about Steemit Written by unsigned, published in 10/27/2016
In other languages
- Galego : Formatear imaxes
- 日本語 (Japanese): 記事に画像をつける方法
| Help keep this wiki page updated. Register, click in edit, add or modify the text and save. If you're already a steemian you can be rewarded with steem, see how in @steemcenterwiki. |
