Placed in: Home arrow Useful arrow Features arrow Delivering responsive images with Drupal viagra australia
viagra online
viagra sale
cialis online
cialis australia
Delivering responsive images with Drupal

For most web developers, delivering the images to the low-bandwidth mobile devices could not be less than any brain teaser, where they feel like they have been stuck in a complex task, just like searching a needle in the dry haystack!

Well, it could screw-up the brain! Even the developers, who are well-acquainted with responsive web design techniques, know that by setting the max-width of the images up to 100%, can't resolve this issue as the server will still render big size image to the user's phone. The mobile optimized web applications are designed to run smoothly for the low bandwidth connection with formatting according to the screen of the device.

Delivering responsive images with Drupal

So with this blog, I intend to alleviate your pain involved in the job of providing responsive images with Drupal CMS. The blog offers sheer guidance for devs, where they can obtain the detailed information of the procedures explained with the help of useful images. Read the blog as it provides a solution for having Drupal website for bandwidth starved mobile devices.

Adaptive image module

Responsive images with Drupal 01

The Adaptive Image Module will help you to obtain device-appropriate versions for the images. Download & extract it to your site. Then log-in to your Drupal dashboard with authentic user_id & Password. Jump to Admin > Modules. Enable the settings (for Adaptive Image Module with putting a check on the provided box & save configuration.

Adjust Module

Responsive images with Drupal 02

Go to Admin > Configuration > Image styles. Click Add Style to generate a new image and name it adaptive (use lowercase alphabets, as this name is used in URL). Currently there are no effects in this style, so you can add them through 'Add' Button next to it. Besides adding effects you get multiple options like scale, resize, rotate, crop etc. (as you can see in the provided image module).

Set Breakpoints

Responsive images with Drupal 03

Here you can set resolution breakpoints. The module has 4 resolutions by default. Choose the appropriate on and hit Add Effect.

Configure content

Responsive images with Drupal 04

Go to Admin > Structure > Content Types, here you can configure the content to be used in the new image style. Click the manage display link under the 'Operations' and next to edit & manage (as shown in the image). In manage display, you could use the desired image style as per your need.

More options

Responsive images with Drupal 05

Go to Image style drop-down menu, then select adaptive. Store the desired settings with Save button.

Adaptive image styles

Responsive images with Drupal 06

Download the Adaptive image styles and extract to sites/all/modules. Go to Admin > Modules> Media. Tick the box & hit Save Configuration.

AIS changes

Responsive images with Drupal 07

AIS is helpful in making changes to your web server's file (.htaccess or web.config)

Breakpoint edits

Responsive images with Drupal 08

During installation the AIS will create several adaptive image styles that fall under image styles. Navigate to Admin > Configuration > Adaptive Image Styles for configuration, where you can edit breakpoints for the adaptive images.

Set node type

Responsive images with Drupal 09

You need to set your node type for adaptive image style, once the editing of breakpoints is done. Go to Admin > Structure > Content Types> manage display link> cog icon and modify the image style to adaptive.

Client-side adaptive image

Responsive images with Drupal 10

Download the Client-side adaptive image project and extract it to sites/all/modules. Go to to admin/modules> Media, tick the box and hit Save Configuration. Reference of Mairead Buchan's use of the noscript tag.

New techniques

Responsive images with Drupal 11

When working on Client side adaptive image, first you need to set the breakpoints. There are five available modules by default. Simply go to Admin > Configuration >Adaptive Images and set the desired value for the number of breakpoints (just like I have set the value to 3).

Add more styles

Responsive images with Drupal 12

For configuring the image style, navigate Admin > Configuration > Image Styles> Add Style. Here you can pick the scale and click Add and then Add Effect. We are setting the width as 420 pixels.

Further sizes

Responsive images with Drupal 13

For further sizes, we will create new image style (730_med) with setting the scale width to 730 pixels and another style (1020_large) with setting to 1020 pixels. Finally, you will have 3 new image styles.

Content type

Responsive images with Drupal 14

Navigate to Admin > Structure > Content Types> manage display to set our content type for new styles. As the client side adaptive image will use different format, so change the Image to Adaptive Image.

Configure styles and breakpoints

Responsive images with Drupal 15

Click on the cog icon, once the content formatter for the image has been modified. In the appeared screen, you can see that configuration for the breakpoint with image styles is done.

Responsive images and styles

Responsive images with Drupal 16

Once done, it dynamically changes image style using JS that identifies the small size. Download the Responsive images and styles and extract to sites/all/modules. After log in, navigate Admin > Modules> Other. Check the box and Save Configuration.

Several styles

Responsive images with Drupal 17

For several styles, create a few image styles. Suppose we are naming it demo_narrow, choose the scale from the effects drop-down and click Add. Then you can set the width (420 pixels) and click Add effect. Similarly create two more styles and scale them (730px and 1020px).

Associate styles with breakpoints

Responsive images with Drupal 18

Navigate Admin > Configuration > Responsive Images and hit Add. As seen in the above shown example, set width to 420, suffix to and _narrow and label to Narrow. Now you can create similarly create the other two responsive image suffixes.

Ready to roll

Responsive images with Drupal 19

In the Responsive Images Configuration page, choose the Settings tab provided on the top right of the page. By setting the default suffix to _narrow, hit Save Configuration. Once done, the style modules and responsive images are ready and will behave appropriately on your end-device!


Tags:  drupal responsive images guest post

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
 
Next >
Subscribe

Subscribe to Marcofolio