How to add wrap text on the left side of an image CTA

[damarley]

Hi All,

Hope all is well. I'm having a issue where I've created an Image CTA and I want the text to be wrapped to the left. 

When I try to do that the formatting breaks and the image is in the middle of the paragraph. Here is the preview link to the page: https://www.aventri.com/strategy/event-app-strategy?hs_preview=FNkmDsUR-8738496244

Any help is gretaly appreaciated thanks in advance! 

[Jsum]

Hi @damarley ,

This is a little tricky. You aren't actually dealing with an image, you are dealing with a cta. The image is wrapped in several inline element wrappers. You can't float the image and have the text wrap, because the wrapping elements get in th way. The hierarchy looks like this:

p (paragraph containing content and cta) > span.hs-cta-wrapper > span.hs-cta-node > a.cta_button > img.hs-cta-img 

to get the text to wrap, you have to float the the outer most span tag. You might have to do this manually, using the rich text editor's "view source" tool. I played with this using my browsers inspector tool:

https://embed.vidyard.com/share/qZt6HKqXZRTpfLKigRgUne?

You'd want to apply float left, or right, to the span tag with the class "hs-cta-wrapper".

[damarley]

Hi @Jsum,

Thanks so much for getting back to me so quickly. I was able to follow your steps in the video and add the flot tag using my browsers inspector tool. However, I'm having some trouble implemeting this same change using the HS rich text editor's "view source" tool.

Would you be able to provide me with some additional information as how I can do this in HS? This is what I'm seeing on my end:

<div class="column">
<p>“Mobile Event App - a piece of software downloaded from an app {{cta('95473902-784a-4bcc-a8ba-2308adfbc7c7','justifyright')}}store and installed on a mobile device such as a smartphone, tablet or smart watch, used within the context of a physical event with the intention of providing up-to-date information, enabling interaction and increasing engagement for all stakeholders involved.”&nbsp;</p>

Thanks in advance!

[Jsum]

Hey @damarley ,

for some reason I thought that there would be an embed code, but I see you are using the cta function that is inserted from the richtext editor.

That being the case, all you can really do is target the wrapping span tag to the cta with css in the head section of your post. You can find that in the advanced settings of your post's settings tab in the editor. css would look similar to:

.post_wrapper_class p span.hs-cta-wrapper {
    float: left
}

where post_wrapper class would be a unique class for the wrapper surrounding your post content. Place this in <style></style> tags in the document head. Be aware that this will target any cta wrapper existing in a paragraph tag in the post wrapper on the specific post you apply it to. If you need to float multiple ctas differently you'll have to get more creative with your css targeting.

[Kaeli]

Hello @Jsum 

I am trying this with the code in our blog with an inserted CTA. Please see attached code and how it is still previewing. Any suggestions here?

Here's a link to the live page as well - https://www.ubeo.com/blog/the-future-is-here-cloud-solutions-you-need-to-integrate

Ideally, this is how we'd like it to show. it's working in editor but not when published.

[Jaycee_Lewis]

Hi, @Kaeli 👋 I'd suggest creating a new post for this. As this post originated in 2019, some of our community members that can help may not see this reply. 

Best,

Jaycee