Clickable image markdown by dek

View this thread on: hive.blog | peakd.com | ecency.com

art · @dek · Sep 17 '16

Clickable image markdown

A quick question - is it possible to use markdown not only to link an image and provide an alt description, but also make the image clickable, so it opens the full resolution version for better viewing experience (possibly in a new window)?

I think this information will be useful for everyone posting in #art and #photography.

Have a good day!

👍 tarindel, alterego, dek, kyusho, rusla, blisscom
👎 the-illuminati

`author`	dek
`permlink`	clickable-image-markdown
`category`	art
`json_metadata`	{"tags":["art","photography","markdown","image","clickable"]}
`created`	2016-09-17 07:24:06
`last_update`	2016-09-17 07:24:06
`depth`	0
`children`	8
`last_payout`	2016-10-18 07:40:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	346
`author_reputation`	14,523,505,395,648
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	0
`post_id`	1,274,130
`net_rshares`	6,709,542,131
`author_curate_reward`	""

properties (23)vote details (7)

voter	rshares	pct
tarindel	6,322,351,428	100%
rusla	59,739,802	100%
kyusho	94,160,774	100%
alterego	155,556,869	100%
the-illuminati	-71,000,700	-100%
dek	148,733,958	100%
blisscom	0	0%

@antoniotrento · Dec 19 '17

Is possible and is possible you can also insert videos not derived from you-tube,  I created a [post where I reveal them here](https://steemit.com/steemit/@antoniotrento/steem-and-markdown-some-tricks-to-write-better-and-faster)

properties (22)

`author`	antoniotrento
`permlink`	re-dek-clickable-image-markdown-20171219t091419478z
`category`	art
`json_metadata`	{"tags":["art"],"links":["https://steemit.com/steemit/@antoniotrento/steem-and-markdown-some-tricks-to-write-better-and-faster"],"app":"steemit/0.1"}
`created`	2017-12-19 09:14:18
`last_update`	2017-12-19 09:14:18
`depth`	1
`children`	0
`last_payout`	2017-12-26 09:14:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	228
`author_reputation`	437,206,873,306
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	24,156,702
`net_rshares`	0

@herzmeister · Sep 17 '16

yeah i do it all the time, check my posts tagged #photography

properties (22)

`author`	herzmeister
`permlink`	re-dek-clickable-image-markdown-20160917t123218150z
`category`	art
`json_metadata`	{"tags":["photography","art"]}
`created`	2016-09-17 12:31:18
`last_update`	2016-09-17 12:31:18
`depth`	1
`children`	4
`last_payout`	2016-10-18 07:40:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	61
`author_reputation`	20,893,103,396,296
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	1,275,729
`net_rshares`	0

@dek · Sep 17 '16

I saw clickable images posted on steamimg - does it link automatically, or do you use special markdown?

👍 blisscom

`author`	dek
`permlink`	re-herzmeister-re-dek-clickable-image-markdown-20160917t135453389z
`category`	art
`json_metadata`	{"tags":["art"]}
`created`	2016-09-17 13:54:57
`last_update`	2016-09-17 13:54:57
`depth`	2
`children`	3
`last_payout`	2016-10-18 07:40:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	103
`author_reputation`	14,523,505,395,648
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	1,276,341
`net_rshares`	0
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
blisscom	0 B		0	0%

@herzmeister · Sep 17 '16

This is a link in markdown code:
`[link-text](https://some.site/your-link.html)    `
    
This is an image in markdown code:    
    
`![image-text](https://some.site/your-image.jpg)`

Now all you have to do is combine this, by replacing the `link-text` with the markdown image code, like so:

`[![image-text](https://some.site/your-image.jpg)](https://some.site/your-link.html)`

If you host your images on https://www.steemimg.com/ they'll provide the markdown code for that automatically.

👍 dek, blastik, disciplesuccess, macgruber

`author`	herzmeister
`permlink`	re-dek-re-herzmeister-re-dek-clickable-image-markdown-20160917t142117803z
`category`	art
`json_metadata`	{"tags":["art"],"links":["https://www.steemimg.com/"]}
`created`	2016-09-17 14:20:18
`last_update`	2016-09-17 14:20:18
`depth`	3
`children`	2
`last_payout`	2016-10-18 07:40:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	491
`author_reputation`	20,893,103,396,296
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	1,276,535
`net_rshares`	151,529,154
`author_curate_reward`	""

properties (23)vote details (4)

voter	rshares	pct
dek	151,529,154	100%
macgruber	0	100%
disciplesuccess	0	100%
blastik	0	100%

2 replies

@kyusho · Sep 17 '16

It would be a nice add... sorry no answer though.

properties (22)

`author`	kyusho
`permlink`	re-dek-clickable-image-markdown-20160917t090133399z
`category`	art
`json_metadata`	{"tags":["art"]}
`created`	2016-09-17 09:01:39
`last_update`	2016-09-17 09:01:39
`depth`	1
`children`	0
`last_payout`	2016-10-18 07:40:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	49
`author_reputation`	77,157,400,538,407
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	1,274,645
`net_rshares`	0

@steemthat · Nov 16 '17

The answer is yes. I do it all of the time...It is ugly but works... You enclose the whole image block with [ ] then at the end you add () and add your link inside the (). Works every time. Let me try in a comment....

[![SteemThatian.png](https://steemitimages.com/DQmag4bBgxjKRHWUnWwDC1JAAHqEWwTCaiqhAWQfqjj8dYt/SteemThatian.png)](https://SteemThat.com) 
It even works in comments too.

properties (22)

`author`	steemthat
`permlink`	re-dek-clickable-image-markdown-20171116t043025506z
`category`	art
`json_metadata`	{"tags":["art"],"image":["https://steemitimages.com/DQmag4bBgxjKRHWUnWwDC1JAAHqEWwTCaiqhAWQfqjj8dYt/SteemThatian.png"],"links":["https://SteemThat.com"],"app":"steemit/0.1"}
`created`	2017-11-16 04:30:27
`last_update`	2017-11-16 04:30:27
`depth`	1
`children`	0
`last_payout`	2017-11-23 04:30:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	387
`author_reputation`	1,483,266,589,954
`root_title`	"Clickable image markdown"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	20,534,059
`net_rshares`	0