Setting up an Image Style
0 (0 Likes / 0 Dislikes)
Setting up an Image Style
with Amber Matz
In this tutorial,
we’ll walk through the process
of setting up an image style.
By the end of this tutorial,
you will understand
how to add an image style
and use it to display images
on Vendor pages.
To follow along,
you should understand how to add
basic fields to a content type,
how to change content display,
and the concept of image styles.
On your demo site,
the Vendor and Recipe content
types must exist,
and the Main Image field
should be added to each.
Finally, at least one Vendor and
Recipe content item
should be created.
In particular, a large image
should be uploaded
to the Main Image field on each.
See the written version of this tutorial
for links to the prerequisites.
In the Manage administrative menu,
navigate to Configuration.
Then, in the Media section,
click on Image styles.
This is the path -
admin/config/media/image-styles.
Click Add image style.
Enter the name Extra medium,
and in parentheses, 300x200.
Click Create new style.
The page Edit style Extra medium
(300x200) appears.
In the Effect table,
select a new effect, Scale and crop.
Click Add.
Fill in the width as 300
and the height as 200.
Click Add effect.
The image style is now saved
with the chosen effect.
Now we can apply this image style
to the display of an image field.
In the Manage administrative menu,
navigate to > Structure > Content types.
This is the path
admin/structure/types.
Click Manage display
in the drop-down
for the vendor content type.
This is under the Operations column.
The Manage display page for the
vendor content type appears.
Ensure that the secondary
tab Default is selected.
This means we’re configuring
the display
for the default view mode,
as opposed to the teaser.
Click the cogwheel
next to Main Image
for the configuration options.
For Image style, select
Extra medium (300x200).
Link image to Nothing.
Click Update.
Now click Save.
The new image style will be used
when displaying vendor content.
Open a vendor content item
and verify that
it shows up with the
scaled-down image.
Navigate to Content from the
Manage administrative menu
and click on the title
of a vendor item.
Now, we can see that the
image is displaying
with the image style applied,
and is 300X200,
instead of the original,
very large image size.
Repeat these steps
for the Recipe content type.
And verify that the image
style is being applied
to the Main Image on the
Recipe content item as well.
See the written version
of this tutorial
for links to related tutorials
and additional resources.
In this tutorial, we added
an image style
and used it to display images
on Vendor pages.