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
Just wondering if there is a solution to having text (inline text?) wrap around an image and then for this to be responsive. I’ve seen something about float left or float right, but not sure how to implement this. Text wrapping around an image can look really good.
That would be great. I would like to have a rectangular block of text with an image in the top left corner. As the breakpoint gets smaller, the image reduces in size. Maybe the image could also be moved down the block of text to somewhere in the middle, but always on the left hand side.
This seems to be one useful component that is missing from the core components, so hopefully someone will come up with something that has this kind of functionality.
I’ve been trying to get the look I’m looking for with the grid/flex, but to no avail.