Images in Drupal using the Media Module, WYSIWYG and Adaptive Image Styles

(Image: Thomas Finc)

There are a lot of ways of managing images with Drupal, embedding them into content and return them to the user. In this blog, I decided to use the media module. The module is in an active development state and many modules are offering implemtation with it. As I would like to offer as much responsive functionality as possible, I would like my images to be served in the correct size to the client to avoid using unnecessary bandwidth.

 

At the end of this article, there will be a feature provided which offers this functionality. 

 

1. Preparations

 

Needed Modules:

 

 

Also:

CKEditor

The editor has to be installed at sites/all/libraries/ckeditor .

 

2. Configuration

 

After enabling the modules they need to configure like described below.

 

Media Module

 

The following settings can be set at admin/config/media/browser 

 

 

The following settings can be set in the "WYSIWYG area":

 

Enabled Browser Plugins:

 

The following plugins are available:

 

Upload: The upload dialog allowing to upload files. If you want all files to be uploaded via "Content->Files" instead, do uncheck this box.

 

Library: All files will be stored in the library and are ready for later use.

 

My Files: This plugin holds all files uploaded by the editor.

 

Web:  This plugin offers embedding code from websites like youtube.

 

File Directory: By default the media module uses the standard files directory. Using this setting allows you to configure a different directory, i.e. using directorys per user.

 

Allowed Types:

 

The media module can also use video and audio files. 

 

WYSIWYG Module

 

First of all we have to check if the CKEditor has been successfully installed. 

 

This can be checked at admin/config/content/wysiwyg by clicking on installation instructions. 

Afterwards we have to add the editor to the input filter we use by chooseing the editor in the dropdown menu.

 

 

 

Now we are adding the media button by configuring the profile at "buttons and plugins". Look for "Media Browser" and check the box next to it.

 

After that we have to have to make sure that the input filter understands the media tag. By accessing  admin/config/content/formats/ we can edit the proper input filter and mark the "Convert Media tags to markup".

 

 

 

Adaptive Image Styles Module

 

The AIS module is providing image styles for different screen widths. The default settings are pretty fair to begin with.

 

The following settings have to be made in order to get the module to work:

 

 

At first, we have to edit the settings.php by adding the following line at the end of the file.

 

$conf['image_allow_insecure_derivatives'] = TRUE;

 

After that, edit the .htaccess file by addin the following code BEFORE # Pass all requests not referring directly to files in the filesystem to 

 

# AIS: Adaptive Image Style RewriteBase / RewriteCond %{REQUEST_URI} ^(.+)/files/styles/adaptive/(.+)$ RewriteCond %{REQUEST_URI} !/modules/image/sample.png RewriteCond %{HTTP_COOKIE} ais=([a-z0-9-_]+) RewriteRule ^(.+)/files/styles/adaptive/(.+)$ $1/files/styles/%1/$2 [R=302,L]

 

It should look like this:

 

Thats for the configuration.

 

3. Using everything together

 

Now it is time to upload images with the wysiwyg editor. Create a new node and look for the media button .

 

 

In the last step of embedding your image, make sure that you select "adaptive" as current format!

 

 

Everything should work as expected now.

 

For testing purpose, I suggest you use: http://respon.si/

Comments

very useful,
I'm working on my first responsible drupal site ...
thanks :)

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Category: