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!
https://steemit.com/photography/@innervision/snow-scene-competition-the-isle-of-wight-march-2018
When you upload an image to Steemit, your blog automatically creates the Markdown code like this:
What most people do not realise is that Markdown, the code used in most online blogs, is actually only a short hand version of HTML. As such, nearly all blogs that utilise Markdown also allow you to use simple HTML code in your blog posts. Some code like JavaScripts and Style codes, are blocked and not allowed by default, to prevent you turning your blog posts into web pages and running active scripts from your blog. Also, you cannot post web forms but you can post basic HTML.
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=""></a>
like this:
<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!
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.
I hope this helps and have fun exploring
and formatting your own future blog posts.
All images in this post are Copyrighted by Matt Blythe,
Inner Vision Photography.