Image styles explained - Drupal Tutorial

- [Instructor] In this video I want to talk to you about image styles. Now this is a topic that's pretty near and dear to my heart, since I live in the rural Midwest, where my download speed from my internet provider is four meg and my upload is 0.4. Yes for those living in a city, you heard me correctly four meg down and 0.4 up. So when you upload three and four megabyte images to your website and don't take care of them using image styles, guess what I'm doing when I hit your landing page? I'm leaving. So image styles are actually really important. Because our theme does some really neat things with images we're going to switch back to Bartik to demonstrate this principle. So I head over to appearance and make Bartik your default theme again please and then go back to structure, content types, business directory and manage display. Click on teaser and uncheck use layout builder and click save. So this is going to give us the basic built-in teaser mode for our business directory and here we are. You'll remember from past videos that we have the ability to change the size of any image that we have on our site. Click on the gear here and yours might be thumbnail or it might be medium at this point. Go ahead and change it to none or original image so we can prove the point. Click update and click save. Now go back to your site and click on business directory and you'll see these are the original images that were uploaded. If you scroll down and find a business where you uploaded a really large image, well you'll see the point. This is obviously not workable and this is my point as well. If this is a two megabyte image and I'm having to download this. well that's not great. Image styles will create a version of every single image on your site to this specific size requirements that you want and so if I want to show a nice little thumbnail that say 100 by 100 pixels, Drupal will actually create a version of every image on my site at 100 by 100 pixels and so people like me at in the rural US or anywhere else in the world for that matter, can now view your site much more quickly because your images are optimized. So how do we do that? Go to configuration, media and image styles. These are the ones that come out of the box including when we turned on the media manager, well, media library thumbnail was turned on as well and a Linkit result thumbnail from when we installed Linkit. All right, click add image style and let's call this 250 by 250 thumbnail. Now again, you can create these any way you want and you can call them anything you want. I like to put the dimensions in my name so I remember what it is later. Click create new style. This gives you a depiction of an original image and then one after we're done, well we've not actually done anything yet so let's click select a new effect and you have convert, crop, de-saturate, Resize, rotate, scale, scale and crop and again as always there are modules that give you more options here. I'm going to just going to click scale and crop, click add. You get to choose where the anchor is for your scaling. I'm just going to leave it in the middle and put 250 by 250, click add effect and so you'll now see my 800 by 600 image is scaled and cropped to 250 by 250, which is a nice square thumbnail. Again, you're able to make all kinds of image styles depending on your own needs. All right, I'm going to go back to structure, content types, business directory and manage display and click on teaser. Once again my business logo is using the original image style, click on the gear and you'll now see your new 250 by 250 thumbnail. Go ahead and click on that and click update. Scroll down and click save. Let's go back to our site and now you'll see our business directory has very consistent thumbnails and if I scroll down to my big OSTraining one, well because it was basically a square anyway it makes it look really great. So image styles takes whatever images you have and allows Drupal to render the images in the appropriate file size as well which is hugely important and gives you nice consistent look and feel. If I click on structure and go to content types, article and manage display, click on full content, you'll remember we're using layout builder here. I'm going to click on manage layout and you're going to remember that we put the image field here on the left-hand side. I'm going to click on the pencil and click configure and you'll see that here in layout builder we also see our image styles. Go ahead and choose 250 by 250, click update, click save and if we go back to our site and if I go into our latest news item, you'll note that our images are now 250 by 250.