[CMS] How do you align images left or right?

[Mermaid]

I have added an image, but I want to float it either left or right with text flowing round it. It seems to automatically do that with the thumbnail in the preview, but i can't figure out how to do this on the actual page.

Can anyone help please?

[TbChampions]

I have added an image, but I want to float it either left or right with text flowing round it. It seems to automatically do that with the thumbnail in the preview, but i can't figure out how to do this on the actual page.

Can anyone help please?

I've had to use HTML code and upload the photo to the site with FTP. I've not been able to figure another way to do it either.

[Mermaid]

But on this page:

http://www.vbulletin.com/forum/content.php?44-How-to-Create-a-New-Article

it says:

5. Image Settings Pop-up: Clicking on the image in the WYSIWYG will bring up the "Image Settings Menu" that allows you to set Image Alignment, Size, Title and Descriptions, and even enter CSS Style.

[anthonyparsons]

You can align images when editing them within the article, as above, hover over the image and the edit pencil will appear, click the edit pencil and an edit window will popup. Make appropriate changes and save. Regardless, this alignment is for the article page, not the article preview. That uses its own CSS which you can control via stylevars and adding any custom solutions manually.

[Mermaid]

You can align images when editing them within the article, as above, hover over the image and the edit pencil will appear, click the edit pencil and an edit window will popup. Make appropriate changes and save. Regardless, this alignment is for the article page, not the article preview. That uses its own CSS which you can control via stylevars and adding any custom solutions manually.

I don't get anything like that in the editor, all I see is code for image, not the image. (see attachment)

[anthonyparsons]

Are you using Chrome? If so, you need to use another browser, as Chrome is a stripped down browser that doesn't accept the majority of WYSIWYG facilities (my understanding). Use Safari, FF or IE to take advantage of WYSIWYG built-in facilities. Browsers are not created equally.

[jarod1981®]

Hello Mermaid,

in the editor you must click once on the image, than you see a pencil on the left-side:




Than click a second time on it and after few seconds will open a little window where align the image:



Done

Destra = Right

Sinistra = Left

Centro = Center

Nice Day

[Mermaid]

Are you using Chrome? If so, you need to use another browser, as Chrome is a stripped down browser that doesn't accept the majority of WYSIWYG facilities (my understanding). Use Safari, FF or IE to take advantage of WYSIWYG built-in facilities. Browsers are not created equally.

No I'm using Safari, and all I see is the code, no image to click on (as in my attachment above).

However I've just tried Firefox and I do see an image in the editor, but I still cannot edit it.

Hello Mermaid,

in the editor you must click once on the image, than you see a pencil on the left-side:


[ATTACH=CONFIG]46196[/ATTACH]

Than click a second time on it and after few seconds will open a little window where align the image:

No, as I say above, now I know to use Firefox I do get the image finally (one step closer to this working, hooray!), but no pencil when I click on it. I try clicking and waiting, clicking and holding, double clicking, right clicking, clicking and shouting...

[Project-Buckfast]

That feature doesn't work in Safari yet.

I see the pencil icon in your attachment, top left icon. Try clicking off the image, then onto the pencil again.

This works in firefox on mac. So worst case scenario, try deleting the attachment and adding it again.

[Mermaid]

That feature doesn't work in Safari yet.

Thanks for the info, that explains the the first problem!

I see the pencil icon in your attachment, top left icon. Try clicking off the image, then onto the pencil again.

No, I think you are looking at post #7 (jarod1981®'s example). My example is post #5, no pencil.

This works in firefox on mac. So worst case scenario, try deleting the attachment and adding it again.

It isn't an attachment, it's a file linked from a remote URL.

[jarod1981®]

Try to delete cache and cookie of Firefox, then close and restart it

[digitalSite]

ROFLMAO! I'm sorry, but I just wanted to say thank you for making me laugh this monring. To me, this thread was hilarious simply due to several people "clicking on little edit pencils" and trying to get this thing to work. I have been trying to get my text to wrap around the image for about three hours today and two hours last night. I now have a headache and trying to get it to work before I go take a nap.

Anyway, I don't see an edit pencil while reading the article, when I click on the image, a grey pop up pox appears with only my image. I've hovered every inch of that box and there is not text no nothing. The only place I see the edit pencil is in edit mode of the article and even when I click on the image there, the only thing that happens is that the pencil itself is highlighted.

I think I am going to try manually uploading my images to a folder using FTP and attempt to use HTML to make it do what I would like it to do. I am using IE 8. Thanks for the laugh.

[digitalSite]

FINALLY! Ok, I finally got my text to wrap around the image. Here are the steps that I did to make this work:

1) Go to your Admin CP>VBulletin CMS>Clear CMS Cache to wipe out any cached screens you might be looking at.

2) Go to your article and click on the pencil by the title to edit that article.

3) Click inside your text to where you would like the image to appear. (Not sure if you have to do this, but that's what I did.)

4) Click on the Manage Attachments button at the bottom of the article editor. A pop up screen will appear called FILE UPLOAD MANAGER.

5) If you don't have your image in the gallery there yet, click on the ADD FILES button, located at the top right-hand corner of that pop up screen. If you already have your image shown, then click-hold + drag to the bottom of that screen under ATTACHMENTS.

6) Then click on a button called "INSERT INLINE (1)" located to the right-hand corner of that same pop up screen. When you click this button, your image will be added to your article box. You are "inserting the image inline" with the text. If it doesn't work, which happened to me frequently, click inside the text where you would like your image to go, go back to the FILE UPLOAD MANAGER, which is the pop-up screen, select your image by checking the checkbox on lower right-hand corner, and click on INSERT INLINE button again.

7) Once your image appears in the article text, click the DONE button on the FILE UPLOAD MANAGER pop-up screen. The pop-up screen will go away.

8) Ok, now looking at the article editor, if the image got placed somewhere in the text box, just move the image to the very beginning of the text, so that the very first thing is the image.

9) Now here is the secret hidden code that everyone must decipher in order to use this CMS thing...click OFF the image so that you don't see the little squares all around it to resize, and then hover over the image so you see a yellow pencil located at the top left-hand corner of the image. Now, click on the pencil. If the pencil itself gets the little squares all around it, click OFF the image and try again. When you click the pencil, a new hidden screen pops up, just wait for it to load! Yey! We are almost done.

10) In this new pop-up screen, set the alignment and size of the image. I set mine to RIGHT. Here is another hidden secret...FULL SIZE doesn't seem to work, so use LARGE. Complete the other attributes if you wish. You can also add float:left; in the STYLES field if you don't want to use the alignment part of the screen. I left those fields empty. Press DONE.

11) Ok, now, looking at the article editor again, you will see your image name attached to the bottom of the article editor, and you will also notice that your image is in the same place you placed it. IGNORE that it didn't realign or do what you just told it to do.

12) Press APPLY and SAVE your article.

13) Look at your published article. Did your image appear? If not, go back to Step 1 to clear your CMS cache and then refresh your home page or article page again. Your image should be there and the text wrapped around it.

I am using IE and vB 4.0.5.

I hope this helps someone

[is_it_me]

FINALLY! Ok, I fonally got my text to wrap around the image. ......

I hope this helps someone

Top banana!

Thanks for that – I’ve been waiting on an answer to wrapping text around images for ages, and that works for me.

Hope you enjoyed your well deserved nap.

[Dave-M]

sorry to bump this, but is there any way to do this for files that were upped to the server rather than attached? I can't make this work for either.

Even if I clear the CMS cache, I can't ever see the little yellow pencil at the top left of the image that you mentioned.

Any ideas anyone please?

I'm on 4.0.5 at the moment.