Piltide konfimine | Siim Veskimees

Algne leht:

http://purewebmedia.biz/article/2013/01/10/inserting-and-floating-inline...

Minu soditud:

2. Float Inline Images with the IMCE, WYSIWYG, Filefield Sources, Insert, Float Filter Modules:

Necessary Modules:: http://drupal.org/project/imce; http://drupal.org/project/wysiwyg; http://drupal.org/project/filefield_sources; http://drupal.org/project/insert; http://drupal.org/project/float_filter

Editor:: http://tinymce.com or http://ckeditor.com/ (3.6.x)
Optional:: http://drupal.org/project/video_filter; http://drupal.org/project/pathologic; http://drupal.org/project/image_resize_filter

How to:

A. Install and activate the necessary modules, then go to your Text Formats and create a custom format for your users. It is rarely a good idea to allow users to use Full HTML, so it's best to make your own format to give you better control over what goes into your content. Check the following so they are activated:

Limit allowed HTML tags
Convert URLs into links
Float Filter
Correct faulty and chopped off HTML
(optional) Correct URLs with Pathologic

B. The Filter processing order is important and I have mine set to:

+ Float filter
+ (optional) Image Resize Filter
+ Convert URLs into links
+ Limit allowed HTML tags
+ Correct faulty and chopped off HTML
+ (optional) Correct URLs with Pathologic

C. For the Limit Allowed HTML Tags, add in whatever is appropriate for your site. I use at least the following:

<h2> <h3> <h4> <img> <span> <p> <div> <br>

...so your full allowed HTML tags are:

<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <img> <figure> <figcaption> <span> <p> <div> <br>

D. Save this page and then go to the WYSIWYG configuration page, select CKEditor or TinyMCE as your editor and configure. Activate the buttons that match your allowed HTML tags, including Image (you'll need that for floating/alignment options). Make any other settings you want for the editor and click Save at the bottom.

E. Set up IMCE. The point of using IMCE is that we want to give users a chance to reuse items they've already uploaded. If that's not important to you, you can skip this IMCE section and head to F below. For those interested in having a browsing capability, read on. Go to the IMCE configuration screen and create a new profile called 'Authenticated Profile' and set the Directory Path to:

<root>/users/%uid

My goal here is for a large site with potentially hundreds of users, and their respective uploads will go into their own user directory. If you check the 'Including subdirectories' checkbox, then these users can see all the directories and files info inside their own. Again, it depends on your needs. Since the files in here are uploaded through content type fields, I will only allow them to Browse, possibly Resize but nothing else. I don't want to allow Uploads through IMCE, nor do I want users to Delete from here because the point is to make all the files in here accessible by Views, or other modules that need field-based data. IMCE's uploader feature doesn't give Drupal awareness of those files elsewhere in the system.

Now, if you also want a shared directory where perhaps a dozen users with a role of Editor can view common files, then you can also create:

<root>/users/shared

...and check the 'Including subdirectories' checkbox. In any case, once you're done here but don't forget to set on the main IMCE configuration page (/admin/config/media/imce) which roles can use the profile(s) you just created. You're done with IMCE.

F. Now, for the actual content type(s) that you want be able to insert images into text areas, add an image field (field type: image; widget: image) and with both Insert and Filefield Sources enabled, you'll now have extra options for this field. Taking the example of a Basic Page, I'm going to set my file directory for this image to:

users/[current-user:uid]/page/image (or use tokens if you prefer)

See how it matches up with the IMCE path? Now if you want users to upload all to one common directory then you'd set this field to:

users/shared/page/image

I prefer to set a 'Maximum image resolution' to prevent users from uploading gigantic images 5MB images, so something like 1200 x 1200 as a max height and width should do. On this same page, when you see the INSERT option fieldset, open it and at least check 'enable insert button' which will allow you insert your uploaded image into the text body. For FILE SOURCES, enable the 'IMCE file browser' and in the IMCE FILE BROWSER SETTINGS, choose one of the two options (I prefer the default first option). If appropriate, set the Number of Values field to Unlimited but regardless, once you've saved any additional settings for this image field, go to 'Manage Display' for this content type and set the label and format to 'hidden'. Remember, we want the image to show in the body, not also as a separate field.

Create a new node, select or upload an image, insert it into the text body and then use the image button in the toolbar to set the alignment to the left or right. (Note: if you are using the Image Resize Filter, you will also have a chance to resize the image in the body with the image corners. This assumes you have enabled and set up Image Resize Filter according to the Readme.txt in that module's directory.)

When you save the node, thanks to the Float Filter, span tags are now put around your image with a class of "floatright;" or "floatleft;". All you need to do now is write a CSS style or two to actually float based on this class and you're done. For example:

.floatleft {
  clear: both;
  float: left;
  padding: 4px 10px 4px 0;
}

.floatright {
  clear: both;
  float: right;
  padding: 4px 0 4px 10px;
}

Optional:

The Image Resize Filter is a wonderful tool that creates and manages a resized inline image. However, note that it creates a new image based on the altered size and maintains an absolute path for an image. To compensate for this if you are working on local or staged development environment where you might move the site to a different location, download and install Pathlogic and set your domain to the live domain (see docs on pathlogic). Also, you have to set the order of filters to have the Image Resize Filter called before the WYWIWYG Filter but after the Pathologic filter.
The Video Filter module is excellent for inserting remotely hosted video (YouTube, Vimeo, etc) into the body content via the WYSIWYG toolbar. You can set the dimensions of the video and the alignment. For a video-only solution, I prefer it to the Media module. However, if you need to make a gallery of videos from a node, you are limited because the video is not using a field.