Fixing Oversized Images0:33
we're going to refresh. And now we've got this image here, where one, it's a vertical, and the main focal point of the image is out of view. But two, on the show view, this is huge, you've got to scroll, scroll, scroll before you get to the content. It's just no good. So let's tackle these issues. Head to our code editor, go to the index template, and find our featured image. Here we go. Alright, so for this we're going to use Statamic Glide tag.
Using the Glide Tag0:59
Here we go. Alright, so for this we're going to use Statimix Glide tag. Now Glide is an alias for the PHP League PHP package for Glide. And pretty much everything this package can do can be done right in the tag with a couple of quick and easy parameters. First, call the Glide tag, pass it the name of the featured image. You can do it as the second segment of the tag call, or you can do this and pass the source in this way. If you prefix a parameter with a colon, this is kind of like a Vue.js style convention, it will interpolate the contents of the parameter.
Resizing Show Page Images2:49
Next let's give the same treatment to the show page. Make sure those images here are not gigantic either. Glide featured image, we can do it this way. Let's go to a view, looking at about 900 pixels wide. So we're going to say 1,800 by, say, 1,200. I always double the height and width values here to account for high-density displays. Let's refresh. You can see now that these files are 1,800 by 1,200. That fits inside those constraints. They're much smaller, only a couple hundred kilobytes, not a couple megabytes.
