Floating images

Support
#1

Hello,
I want to make an image float to the left of the text in the page, so that the text “wraps around” the image.
I tried using the “float” property of the image shortcode and adding float to the “p” element as well, but nothing worked.
How can In achieve this behaviour?

#2

Hi There,

Thanks for writing in!

Float property should work for the image. Can you please send us the URL of your site and if possible login details in a secure note so that we can have a look.

Thanks

#3

Sure,
You can see that in the page the image is between the heading and the paragraph. I would like it to be to the left of the text.

#4

Hi there,

Would you mind providing the link to the page that you are working on so that we can check it?

Thank you,

#5

the url I provided leads to this page :slight_smile:

#6

Hi there,

It seems that you have added “left” in the class field of the shortcode.

Please use either alignright or alignleft to the class attribute of the image and make sure you don’t put quotations to the class name.

Hope this helps.

#7

Works like a charm! Thank you very much!
I have another question: is there a way to add a small caption under the image?

#8

Hi there,

There is currently no direct way to add a caption to the image shortcode.

What you can do it so manually put the image and the caption text in a div and add some classes to them so that you could style the caption text. Also, if you will do this, you will have to add the alignment classes to the div.

Hope this makes sense.

#9

This makes sense, though doesn’t sound ideal, hope this feature will be added in the future.
In the meanwhile, can you provide a code example for such div with image and caption?

#10

Hi there,

It should be something like:

<div class="wp-caption alignleft">
    ... image shortcode here ...
    <p class="wp-caption-text">This is a caption</p>
</div>

Hope this helps.

#11

Thank you, works great! The div seems to have a small shadow around it. I set the border to “none” but it didn’t change anything. It might have something to do with the z-index or something of the sort. though I was not able to fix it, can you help?

#12

Hi,

To remove border and shadow, you can add this in Theme Options > CSS

body .wp-caption {
   border:0;
   box-shadow:none;
}

Hope that helps.

#13

Great, thanks!

#14

You are most welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.