Steemit has the ability to post images in high resolution and in full screen gloriousness! Read on to find out how it is done...
As you can see in my recent post showing a snow scene in the town where I live, clicking the image will allow you to view it in high resolution and full screen, and you can even zoom in to see greater detail too!
How is This Done?
When you upload an image to Steemit, your blog automatically creates the Markdown code like this:
The following HTML has been modified from the Steemit Markdown code into basic HTML and will allow you to post your images, so that when they are clicked they display in full screen and another click will allow you to zoom in on the details. All you need to do is to upload your image as normal, and then copy the URL part of the image into a simple...
<a href="https://steemitimages.com/DQmWboTTXWiCD7w2DaqV4Hd6ntyAypCfqnpYeB9iTXxum2L/DSC_0352_3_sm.jpg"><img src="https://steemitimages.com/DQmWboTTXWiCD7w2DaqV4Hd6ntyAypCfqnpYeB9iTXxum2L/DSC_0352_3_sm.jpg"> </img></a>
Just replace the URL between the speech marks with your own image URL.
NOTE: The a href="" and the img="" URL need to be the same. Basically by adding the HTML code within an a href="" you are hyperlinking to the image by clicking the image itself!
What HTML is Allowed?
Most basic HTML functions that do not actively implement scripts from the page are allowed, for example code that formats text and hyperlinks. The following is a list of known HTML code that IS allowed:
HTML rendered by the various markup language processors gets passed through an HTML sanitization filter for security reasons. HTML elements not in the whitelist are removed. HTML attributes not in the whitelist are removed from the preserved elements.
The following HTML elements, organized by category, are whitelisted:
- Headings: h1, h2, h3, h4, h5, h6, h7, h8
- Prose: p, div, blockquote
- Preformatted: pre
- Inline: b, i, strong, em, tt, code, ins, del, sup, sub, kbd, samp, q, var
- Lists: ol, ul, li, dl, dt, dd
- Tables: table, thead, tbody, tfoot, tr, td, th
- Breaks: br, hr
- Ruby (East Asian): ruby, rt, rp
The following attributes, organized by element, are whitelisted:
- a: href (http://, https://, mailto://, github-windows:// and github-mac:// URI schemes and relative paths only)
- img: src (http:// and https::// URI schemes and relative paths only)
- div: itemscope, itemtype
- all: abbr, accept, accept-charset, accesskey, action, align, alt, axis, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, clear, cols, colspan, color, compact, coords, datetime, dir, disabled, enctype, for, frame, headers, height, hreflang, hspace, ismap, label, lang, longdesc, maxlength, media, method, multiple, name, nohref, noshade, nowrap, prompt, readonly, rel, rev, rows, rowspan, rules, scope, selected, shape, size, span, start, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, itemprop
Note that the id attribute is not whitelisted.
As you can see from the above, it is possible to not only have BOLD, italics and hyperlinks but you can also post full sized images in high resolution, horizontal lines and even tables.
Disclaimer: some of the HMTL may not work on the Steemit.com blogs, this is a guide for reference and further development only.
NOTE 2: I upload images no larger than 2400 pixels on the longest side, as very large images do not seem to upload successfully on Steemit.
and formatting your own future blog posts.
FOLLOW, UPVOTE AND RESTEEM!
Inner Vision Photography.
from the copyright holder.