Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Getting text to wrap a scene7 image

Avatar

Level 1

Our assets are being hosted through scene7. A new ask is for a way for text content to wrap an image. I know that it's no longer recommended to use the RTE component for images but I still added the button back in an attempt to see what would happen. I noticed it's only adding assets from our DAM and not scene7.

I also attempted to set up a 50/50 container and added in a Text component and a Dynamic Media component, but quickly realized that since each component were in their own container, there wasn't a way to float it so the text could wrap.

 

Has anyone had any luck finding a way to wrap the text around the scene7/Dynamic Media asset or add a component that will allow that while keeping the benefits?

 

Appreciate any help, thanks!

4 Replies

Avatar

Community Advisor

@dant23 Looks like the issue with the css to wrap the text around DM image. DM image renders just like any other image it wont prevent anything. If you can put the UI here how you want the image to get wrapped with text, that will help.

 

please check the below sample

https://www.javatpoint.com/how-to-wrap-text-around-an-image-in-html

 

Avatar

Level 1

Thank you for your response, my issue is that we have the dynamic media component class around the actual image, so we aren't able to have the text and image in the same parent container to apply the float. Is there a way to strip out the extra classes when extending the dynamic media component or a way to import the dynamic media image directly into the RTE similar to the old AEM functionality?

 

I had been messing with the CSS a bunch (not just using the flex rule which I know won't work), until I realized since the text and dynamic media image aren't directly next to each other, I can't apply the float style.

 

dm-nowrap.PNGrte-dam.PNG

Avatar

Administrator

@dant23  Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni