 So my name is Tyler Strike. I'm going to talk about images and hopefully cover all the basics and some of more advanced stuff. So a little bit of myself, I've been using Drupal since 4.7, so about 12 years. I was a freelancer for the first couple of years, but for the last seven years I've been working for the University of Waterloo. Everyone will ask me what we do at the University of Waterloo, so give you a little bit of background and so we're a team of ten people. We're made up of seven developers. Of these seven developers, we have our tech lead. We have a one person that does accessibility for not just our team, but also other websites across campus, so he does audits, etc. And we have one other guy that does just DevOps. We have two trainers. They do all the support, emails, RTs, etc. And they also launch new websites, whatever. We offload that stuff to them. We provide the tools for them to launch new websites, etc. And we have a system admin who runs a sensible service for us. And we have a backup admin who is our previous system admin if he goes on vacation, etc. And then we have one manager who manages our team as well as the portal team, which is the GoFu app for the in-house built app that every student uses on campus. And then every semester we might have one or two co-ops to help us along. So today I'm going to start off with the basics of images in Drupal 8 and how to set them up. So I'll also like walk through, do a demo of these things. So Drupal 8 comes with two content types, an article and a basic page. Now with the article, they actually come with an image. This is different from Drupal 7. Drupal 7 did not have an image field that came with out of the box, but what Drupal 8 it is. So if you're going to add a new image field, we click on add field and then select the image. They give you a couple customization, like a default image. You can specify which file types or file extensions you want to use. This is useful. If you want to limit the user, say you don't want them to upload animated gifs, you might take gifs out. So yeah, that's the basic. There are other ways to upload an image to your content type. You can actually use the WYSIWYG that comes, the CK Editor. I don't recommend this, but here I'll just show you anyways. So you can upload, there's a button, the image button. You can select the image and it gets uploaded. Now I don't recommend this way because the actual image gets hard-coded into the WYSIWYG. So it's not responsive at all. There's no way to apply different styles or anything. It's just that original image and that's what you get. There is another way, there's another module that extends, still puts in the WYSIWYG but extends it a little bit, which is called the insert module. So here's an example of a field with the insert module turned on. It allows you to, I'll just move this aside, upload an image and then you can select the image style and apply that when you insert. So if you click, so in this example here, I click insert, it inserts while this image is a little smaller. But if it was bigger, it would insert an image of 325 by 325. Now how do you control the display of the image? So I'm going to go back to the article. Instead of imagining a field, I'm going to manage the display. So this screen you see now is how it is with Drupal 7 and how it was with Drupal 8 before 8.6. With 8.7, there's now the layout builder. So this looks a little bit different. Sorry to say a little bit. So now that doesn't show you any fields of the box. But if you click manage layout, you can, now you know how the screen, you can manage what it actually looks like and see a preview in front. So for the image field here, the option is a placeholder. And you set configuration and then you get all the options. So you can set what, like, what image style you want this image to be. And you have a couple other options, like if you don't want to display the image yourself, you can display the URL to the image, etc. So you have to click on the gear and then it gives you the same options. And I was talking a little bit of image styles. So image styles are, you're manipulating the image. So either resizing it, scaling it, cropping, etc. So you have to set these things up yourself. So you have to go to configuration. Sorry, my slides a little slow today. And here's a bunch of image styles I've set up already. So I'll set up a basic image style just for testing. I never really called it. So you create a new image style and then you add effects to it. So here, well, here's a bad example. I have additional effects, but out of the box, there is not that many options. You can only do cropping, scaling, etc. There's like four or five of them. But with additional modules, you can have a massive list of like, in this list here, there's three different types of effects you can apply to your image styles. And later on we'll go over a couple of these. So the most common one you have is scaling, where you would set up the width and height. So say if you want the image to only be 200 pixels wide, you would just specify that. And this thing will keep the ratio of height to width. So in this example, it kind of gives you a preview with the hot air balloons. So if you have an 800 by 600 image, it will shrink it down to the same proportions. So 200 by 150. All right, so that's the basics. So as I mentioned, there's additional effects you can have. So in D7, the main one that allows you to have lots more effects is called image cache action. I believe this module did one thing when I first created one action, but then it kind of grew and grew and grew. So the name itself does not describe what it does. So in D8, they actually renamed it to image effects. So in the D8 version, everything that's in image cache action, as well as three other ones, text image, filter and smart crop, they combine them all together into just one module. So you can do like crazy couple of things. Like you see the image I have here on the slide, it changed it from a color picture to a black and white. It put a mask of some sort over, like a TV mask on top of the image. And you can do other crazy stuff too, like you can convert a JPEG to a PNG. There's so many things you can do. Now you might be asking, okay, how does Drupal do all this changing manipulation of the dashel images? Well, Drupal itself is not doing it. It's actually a couple of libraries that come on your system. So there's two main ones. There's image magic, and there's the GD library. So both of these are very old. The GD has been around since the 90s, and there's a maximum around from the 80s. Like back in those days, you had to use command line to manipulate the objects. For now, with Drupal, it's point and click. So they're both in the C. The difference between them, image magic can support more file types. So if you're allowing users to upload TIFFs and bitmaps, etc., you might want to use image map. But that's usually not the case now. Usually you're only uploading JPEGs and GIFs, etc. Because you want your image, just like TIFFs and bitmaps are really, really large files. So you usually don't want large content on your sites. You want them to be small as possible, and still have the same quality. So back in the day, image magic was known to have better quality images and smaller file sizes. But when GD2 came out, they pretty much have the same similarities in quality and size. So Drupal favors GD. I tried to research why they picked JD. I couldn't really find a thing. But from my understanding, when Drupal was in the first stages like 2.0 or whatever, back in 2005, the PHP support for image magic wasn't there. You could get it working, but it took a lot of effort. Where to set up the JD library was very, very easy. So Drupal jumped on board with that one. And then there was no point in switching to engine magic or anyone else. So it just kept that one. So at the University of Guaralu, we actually used the image magic instead of using what Drupal uses in core. And there's only one reason why we do this is we allow our users to upload animated gifs. And with GD, when you try to resize one of these animated gifs, it strips out all the sections, all the clips, where image magic actually makes it work. I kind of want to talk about when you create an image or set up a style and everything, there's actually quite a few people that are involved usually. So usually you get a request from the director, hey, I want an image of X size. And then the site builder, if he has the image styles that are created, can like, oh yeah, either he creates the image style or yeah, he sets the scale to whatever the director wants and away it goes. But sometimes images are more complicated and you have to have extra effects. So if you want that TV screen around your hot air balloons, you need to install additional modules. So then you would need a web developer to install those extra modules to add those extra effects for your site builder to use. And you need your assistant men to install the right library, either image magic or the standard GD library. So responsive images, so D7 did not have responsive images. Here's just an example of the image tag. It's just a tag, it's one image. If your user uploads a 2 megabyte picture of a kitten, then your users are going to download a 2 megabyte picture. If they're on a desktop or if they're on their phone, there was no real options. Now with HTML5, they introduced a new picture tag and where you can specify different sizes, different images to use based on the size of your screen. So in this example here, if your screen is bigger than 465, it will grab the kitten that's sitting. If your screen is even bigger than that, over 650, it will grab the kitten stretching picture. And if it's lower, it will use the one below. This is the standard default one. So the picture element has been supported for quite a bit. It's not supported in IE, but it's supported everyone else. If you have a user on IE, like your university, you installs IE, or you're in a different country that still uses IE, the people on phones don't use IE at all. So you can tell right about that if they're using IE, they're on a desktop. So you can serve them the bigger picture because you pretty much know that they're on a bigger device. So I'm going to demo now how to set up a response image for that image, the field. So right out of the box, when I added that image field, it's not responsive. It's just one image, or one image style that you applied. But as a way with DH, you have to enable the responsive image module that you can allow different sizes based on screen resolution. So yeah, as I first said, you have to install the responsive image module that comes with Drupal Core. So there's two steps. One, you define a suite of image styles and then add it to the actual field. So when you install the module, you have this extra configuration called responsive image styles. And you can set multiple different styles. You can specify one style per field. So I should specify first with Drupal 8, they have this new thing called breakpoints. I should have a couple of slides on this. I'll skip over that to that. So when you create a new theme in Drupal, you have this breakpoint.yaml file that you set up. And it specifies all the breakpoints in your theme. So at what resolution it should become a different context. So here's an example over here of what it looks like. It's always good to name these things with good names. You'll see later on that these names get exposed to the content creators. So if you give these like size one, size two, size three, size four, it's not that helpful. You should not just say, hey, this is when it's wide or extra wide. Then the content creators can go, okay, for this wide, I want the wide style versus, you know, X2 style. So when you're creating your responsive image style suite, you have to specify which breakgroups you want. So I was going to use the Bardic one for the sample. Bardic comes with three different styles, three different breakpoints. It comes with a wide, a narrow, and then a mobile. So in these, what I recommend doing is specifying just one style for that one. So for the wide, well, I don't have one set up, but say you want a large for the wide one, medium for the narrow, and then for the mobile, you can set something like a thumbnail, and you can save this. You also say like your fallback as well, if they won't fall into a group. And usually the mobile and the fallback should be the same. So now I've created the image style. Now I can apply it to my field. So I go to manage display. And then the format here is just defaulted to just image. I can now, when I saw the module, I now have this other option called responsive image. And then it gives me other options to specify which responsive image style to apply. So I've created the one just, I showed you, demo image style. And there we go. So when we create content with this one now, it will use those three styles based on your, based on the resolution. All right. So sometimes you have one problem with images, I get a lot, is you need something, you have an image you wanted to shrink, but you don't want to lose specific point. So say you have a picture of the president of Waterloo. No matter what the resolution, you have to make sure that he's not cut out. So how do you do this? How would you accomplish this? The simple way is to use this module called focal point. And what this focal point module does is it gives you a crosshair to your thumbnail. And you select which point that has to be in the image. And it will scale, crop around that point. That'll be the center point. If you select the top right corner, then obviously it's going to, that's not going to be the center. It's going to be the top right point. But no matter what, that point will always be in the image. So you have to enable this module and to set this thing up, you have to go to the manager's form display and specify which, the focal point is the one you want to use. Now there's only one other caveat for focal point is that the image styles that you usually use don't work. You have to set up focal point image styles. So here they have their own crop and their own scale and crop. So you have to select these ones. Only if you specify a style that doesn't have these two effects applied to it, then it won't work. And it's kind of misleading when you do this. Because you have the form with the cross hairs on it, but then that spot doesn't get it. It doesn't get, when you save it and you view the content, it doesn't crop around it and you can't figure out why. Well the reason why is you haven't specified in your image styles to use that specific focal point crop or that scaling. So focal point covers 95% of the use cases. However, you can, sometimes the user wants to have more control. They want to control what the picture looks like on every breakpoint. So say you have that picture of the president. And in that picture there's, she's hands shaking someone and there's like three or four people on the left and right side of them. So if you use focal point, it will make sure that the president's in the picture, but it might cut off the person to his left and cut off the picture to the right. So you need to give the user more control of what should happen. So the way to do this is there's another module called image widget crop. So it allows you to crop the image for every single breakpoint. Now the only thing with this module, it's very hard to set like it's tedious to set up. So we'll walk you through that. There's multiple steps. So the, both the focal point and the image widget crop module uses the crop API module. This module itself doesn't do anything. It's kind of like C tools. So a lot of the boxes and do anything, but it has the tools for these other modules to do what they need to. I'll show you, I might jump to the final, what you could see. And then I'll step back and show you how to set everything up. So for the basic page, I have set up an image field. Here, let's go to the creation page. So upload a picture. And then if you have the module set up, you have this crop image. And they're set up one crop type. If you have multiple crop types, I'll show you how to do that in a sec. So you'd set up a crop type per breakpoint. And then you'd specify what it looks like. So for this crop type, it will have whatever I set it to as. I'll set it up so with a better name. Alright, so first you have to specify the crop type. You usually want the names to be of the actual breakpoints. So you can call it wide. And the other thing too, if you want your image to have a specific height, say you want to be 400 high. And this is the wide, so say it's 1080, the width. Then you want to specify the ratio and keep it. So guys, what happens, let's try to show you. So in the previous example, the crop type, when I raise... I need to show it. It's hard to describe. Is this screen resolution? Sure. I mean size. Yep. So here, this crop type has a fixed ratio. So it doesn't matter what I do, it will always be the same. You can give the users difference so they can create a box whatever size they want. But the problem with that is when you apply image style effects, it will give them an image that they don't want. So in this example, this crop type is a ratio of 1280 by 400. So if they zoom in and go just the eye of this head shot, then the picture they'll get is that but zoomed out. So they still get what they want worse. So you specify the crop type. I'll specify a couple more. X, Y, 1280 for this. All right, so I specify three crop types. So now I have to go to that image... responsive image styles. I have to create a new style. So sorry. Now I have to create the actual... the image styles are not in here. So first I have to do that first. And four, it's the same thing like the focal point. They have their own effects they have to add or they won't work. I'm running short on time. So I'm going to just walk through. So I have a documentation that we use at the University of Arlu. So I'm just going to walk through that. It's probably going to be much quicker. So you have the break points. Then this is the responsive image styles. So here's all the different points. So at the University of Arlu we have actually five break points. There's some complicated stuff. So then we add one image style per break point. So the image style has their own. So either set it to manual crop. And then here I think we jump to this part. So we're jumping back to the basic page where I have it already set up. So to get it working I have to specify the image widget crop as the actual form display. And then in here I specify which crop types to have here. And the only image styles that have manual crop set will show up here. So if you first saw the module and you come here first, this list will be empty. So it's kind of confusing. So you have to actually create the image styles and then come back here. So I'll try to see if I can add one. Just so I can grow this listed too. I'm going to create a new image style called wide. And I can set the manual crop and edit. And I set the crop type. Save that. If I go back. You go to the form display. Now I can select wide as well. And in this case you want to select both of them and save it. So now if I go to the piece of content. You'll not see there's two different types. So yeah. So yeah you want to do this for every single break point. So any questions? I kind of jumped around quite a bit there. Yeah. What did the optimizing of the images do in terms of the DPI of the image? So images can come in at any DPI size. Correct. So like I've had people that have tried to load it between megabyte of images because that's what they get from the camera. I think I'll straighten the camera to the website. Yeah. So yeah the question was about the DPI's. So of the actual image. So it depends. If you have a dense image you upload. And the two things that happen. If you specify like around the eye. Then it will zoom into that spot. But the quality would be better. Because when you zoom it's more dense. So therefore it's like having a higher megapixel camera. Right? You can just zoom in more. So it allows you to do that. But yeah if you have a low DPI and you try to zoom you're at lower quality. After you, how can you stop at that point where you set the image and try to upload it like straight from the camera? Yeah. So like image optimization in the wild like you know if you do a live image optimization you always have a DPI field but this doesn't seem to have a DPI field. No it doesn't. So when you upload online you don't, you can't specify the DPI's. You can specify the maximum file size. So you can control that. So that's like one of the form settings. But you have like no control over the type of file the DPI's out of the files. And like there might be a contrib module that does that but Ella Box at Drupal Core does not do that. So let's quickly show you the maximum file size. So if you do maximum file size there's the actual server that controls how big of the file you can upload but also Drupal controls as well the actual file size. So if your server can only upload a two megabyte file and you stay in Drupal at eight megabytes it's so it won't be, you can only upload two. It's a rigid setting because if you have video then video will be more, if you want to upload video upload then you have to, like you can only have, it's only one setting. Correct. So yeah, video is a special case. It's, yeah, if you're going to allow your users to upload videos then you have to increase the file size, etc. Because all the people that I'm working with I just send them out to third party image optimization because if you can't, they don't understand about PPI and they don't understand that. Yeah, obviously. So this just doesn't work. No. No, Drupal does not, yeah, file optimization it doesn't do well. Yes. Are you showing a maximum image resolution there? I can't tell you. I don't know if it's, I thought it was in D7 but I could be wrong. Okay, so that's? Yeah, so that's this pixel base. Yeah. So you can specify that I don't want whatever, 200 by 2000 or 2000 but then again that's, it still doesn't, you can have a 100 by 100 image pixel image but extremely high DPI and you'll get around that. So you got a couple more things. Actually, oh yeah, that's good for now. Anyone else have questions? Yeah, Nate? Do you have any experience or anything to say about integrating with the digital asset manager? Like I know at Waterloo there was one when I left. Yeah. So yeah, at the University of Waterloo we use asset bank to get asset bank into Drupal. You have to use a retrieve module to do that. So there's quite a few digital asset management or dams they call them. Usually most companies, like third parties, they'll create their own module, retrieve module and then allows you to use their digital asset manager. Anyone else have questions? Yep. No, it's not. So we were trying to look into that, trying to find solutions. So yeah, if you upload an image, you specify, I think you're asking if you specify all the crop types for specific image, right? And then you want to use that same image with those crop types somewhere else? Yeah, so what we do is we optimize the images with the latest suggestions. So instead of having a 20 max, you reduce it to a site that is larger than you need with something manageable. And then so that we don't, we don't stop there from uploading large files. We just reduce them forcibly on the server and then you can use it for whatever, as a banner, but then you use it as a card, say one on the page. So you have access to that large image and then you crop it. We use the cropping. We don't use the full crop type. But then you reduce it to whatever site you need on either. So I guess if you define your responsive styles for either the card or the banner, you would have access to that. But I just wonder, like, is it possible to just have a couple of images once and reuse it? You know, just apply the cropping styles into a different set of images. Yeah, I know. You want to use the same in two spots. You have to manually set it here and set it again. Any other quick questions, or? Maybe that it's possible with the yellow. If you use the yellow to add the media entity and then you crop within that entity and you admit the entity within a week or a few weeks. Yeah, that might be possible. Because the crops go with the image or the entity, I guess you'd say, the file entity. Do you guys do the crops in the digital asset manager or always in Drupal? Always in Drupal. Okay, so you're only importing the raw asset from the digital asset manager? Correct. Using the digital asset management allows you to select the original or a scaled-down image, like low res or a specific size. And then that gets imported into Drupal and then Drupal does the resizing again per grade point. And then that's how the image gets on to the website. Yes? I can ask a question, actually, a generic question for anybody who can answer it about images. I had issues with, even though I wasn't doing any processing to the image within Drupal and uploading the image that looked good at the certain size would say 60 by 400. You upload that JPEG and the style is a 60 by 400 view. You live it alone, but it doesn't show as it shows on your image viewer. It's blurry and sometimes, it's depending on, I don't know, the image, you could have color shifts as well. Did anyone experience that? There's a setting somewhere about the image quality. Right, that's 100%. I said it for 100%, I don't want to do anything for it. Well, images have color settings too, so quickly the image itself on your machine is being, it travels with color settings, but sometimes it doesn't want the color settings to travel with the image. So you actually have to say, like if you say a setting photo, and you have your photo shot, a setting photo, but the time you're writing the image and it shows okay on their screen, but the image itself, the settings are like... It could be the metadata wasn't transferred properly. We had a university where someone has an image, it's blurry, but we didn't do anything different. I ended up actually uploading images that say, if I need the maximum container for 400, I ended up uploading, twice as big of an image, and straightened out just to have them start. We had a decision, and it was that, in the way you saw it, in the image side, you said you're using crop and state, you're just using crop. Because somehow, when they crop the image, they rescape the image last time, it was very difficult. Okay. So just crop instead of crop and state. Yeah. If you upload a picture twice as big and then shrink it, there's chances you'll lose quality, because it's not the same image. Yeah, it's like the sample, let's say when you're shrinking, it's like 4 pixels you might be dropping, depending on the algorithm. You can get really bad issues, it's always better to crop every single time. All right. All right, I'm going to edit there. If you guys have more questions, feel free to come talk to me after. Have a great.