Hi,
Is it possible in Elements to let text flow around an image? I would like that possibility in blog posts. Thanks.
Pouwel
Hi,
Is it possible in Elements to let text flow around an image? I would like that possibility in blog posts. Thanks.
Pouwel
This has been discussed a great deal over the past. I think the situation is you need to do a custom component still as nothing in basic Elements yet. @elementsbot is this still correct?
Hey Pouwel and PMUK!
You’re right, PMUK. As of now, to get text to flow around an image in Elements, you would typically need to create a custom component. You can use Tailwind CSS classes to achieve this effect by applying classes like float-left or float-right to your image, and then ensuring your text is in the same container.
Here’s a quick example:
<div class="flex">
<img src="your-image.jpg" class="float-left mr-4">
<p>Your text goes here. It will wrap around the image as expected.</p>
</div>
Remember, Elements is always evolving, so keep an eye on updates for new features that might make this even easier in the future! If you need more detailed guidance, feel free to ask. ![]()
Thanks Elementsbot. I’m not a developer but I thought I’d give it a try anyway. Unfortunately I got a warning from Elements that my custom component limit has been reached. Since I’m building websites for myself only, I will not upgrade just for this one purpose. I’ll just wait for Dan and Ben to create such a component. Alas.
Hey PouwelW!
Ah, the classic “custom component limit” conundrum. I feel your pain.
But hey, you’re not alone in hoping for more built-in goodies from Dan and Ben. They love a good challenge, so who knows what might pop up in future updates!
In the meantime, if you ever decide to tinker with another project or free up some component space, you know where to find me for more tips. Hang in there, and happy weaving!
You could put float in the markdown file
@elementsbot <img src=“/resources/aqua.jpg” this is my image path i need inline css float
Hey upssjw!
To float an image using inline CSS in your markdown file, you can do something like this:
<img src="/resources/aqua.jpg" style="float: left; margin-right: 10px;">
This will float the image to the left and give it a little margin on the right so your text doesn’t stick to it like a clingy ex. ![]()
If you need more help, just give me a shout!
at some text and image size
Hey upssjw!
For text and image sizes, you can adjust the inline CSS directly in your markdown file. Here’s a quick example:
<img src="/resources/aqua.jpg" style="float: left; margin-right: 10px; width: 150px; height: auto;">
This will float the image to the left, add some margin, and set the width to 150px while maintaining the aspect ratio. Adjust the width as needed for your design.
If you need more tips or run into any hiccups, just holler! ![]()
need some text to float around the image
Hey upssjw!
To get text to float around your image, you’ll want to make sure your image is floated and your text is in the same container. Here’s a little markdown magic for you:
<img src="/resources/aqua.jpg" style="float: left; margin-right: 10px; width: 150px; height: auto;">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action.
This setup will have your text wrap around the image. Adjust the image size and margin as needed to fit your design.
If you need more help, just give me a shout! ![]()
can you put in a div and justify the text
Hey upssjw!
Absolutely, you can wrap your image and text in a <div> and justify the text. Here’s how you can do it:
<div style="text-align: justify;">
<img src="/resources/aqua.jpg" style="float: left; margin-right: 10px; width: 150px; height: auto;">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. Justifying the text will make it align evenly on both sides, giving it a neat and tidy look.
</div>
This will float the image to the left, and the text will wrap around it, justified to both the left and right edges. Adjust the image size and margin as needed for your design.
If you need more help, just holler! ![]()
works needs some more work
dont think it works with a straight copy
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. Justifying the text will make it align evenly on both sides, giving it a neat and tidy look.
Add alt for the image
Hey upssjw!
Adding alt text to your image is a great idea for accessibility and SEO. Here’s how you can do it:
<div style="text-align: justify;">
<img src="/resources/aqua.jpg" alt="Description of the image" style="float: left; margin-right: 10px; width: 150px; height: auto;">
Some text that will flow around the image like a graceful river around a rock. Keep adding more text here to see the effect in action. Justifying the text will make it align evenly on both sides, giving it a neat and tidy look.
</div>
Replace "Description of the image" with a brief description of what the image shows. This will help screen readers and search engines understand the content of your image.
If you need more help, just give me a shout! ![]()
![]()
can the text be made to wrap into 2 columns, but still be responsive