WYSIWYG editor field - image float and wrap?

[FuturShoc]

I'm brand new to PW and would like to find out how you guys are handling a need for image placement in a WYSIWYG field. We almost always need to place an image in a page's content with text wrapping, floated left or right.

However, I don't see a way to do that in the default TinyMCE...?

[DaveP]

Use the 'Insert Image' button in TinyMCE (looks like tree), and any images on the page will show up in this dialog. You can specify alignment and resizing here by default. There are modules for more advanced image manipulation.

Then just make sure your CSS has classes to match your intentions.

[Joss]

HI and Welcome FuturShoc

Adding an image to a TinyMCE field requires an additional image Field.

On your template, add the Body Field (which is already set up with TinyMCE) and the image field which already exists.

Go to page and add a new page, selecting your template.

On the .....

Oh, blast - dave got there first!!!

Well, just to finish, when you click on the image button on TinyMCE it will open a custom insert image popup which will list any image you have uploaded with the image field.

Choose one of them and you will be able to resize it and choose its alignment.

As DaveP says, you just then need to make sure you have the right CSS.

If you are just starting out, try the Panet project but also, you may want to have a go at this much more detailed tutorial: http://wiki.processw...ebsite_Tutorial

Good luck, and keep asking questions!

[FuturShoc]

Thanks so much for your help, guys.

So, as I understand it, I essentially have to *attach* a photo to the page using an additional field before I can place it using TinyMCE?

** Updated: I see now. So, the new "images" field I create and add to the template serves as a repository for images that I will want to insert INTO a given page derived from that template. This will take some getting used to. Other CMSes I've developed with tend to store images in a single common "container" of sorts. This container would be accessible by any page and any template.

I guess its just something we'll have to un-learn.

[Joss]

Hi FuturShoc

It is not really attaching an image to the page, just upload it using the image field that you have included in your template. Because this is as much of a framework as a CMS, tools like images dont come with templates by default, you have to add the capability. Obviously, it only takes a few seconds, but it also means if you don't want to include images, you don't have to.

By the way, you can upload more than one image with the image field and you can also just call that directly into the template. So, if you wanted a Main Image in your article, but don't want the user to mess up how it appears in the text, you can sort out how it is laid out at the template level.

If you do that, you may want to remove the image button from the TinyMCE field you have created so they cannot add an image to the text. (Go to the field, edit, input tab and you will see the configuration area)

In the template file that you associate with the template you will not need to call the image field since the image address will be part of your TinyMCE output as normal.

It is very much like using the Wordpress image system, to be honest. You can even select an image from another page if you wish.

Note: there is also a very good thumnails module that allows you to preset loads of thumbnails and so on. It does not associate with TinyMCE so is perfect for images that you are directly calling into your template. You can then add all the JQUery you want to mess around with them on your page

[FuturShoc]

I guess what threw me about how PW handles image uploads is adding an "image field" to the template. This, in my mind, implies that any page derived from that template is inheriting its own images "container".

But from reading your clarification, I gather that this images field is more like adding a "portal", of sorts, to ProcessWire's image directory...

Correct?

[Martijn Geerts]

If you add an images field to a template say: "basic" template ( the name is up to you. )

Then, a page using that template wil create a folder in: /site/assets/files/id-of-the-page/ and put those images in that folder.

So basically images are attached to a page. ( Not that you ever have to know where the images physical are stored )

To use those in tinyMce, you have to click on the image button.

If you want to reuse images, say you want images for a header, storing those images in the home template could be a nice option.

Then assumed that your images field called images is populated with images and is the home page, you can get those images in every page like:

$home = $pages->get('/');

$imagesArray = $home->images;