Drupal 7 Nginx.conf Fix For Missing Images Styles

Nginx and Image Styles generation does not work out of the box in Drupal 7. You'll need to add a few extra lines to your nginx.conf file for it to work.


What Are Image Styles

If you’re not yet familiar with the Image Styles system here is the closest thing I could find to official Documentation: Drupal 7 Image Styles

This video tutorial also might be more useful:

YouTube Preview Image

Image Styles Video Tutorial From Lynda.Com

In Drupal 6 you had to use a combo of CCK, FileField, ImageField, ImageCache and possibly a few other modules depending on your needs to create an image field. Now Image Styles and the new Field API take care of all of this.

Image Styles In Nginx

If you plan to upload Image files in your Drupal 7 install in a Nginx environment you’ll need a fix in your nginx.conf file for everything to work. Otherwise you’ll only have access to the originally uploaded photo.

Uploading an image works fine using Drupal 7 in Nginx but unless you know to look for the thumbnail to appear beside it after upload, you may run into confusion later on. When you go to use the image_style_url() function for example. Notice after you upload an image a little ajax call should trigger which generates your image and puts it in place shortly after you submit it. It should look something like this:

Image Styles is working here!

To get this to work properly like shown above, add the following to your /etc/nginx/nginx.conf file.

location ~* files/styles {
    access_log off;
    expires 30d;
    try_files $uri @rewrite;
location @rewrite {
    rewrite ^ /index.php last;

(Thanks to Perusio for this!

If you don’t, then it will end up looking like this:

Image Style was not auto generated here

Nginx Configuration Resources

From what I can tell, neither of these resources had the change mentioned above in them. Remember to add it in.

If there are any additional reasources I might have missed, please post in the comments.

Also, as a general resource for those who are running Nginx, Drupal.Org Nginx Group is incredibly useful for finding other great tweaks.

Respond: Leave A Comment | Trackback URL

Entrupeners, Subscribe for the lastest tools, tips, and tutorials.

One Response to Drupal 7 Nginx.conf Fix For Missing Images Styles

  1. stan

    Hello Rob,
    I’ve got following problem..
    Installed Drupal 7.2 on virtual shared server with “open_basedir restriction”.
    I’ve managed to set public file system to: ” ../../public_html/drupal7/sites/default/files ” to avoid Warning “open_basedir restriction in effect”.
    After that i created a new content (Article), uploaded an image (i couldn’t see preview of this image), saved the content and opened it in my browser.
    Unfortunately i couldn’t see uploaded images (thumbs) in my newly created Article. I found out It’s only happened when Clean Urls were enabled.
    When i turned the Clean Urls off images were visible.

    May it has anything to do with image styles?

    Any help appreciated…

    ps. sorry for my English..

Leave a Reply

Custom Theme by Rob Malon | Content & Design © 2010 - RobMalon.Com - Chicago, Illinois