create account

Howto: Floating images and Drop Caps by l0k1

View this thread on: hive.blogpeakd.comecency.com
· @l0k1 · (edited)
$0.47
Howto: Floating images and Drop Caps
<div class="pull-right">https://img1.steemit.com/0x0/https://imgflip.com/s/meme/Too-Damn-High.jpg</div><div class="pull-left">https://upload.wikimedia.org/wikipedia/commons/c/c0/Decorative_Letter_I.jpg</div>just spotted [this post](https://steemit.com/steem/@steemitblog/proposed-changes-to-steem-economy) and noticed that it has a floating image sitting at the head of a paragraph. 

I looked through the HTML code and I discovered there is a class called 'pull-left'. Using a div tag, with class="pull-left" or "pull-right" the image aligns to the top of the paragraph, and either to the left or the right.

As you can see in this page, I have put a float on the top left and on the top right. Note that you can also do some neat trickery - like in this post, by putting the image for the too damn high guy first, but with class="pull-right", it will be loaded as the preview image, while the drop-cap image on the left will appear first on the page visually.

# Code Snippet

The snip below is the code from the first paragraph of this post>:

`<div class="pull-right">https://img1.steemit.com/0x0/https://imgflip.com/s/meme/Too-Damn-High.jpg</div><div class="pull-left">https://upload.wikimedia.org/wikipedia/commons/c/c0/Decorative_Letter_I.jpg</div>just spotted this post https://steemit.com/steem/@steemitblog/proposed-changes-to-steem-economy and noticed that it has a floating image sitting at the head of a paragraph.`

I have used it in my signature now also, here is the code from that part:

`## *We can't stop here! This is Whale country!*<div class="pull-left">http://s20.postimg.org/igf27v79p/signature_new_small.png</div>`

`<sub>Loki was born in Australia, now is wandering Amsterdam again after 9 months in Sofia, Bulgaria. IT generalist, physics theorist, futurist and cyber-agorist. Loki's life mission is to establish a secure, distributed layer atop the internet, and enable space migration, preferably while living in a beautiful mountain house somewhere with a good woman, and lots of farm animals and gardens, where he can also go hunting and camping.</sub>`


<hr />

## *We can't stop here! This is Whale country!*<div class="pull-left">http://s20.postimg.org/igf27v79p/signature_new_small.png</div>

<sub>Loki was born in Australia, now is wandering Amsterdam again after 9 months in Sofia, Bulgaria. IT generalist, physics theorist, futurist and cyber-agorist. Loki's life mission is to establish a secure, distributed layer atop the internet, and enable space migration, preferably while living in a beautiful mountain house somewhere with a good woman, and lots of farm animals and gardens, where he can also go hunting and camping.</sub>

<sub>*I'm a thoughtocaster, a conundrummer in a band called Life Puzzler. I've flipped more lids than a monkey in a soup kitchen, of the **mind**.* - Xavier, Renegade Angel</sub>

   *
> <sub>*All images in the above post are either original from me, or taken from Google Image Search, filtered for the right of reuse and modification, and either hotlinked directly, or altered by me*
<a target='_blank' href='https://postimage.org/'>Uploaded images hosted at postimg.org</a></sub>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 111 others
properties (23)
authorl0k1
permlinkhowto-floating-images-and-drop-caps
categorysteem
json_metadata{"links":["https://steemit.com/steem/@steemitblog/proposed-changes-to-steem-economy","https://steemit.com/steem/@steemitblog/proposed-changes-to-steem-economy","https://postimage.org/"],"image":["https://img1.steemit.com/0x0/https://imgflip.com/s/meme/Too-Damn-High.jpg","https://upload.wikimedia.org/wikipedia/commons/c/c0/Decorative_Letter_I.jpg","https://img1.steemit.com/0x0/https://imgflip.com/s/meme/Too-Damn-High.jpg","https://upload.wikimedia.org/wikipedia/commons/c/c0/Decorative_Letter_I.jpg","http://s20.postimg.org/igf27v79p/signature_new_small.png","http://s20.postimg.org/igf27v79p/signature_new_small.png"],"tags":["steem","howto","markdown","hacks","pictures"],"custom":{"app":"esteem","version":"1.3.0"}}
created2016-11-05 09:29:00
last_update2016-11-05 11:14:15
depth0
children6
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.442 HBD
curator_payout_value0.031 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,153
author_reputation94,800,257,230,993
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,691,386
net_rshares6,325,365,484,020
author_curate_reward""
vote details (175)
@everittdmickey ·
Pretty cool..but a bit too technical. Can you simplify further? Unpack and define terms?
👍  
properties (23)
authoreverittdmickey
permlinkre-l0k1-howto-floating-images-and-drop-caps-20161105t093347086z
categorysteem
json_metadata{"tags":["steem"]}
created2016-11-05 09:33:45
last_update2016-11-05 09:33:45
depth1
children1
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length88
author_reputation237,810,557,737,590
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,691,398
net_rshares2,201,813,008
author_curate_reward""
vote details (1)
@l0k1 ·
I will add a section with some example code
👍  
properties (23)
authorl0k1
permlinkre-everittdmickey-re-l0k1-howto-floating-images-and-drop-caps-20161105t093650457z
categorysteem
json_metadata{"tags":["steem"]}
created2016-11-05 09:36:51
last_update2016-11-05 09:36:51
depth2
children0
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length43
author_reputation94,800,257,230,993
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,691,412
net_rshares2,201,813,008
author_curate_reward""
vote details (1)
@full-steem-ahead ·
Looking for a way to resize images for steemit using tags, html or css so I don't have to alter the original image.

html works for some things, but I can't seem to figure out how to set image size. I've tried setting width / height using style attributes on div, img blocks with no luck.

There are posts about setting image size but their approach is to create a new image resizes from the original. That's quite a lot of work when it shouldn't be necessary.

My biggest frustration with steemit is this dang markdown editor. I sure hope the next version is much better!
properties (22)
authorfull-steem-ahead
permlinkre-l0k1-howto-floating-images-and-drop-caps-20161107t221649390z
categorysteem
json_metadata{"tags":["steem"]}
created2016-11-07 22:16:48
last_update2016-11-07 22:16:48
depth1
children0
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length572
author_reputation30,177,498,572,933
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,709,269
net_rshares0
@good-karma ·
$0.75
yes, good find :)
I have been using those for a while on my posts.... It was introduced 2 month or so ago here: https://steemit.com/steemit/@steemitblog/new-advanced-formatting-features
👍  , ,
properties (23)
authorgood-karma
permlinkre-l0k1-howto-floating-images-and-drop-caps-20161105t100745807z
categorysteem
json_metadata{"tags":["steem"],"links":["https://steemit.com/steemit/@steemitblog/new-advanced-formatting-features"]}
created2016-11-05 10:07:45
last_update2016-11-05 10:07:45
depth1
children0
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.572 HBD
curator_payout_value0.181 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length185
author_reputation656,210,817,936,836
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,691,491
net_rshares8,385,315,008,943
author_curate_reward""
vote details (3)
@linkback-bot-v0 ·
This post has been linked to from another place on Steem.


  - [The Daily Tribune: Most Undervalued Posts of Nov 05 - Part I](https://steemit.com/curation/@screenname/the-daily-tribune-most-undervalued-posts-of-nov-05---part-i) by @screenname




Learn more about and upvote to support [**linkback bot v0.5**](https://steemit.com/steemit/@ontofractal/steem-linkback-bot-v0-5-the-reddit-awareness-release). Flag this comment if you don't want the bot to continue posting linkbacks for your posts.

Built by @ontofractal
properties (22)
authorlinkback-bot-v0
permlinkre-l0k1-howto-floating-images-and-drop-caps-linkbacks
categorysteem
json_metadata{}
created2016-11-06 20:03:36
last_update2016-11-06 20:03:36
depth1
children0
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length520
author_reputation1,915,954,976,722
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,701,453
net_rshares0
@the-ego-is-you ·
Nice find l0k1, thanks for sharing!
properties (22)
authorthe-ego-is-you
permlinkre-l0k1-howto-floating-images-and-drop-caps-20161105t095816615z
categorysteem
json_metadata{"tags":["steem"]}
created2016-11-05 09:58:15
last_update2016-11-05 09:58:15
depth1
children0
last_payout2016-12-06 12:22:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length35
author_reputation7,031,347,556,614
root_title"Howto: Floating images and Drop Caps"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id1,691,467
net_rshares0