How to Post Images in FULL SCREEN on Steemit

in #markdown7 years ago (edited)

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


How is This Done?

When you upload an image to Steemit, your blog automatically creates the Markdown code like this:

![DSC_0352_3_sm.jpg](https://steemitimages.com/DQmWboTTXWiCD7w2DaqV4Hd6ntyAypCfqnpYeB9iTXxum2L/DSC_0352_3_sm.jpg)



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!


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.

Source: https://github.com/

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.



Click image to see full screen!


I hope this helps and have fun exploring
and formatting your own future blog posts.


FOLLOW, UPVOTE AND RESTEEM!

All images in this post are Copyrighted by Matt Blythe,
Inner Vision Photography.

No reproduction or resale allowed without written permission
from the copyright holder.

Sort:  

Mate I have been searching for ages how to do this! I asked a few steemit a and no one but you explained it that simply!

A thousand thanks to you :)

You are welcome Vince, glad it helped :)

Exactly what I was looking for! Thank you!!!

Thank you, this is really useful!