This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
Alternate resources
Image styles are a great tool for working with images in your content, and it comes as part of Drupal 7 core. Drupal generates images for you using pre-built image styles as well as ones that you create. This means that you don't necessarily have to precisely resize an image before uploading it to your Drupal site. This series starts out with the basics of what image styles are and how you can use them, moves on to show some cool tricks, and then finishes up by showing how you preserve all that hard work and re-use it elsewhere.
I am going to show you how you can upload an image of any size and it will automatically display as the size/style that you designate by editing the display field settings for your content type. We are going to add an image field to the basic page content type and set the node display to use medium size of 220 wide by 220 tall. Being able to set a standard for image display creates consistency and a better user experience. Site builders and content administrators will also have less work because you don’t need to cut all of your images before you upload them. Drupal does all the work for you!
This video is about making custom image sizes for automatic display on your site! I am going to show you how you can create custom thumbnail sizes that can be used in your content types.
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! And we can specify the exact site we want to use.
I am assuming that you already know how to update the field display settings in your content type to select an image style preset.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled.
We are going to create an image display that has an aspect ratio of 4”x6”, but much smaller. Then we are going to add a couple other treatments to it so that it fits the theme of Photo Journal.
You can use custom image sizes for automatic display in your Views!
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! Not only can we specify what the image will look like at the node-level, we can also specify what the image will look like in Views.
I am assuming that you already know how to create custom image style presets, and are familiar with the Views module.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled and that you have already downloaded and enabled the Views module along with its prerequisites.
We will use the example of a blog, where we add our scaled images to display in the listing.
Let’s talk about taking your image uploads and turning them into unique shapes with fabulous effects using the ImageCache Actions module.
We already know that being able to set a standard for image display creates consistency and a better user experience. Drupal comes with the ability to do basic image manipulation like resizing them. By downloading and enabling another module, ImageCache Actions, we can do fancy things to those images, making your display truly customized.
I am assuming that you already know how to create Image Style presets.
For this tutorial, you need to make sure the Image module that comes with Drupal Core and you also need to download and enable the ImageCache Actions module. This can be found at drupal.org/project/imagecache_actions.
It is very time consuming and error prone to repeat "click steps" among multiple sandboxes, development and production in order to get your new image styles to appear. In this video, I will show you how to write code that turns your "custom" image style into a "default" image style so that you can use source control to update all of your site environments.
I am assuming you already know how to create image styles in the administrative interface. Familiarity with basic module development is helpful, but if you follow the techniques and patterns I demonstrate, you will successfully export your image styles into a new custom module.
