Image Floating - Is It In There?


#1

I was a little surprised that I couldn’t float an image and easily flow text around it using Foundry without resorting to by-hand html/css or another non-Foundry stack.

Did I miss something?


#2

Hey there @claycle: There’s no need to hand code a floated image. There’s a great one that comes built-in to RapidWeaver:

That stack will work perfectly fine in Foundry.


#3

I ran into the same mistake. Perhaps you should add somewhere that we can still use the basic/default stacks by RW :slight_smile:

Btw. Are these basic RW stacks responsive?


#4

The basic stacks are not responsive for the most part. Generally that won’t be a problem with a floated image stack. But you could pair it with a Visibility stack and have the Floated Image stack get hidden at the mobile breakpoint and replaced by just an Image and Paragraph stack.


#5

Thanks for the replies.


#6

Sure thing! Glad to help out. I will add a possible responsive image float to the feature request list and see if it is worthwhile vs the above mentioned stack.


#7

Hi, yes. Every bit that we do not have to built responsive by e.g. using visibility and adding extra stacks is a real help!


#8

Hi - I’ve spent hours searching for a responsive solution to my need to wrap text around images as in css float. I’m puzzled as to why the Elixir product which does this - Float in Structure Stacks - is not included in Foundry? This seems to be exactly what I’m looking for - and I’m sure I can’t be the only one. But as the other components of the Structure stack are mostly included in Foundry, it looks like an expensive way of obtaining the functionality - would you offer a discount on Structure to Foundry users?


#9

Maybe a related question, but it seems that the Foundry “Media Group” stack does a similar thing (without the float) but I’ve not been able to get it to work properly without resizing the image used. Couldn’t find anything in the documentation and was wondering if there is an “preferred’ image size to use with that stack.

Sorry I meant “wrap” rather than “float”. I don’t have the Structure stack to compare behavior but the basic “Right Floating Image” or “Left Floating Image” stacks wrap the text at a point but the Media Group stack does not.


#10

Hey there @nicksmith – You can’t use any of Structure’s stacks within Foundry. Doing so would be including one framework within another framework, and that would be a bag full of headache.

As for a floated image – Bootstrap doesn’t have a native component for this beyond the Media Group, which @fog1horn mentioned above. I find the Media Group to be a good alternative to using the built-in Float stacks that come with Stacks, if needed. In all honesty I’d not received any other requests for such a feature since this original thread popped up over a year ago. I’ll take another look and see if it is something that needs to be a part of the Foundry suite of stacks though.


#11

There is not an optimal size for the image – you just use the image size you need for your layout. If you’re in need of a 150 px image, size you image to that and then drop it into the Media Group stack.


#12

If you want to flow text around an image you can use BWD’s ParagraphPro.


#13

Will Woodgate has a nice float stack that he’s named BetterFloat. Its new and so I don’t know if it conflicts with Foundry or not, but it has a lot more options than the traditional float stack.


#14

Thanks…not sure why I didn’t see that before.