Request: Add a 'Float Block' Button to the Editor

[BlueTrillium]

It would be really excellent if at some point we could have a 'Float Block' button in the editor, where we could use it to mimic the BBCode functionality of encapsulating a bit of text/images/code inside [floatleft] and [floatright] blocks and have the rest of the text of the main post 'flow' around it cleanly. Would either need separate buttons for floatleft and floatright, or some other way to choose which side it 'floats' to. (Bonus points if there's a couple pixels of 'padding' around the block so the text inside the block doesn't run into the text outside the block).

Thank you!

An example shot of how a floating-left block (image plus text caption) might look (though this one doesn't have the padding, as you can see with the "Wi: 1" and the "He looked" bit at the bottom-right corner. Padding on the bottom is just fine though, it's just the sides that get a bit close):

[Eric]

Added to the queue!

[Eric]

For my own reference...

https://icon-icons.com/icon/wrap-img-right/120305

https://icon-icons.com/icon/wrap-img-left/120307

[Malkavian Grin]

Button gfx look good, if a little stylized.

@BlueTrillium Question for you, since I already do what you're asking. When you post, do you copy & paste / clone your previous posts, so you can repurpose them? I do that and it seems to work as you're requesting with the margin (see attachment).

I have to double check, but I just put the image (and text if you want) in a separate p tag which is floated.

EDIT: nope, I also put a margin-right:30px; in there. I didn't remember if it was automatic or not. Guess not.

---

Character-related text can go here, too.

Test text.

Test text.

Test text.

Test text.

Test text.

[Neopopulas]

Oh man this is gonna be a good one. I do a lot of floats for things like images (easy) but also other things like tables and text and while i can do HTML witchcraft as well as the next novice, i'm also lazy.

[BlueTrillium]

@Malkavian Grin I'm still getting used to Baldr, but yes what I'm accustomed to doing (and hope to be able to do going forward eventually) is quote previous posts for the formatting and then change the text for the new post.

In this case however I was trying to write a brand new post (but making it look as much as reasonably possible like it used to look on MW). And I wanted to float an entire block -- I agree, floating a picture alone is simple, but I often want to have some kind of text (e.g. think of it like a 'caption' or 'title' to the pic) also floating in that block with the picture, often with its own alignment within the floating block (e.g. centered under or above the pic), and I also sometimes just want to float a block of text, and that's what I was having trouble with. (I'm not HTML-savvy in the slightest currently so I don't know what's available or the correct syntax, lol).

And then, yes, once I did get it floating, it didn't have a margin between the floating block and the main text so stuff kinda ran together. It does look like the 'margin' parameter like you're doing would accomplish that (though 30px is wider than I was thinking xD) So yeah, just like Neopopulas said, in general I thought that if we had a button for it to shortcut needing to figure out all the HTML, it would be greatly helpful. (Also Eric from my original help thread asked me to post a feature request here so I did. ^_^)

[Malkavian Grin]

@BlueTrillium If you check the OOC thread for the Middle-Earth game we're in, I crafted what you're looking for.

I'm not exactly sure how the editor would pull off floating whole chunks of things; I guess you could highlight and hit a button, but in order to look right, I think it'd need to add a <div> around whatever you're floating.

Long story short; if you don't mind a little HTML, you want to put (it'll float a "chunk" and center to itself):

<div style="float: left; text-align:center; margin-right:1%;">
   <image stuff here><br>
   Maybe some text here
</div>

Alternatively, just turn the margin-right into a set distance like 10px or 15px or something.

[Neopopulas]

It also helps if you put a fieldset around things, it creates a border which helps delineate between the two pieces of text but it also helps to separate things in the editor which is useful when, well editing.

[BlueTrillium]

All definitely good ideas (especially if you want that line around things that fieldset does, I'm sure I'd use that on some posts)!

[BlueTrillium]

Just wanted to quickly add - thank you @Malkavian Grin for the margin-right html, I've finally gotten to try it out after being away a few days, and it looks perfect for what I was trying to do there. I am definitely using it for this particular character layout.

[Malkavian Grin]

8 minutes ago, BlueTrillium said:

Just wanted to quickly add - thank you @Malkavian Grin for the margin-right html, I've finally gotten to try it out after being away a few days, and it looks perfect for what I was trying to do there. I am definitely using it for this particular character layout.

Wonderful! I'm glad I could help :) 

Now just imagine what we could do with negative margins mwahahaha

[Eric]

1 hour ago, Malkavian Grin said:

Now just imagine what we could do with negative margins mwahahaha

Aside from seriously break layout? 😄

 

[Malkavian Grin]

35 minutes ago, Eric said:

Aside from seriously break layout? 😄

 

Not on purpose! Perhaps you have to prove your responsible first? 😉 Premium feature?

[TiffanyKorta]

So I was curious and played around with MG's lovely bit of code, getting this as a possible example of how it all works. I'm sure people with real talent could create something much prettier and functional!

---

  

Anatasia Qazeen

---

UPP: 777777

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus volutpat dolor vitae vulputate. Pellentesque mollis lacus nec nunc sagittis laoreet. Quisque sed tellus eget quam posuere feugiat ut ac elit. Praesent posuere sollicitudin dui, quis interdum urna facilisis pharetra. Fusce sollicitudin tortor quis purus auctor, nec sodales eros viverra. Proin luctus blandit neque vitae vehicula. Proin finibus, augue vitae dictum venenatis, nulla justo dictum ante, at dignissim purus urna et mauris. Duis sodales dictum ipsum in mollis. Nunc luctus lorem in orci rutrum ultrices. Nullam vehicula augue ut aliquam pellentesque.

Nunc sit amet nunc id felis luctus interdum in ac neque. Suspendisse molestie nulla tellus, maximus pharetra odio laoreet sed. Curabitur vulputate gravida est, sagittis pulvinar eros ultrices vel. Sed finibus vehicula posuere. Pellentesque dui lacus, cursus et augue et, euismod efficitur dui. Phasellus sed leo mollis, vestibulum nisl id, convallis arcu. Nullam eget maximus tortor.

 

Edited May 8, 2023 by TiffanyKorta (see edit history)

[Malkavian Grin]

@TiffanyKorta Thank you for the compliment ❤️ As a gift for your kindness, here's your template with tighter layout (I removed/changed some margins and stuff. EDIT: Well, only SOME of my changes managed to save). Something I personally like to to is link the name/pic back to my character sheet for more convenient clicking.

If you have a request for something, I'm happy to look into it!

---

 

Anatasia Qazeen

---

UPP: 777777

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus volutpat dolor vitae vulputate. Pellentesque mollis lacus nec nunc sagittis laoreet. Quisque sed tellus eget quam posuere feugiat ut ac elit. Praesent posuere sollicitudin dui, quis interdum urna facilisis pharetra. Fusce sollicitudin tortor quis purus auctor, nec sodales eros viverra. Proin luctus blandit neque vitae vehicula. Proin finibus, augue vitae dictum venenatis, nulla justo dictum ante, at dignissim purus urna et mauris. Duis sodales dictum ipsum in mollis. Nunc luctus lorem in orci rutrum ultrices. Nullam vehicula augue ut aliquam pellentesque.

Nunc sit amet nunc id felis luctus interdum in ac neque. Suspendisse molestie nulla tellus, maximus pharetra odio laoreet sed. Curabitur vulputate gravida est, sagittis pulvinar eros ultrices vel. Sed finibus vehicula posuere. Pellentesque dui lacus, cursus et augue et, euismod efficitur dui. Phasellus sed leo mollis, vestibulum nisl id, convallis arcu. Nullam eget maximus tortor.