
Tagged: text
-
AuthorPosts
-
August 6, 2025 at 10:42 am #1487622
Hi everyone.
Is there a tool or way to insert images into text so that it flows around it?August 6, 2025 at 12:26 pm #1487637Hey icarogioiosi,
Thank you for the inquiry.
You have to set the float property of the image to right or left. This will allow the surrounding text to flow around the image.
Example:
HTML:
<img src="test.jpg" class="av-float-right" />Long text here..
CSS:
.av-float-right { float: right; margin: 10px; max-width: 242px; }
Let us know the result.
Best regards,
IsmaelAugust 8, 2025 at 9:06 pm #1487764Hi Ismael.
It works perfectly for me.
Is there a way to enlarge the image to its original size by clicking on it?
Thanks for your time.August 10, 2025 at 2:59 pm #1487802Hi,
Is there a way to enlarge the image to its original size by clicking on it?
Do you mean to open the image in a lightbox?
Try this:<a class="av-float-right" href="/test.jpg" data-rel="lightbox"> <img class="av-float-right lightbox-added" src="/test.jpg" alt="Description" /> </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget pulvinar libero. Aliquam fringilla, sapien ut viverra pharetra, augue mauris tincidunt mauris, et semper ipsum quam sit amet leo. Cras commodo non nisl eget eleifend. In hac habitasse platea dictumst. Nullam bibendum diam eu venenatis iaculis. Integer at mi libero. Ut quis purus non urna pharetra consequat semper vitae purus. Morbi ultrices interdum mauris, quis posuere dolor aliquam ut. Duis turpis erat, suscipit et ex vel, commodo volutpat risus. Suspendisse sit amet laoreet lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Change the test.jpg to suit and use the same css:
.av-float-right { float: right; margin: 10px; max-width: 242px; }
result:
and after click of the image it opens in a lightbox:
Best regards,
MikeAugust 10, 2025 at 3:04 pm #1487803Hi,
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.Best regards,
MikeAugust 11, 2025 at 9:46 am #1487834But you know that you do not have to do that by inserting code to text-block element?
Place your text-block element – and open it. – Insert your text. After that put the cursor (1) to that place where you like to insert the image.
Click (2) on “Add Media”.
Now it opens the media-library in a popup. Choose your image (3) and set the properties on the right (4). You see here the already the alignment and the lightbox option (link to media file).
Now press “insert into page” button.
You will see now a preview. You can pull now one edge of the image to make it bigger.
if you like to change some settings on that image – click on the image – you can see now an icon bar on top. Click that pencil button to have another popup.
and
August 14, 2025 at 1:31 pm #1488041Thank you all for your contributions.
Not one, but two solutions. Great!
I’ve tried both, and they work great.
I just need to figure out which one is best for the client so they can be independent and use the simplest one for their abilities.
Thanks for your time! -
AuthorPosts
- You must be logged in to reply to this topic.