images

WYSIWYG Editors: Issues And Options

The WYSIWYG (stands for What You See Is What You Get) editor is one of the most important features of any content management system. It's the glue that allows html neophytes (present company included) to format their posts just right without having to delve into the html code itself. The screen captures below show what the beginning of this post looks like with and without the editor.
 
Without the Editor
 
With the Editor

The difference in the ouput of the two editors this particular post is subtle because I haven't added any extras (such as bold, italics, or alignment) to that first paragraph. But I think many people (especially folks new to web development) will agree that the wysiwyg editor view is more familiar and more inviting when it comes to creating content. There are certainly many more possibilities for those who don't have html skills.

Which Editor?
As of Drupal 6 there isn't a wysiwyg editor that is part of the core release. So that means if you want to have pretty post editing then you'll need to select a module of choice, install, configure and hope like heck that it works for you. But what editor to choose? Some of the more popular ones are FCKeditor (seen in the screenshot above), TinyMCE and BUEditor. Because this is open source the landscape with respect to wysiwyg changes over time. FCKeditor still works with Drupal but there's a new version called CKeditor that represents the next generation. Another interesting but less popular option is Whizzywig.

Once you've made your choice of editor then you need to get it installed and configured which is not necessarily the simplest task. In the case of FCKeditor and TinyMCE you download the actual editor separately from the module then upload the files to somewhere in the directory of the module. This is a step that often causes a bit of confusion. Thankfullly there's now a module called Wysiwyg that eases the integration process for these editors. If you use Wysiwyg then you can just upload the editor's files to the sites/all/libraries folder which you would create and then use the Wysiwyg module to configure the editor. Wysiwyg makes it simple to try out different editors and it supports the most popular editors.

Having tried installing different wysiwyg editors as both standalone modules and via the Wysiwyg module I've come to the conclusion that the Wysiwyg module is the way to go. The one issue that I have had with the Wysiwyg module is the fact that you may not have access to all of the various configuration settings that you would if you installed the standalone editor module. The upside is that you have a much simpler install and configuration process.

Let's Talk Images
The inclusion of images is a very important topic that comes up when discussing wysiwyg. Content creators want a simple way to include images in their posts. Most editors make it easy to link to an image but uploading and inserting images into posts typically causes problems. IMCE (installed on over 60,000 Drupal sites) is a very popular option that works well for me. There are some headaches that occur when using IMCE with a standalone editor module. This is where the Wysiwyg module offers additional benefits. The IMCE Wysiwyg Bridge allows you to easily use IMCE along with your editors that are enabled via the Wysiwyg module. For the moment this only applies to TinyMCE and FCKeditor but it could change in the future.

It's worth noting that I think that IMCE works best when using it for inserting images into posts and not when you're looking to create a standalone image gallery. Because while IMCE does do thumbnails it doesn't create galleries or cover more advanced actions like cropping and watermarking.

Beware Input Formats
Input formats are something that you want to consider when using wysiwyg editors. Drupal comes standard with 3 input formats, Filtered HTML, Full HTML and PHP code. For the most part if you're editing posts with a wysiwyg editor and insterting images then you want to use Full HTML. Notice that I said you want to use Full HTML. What about your users? If people are signing up to write blog posts then you probably want them to use Full HTML too. But if you allow anonymous comments you probably want to have a more restrictive format like Filtered HTML that only allows certain tags.

Input formats can be a very complex topic. Make things easier for yourself and have a look at the Better Formats module. Better formats offers you more flexibility with your input formats for content types. My favorite feature is that it allows you to specifically assign an input format per role. The simplest example of this is giving authenticated (signed in) users access to Full HTML and giving anonymous (not signed in) users access to Filtered HTML. It also gives you separate options for nodes and comments. This is very helpful and allows you to fine tune your content editing much more than allowed by the core features.

Drupal 7 And Beyond
It appears at this time that Drupal 7 does not include a wysiwyg editor by default. A recent post I saw indicates that there will be, "Improved support for integration of WYSIWYG editors." That being the case installing and configuring wysiwyg editors will continue to be an important skill for some time in the future for Drupal site developers. Whether or not that's a good thing or a bad thing will depend on who you ask. Hard core, old school developers would probably rather choose and configure the editor they like best rather than being stuck with what the Drupal community decides is the best option. People newer to Drupal development would probably prefer a default editor that also handles post images as well. I think that a good compromise would be to have a default editor that admistrators can choose to disable in favor of a different editor.

If this is a subject that you're passionate or curious about then see the Wysiwyg group over on Drupal.org. Lots of good information and discussion over there.

Additional Learning

Bookmark and Share Bookmark or Share Post

Image Gallery Enhancements

This lesson shows you how to enhance the image gallery created in the previous lesson using Thickbox, Media RSS and Views Slideshow.

The premium version of this lesson is encoded at the full 1024x768 resolution as originally recorded.

Bookmark and Share Bookmark or Share Post

Create An Image Gallery With CCK, Views And ImageCache

This lesson shows how to create an image gallery using CCK with ImageField, Views and ImageCache. CCK is used to create a new "image" content type that contains an upload field for images courtesy of ImageField. ImageCache is used to crop and resize the uploaded images. Views is used to display gallery page and an accompanying RSS Feed.

The premium version of this lesson is encoded at the full 1024x768 resolution as originally recorded.

 

Bookmark and Share Bookmark or Share Post

Image Slideshow With The JW Image Rotator

There are a number of different ways to create image slideshows in Drupal. The Views Slideshow module is one option but doesn't seem to work with the Image module that I'm using on this site. Another option that looks very promising, and should work with Image, is the PicLens module by Cooliris.

I wanted to do something simpler to create a rotating image block on the front page of Learn By The Drop to showcase some of the Drupal screenshots that I've uploaded to my gallery. I decided to use the very simple JW Image Rotator as the tool to help me perform this task.

Step 1: I created a basic image gallery using the Image module. My gallery is located here. See this tutorial if you need guidance on how to do that.

Step 2: I used the Views module to create an RSS feed (http://learnbythedrop.com/gallery/feed) for my images. Check out my CCK and Views section for more information on the View module.

Step 3: I added and configured the Media RSS module because the JW Image Rotator reads the Media RSS element in order to display the proper photo.

Step 4: Download the JW Image Rotator and upload the files to a folder on your website.

Step 5: Add a new block to your Drupal site. Paste the appropriate embed code for the JW Image Rotator into the body of the block. Make sure that you have selected an input format of Full HTML. I have attached a sample file to this drop that you can use to start out. More information is available over on the JW Player Wiki.

Related Images

Example Block Views Configuration Views Styling
Bookmark and Share Bookmark or Share Post

Creating A Basic Image Gallery

This video shows you how to create a very basic image gallery with Drupal by utilizing the Image and Thickbox contributed modules.

Bookmark and Share Bookmark or Share Post

Image Gallery Options

Image galleries are a favorite feature of many social networks, blogs and personal websites. So it's no surprise that many Drupal users want a solution to integrate images into the sites they are building. There are many ways to accomplish this using Drupal but I'm going to point out two that have worked well for me.

Basic

You can create a very good, basic image gallery by using the image module and taxonomy. When you add the image module a link will be added to your administration menu called image galleries. That link will allow you to define galleries that you can add your photos to. You will also see a new content type called image that allows you to upload images one at a time. You can add a description to each image and add it to a gallery that you have created. You can see an example of this basic type of gallery by going to http://learnbythedrop.com/image. The image module also provides settings that allow you to define image sizes so that you can have automatic creation of thumbnails and preview images.

I've kicked my basic image galleries up a notch by adding the very simple Lightbox2 module. Lightbox2 adds a script that allows images to be overlayed on the page when clicked. This adds a very slick effect that makes it easy for site visitors to browse your images. The Image Assist module which makes it easier to add gallery images to your posts is also very helpful.

Advanced

If you're looking for image gallery functionality with stronger features then I suggest checking out the Gallery module. Gallery is different from other Drupal modules because its main purpose is to integrate your Drupal install with another piece of software. The software that you're integrating with is the open source Gallery photo organizer, which needs to be installed on your web server before you add the Gallery drupal module. The process of combining Drupal and Gallery is a bit complicated. But once the integration is complete you get some serious features that allow you to create an excellent photo gallery for yourself or an entire community of people.

I have integrated Gallery on a private family site for myself that is powered by Drupal. I do not recommending getting started if you are in a rush. You will be most successful if you follow directions and take your time. Gallery is a system in itself and you'll want to spend time learning and exploring Galleries add on modules too. You can see a Drupal/Gallery integration in action over on the Drupal Gallery Demo Site.

Custom Gallery Creation

If you're looking for something that is truly custom then you always have the option of creating your own image publishing process by using a variety of modules. You can use Content Construction Kit (with ImageField) to create a special content type for adding images. You can use the Views module to handle the display and organization of uploaded images. The ImageCache module can take care of post-upload processing tasks like thumbnail creation. You can find a very helpful  custom image gallery recipe on Drupal.org. The post is titled Create an image gallery using only CCK and Views.

Flickr Integration

Flickr is a hugely popular image publishing service. So it's very possible that you may want to use Flickr to power the gallery on your Drupal site. There is a module called Flickr that eases integration and allows you to embed photosets and create photo blocks on your Drupal site.

Bookmark and Share Bookmark or Share Post
Syndicate content