I often use images inline in text paragraphs and then float/position them to different sides (left, right) of the text block so that the text sort of wraps around them (in a blocky way). There currently doesn’t seem to be a way to create inline elements/components within Elements.
I know this is a stretch, but also being able to actuallywrap text around shapes in Elements would be a very nice to have feature - even just using the alpha of an image for the shape to start.
I have already thought about doing something with CSS Shapes, and I do think we can do something pretty nice with that. There’s nothing in Elements just yet for that as it’ll take some time to work out all the details, but I think it’s definitely doable
We can for sure add a new component that allows you to add text and float an image to the left/right, it wouldn’t be difficult to do. However, I do wonder if that would be the best way to solve this. I have some other ideas that might be nicer. We’ll have a chat internally and see what we can come up with.
Ideally it wouldn’t required a different component. I think the text/paragraph component and the image component are by far going to be the most complex and critical components in Elements.
Asking users to learn and remember which of many image or text components to use when and where is only going to cause confusion. If it’s at all possible to have a single text and a single image component that can adapt depending on context/format/etc that would definitely be preferable.
Just wondering what the best way to achieve this float effect in Elements? Specifically I’m interested in having an image with a block of text wrapping around it which adjusts depending on the size of the image and the breakpoint. I’m not sure if this is possible yet?Many thanks!
The problem with trying to roll this into the existing Text component is that you then don’t get the Typography capabilities. For my use case, I would want to be using a typography component to wrap around an image, as it is a lot better at handling long-form text.
Does this mean there would need to be two different components?
My preference would definitely be for a separate component, in an effort to keep the Text component as minimal as possible, true to its original intent.
We have both the Flex and Grid components that offer a lot of layout options, however, we don’t have any type of built in “wrap text around an image” feature.
However, you could definitely achieve this with either some custom CSS or a Custom Component