15-05 Cropping images to best for your page
Things have changed
00:00:05:02 - 00:00:17:29
Ever felt like your website images were doing that awkward dance? You know, when they not quite fitting together where they should? Well, today we're showing you a nifty update that will make your image struggles disappear.
00:00:17:33 - 00:00:28:04
We kept hearing how wrestling with image sizes was about as fun as trying to fit a square peg in a round hole, so we thought there has to be a better way. Well there is!
00:00:28:08 - 00:00:52:21
I have here a large container with an image inside. By default, images just fill the available space, keeping their original shape. But now you can choose to crop your images into a portrait, landscape, or square shape and select from various sizes small, medium or large. To find the cropping options, select edit on the image and then select the image in the draw.
00:00:52:25 - 00:01:18:27
Now here you'll see all the available crop options for this image. It is important to note that in this option, you aren't selecting which crop to use, but rather defining how a particular option crops to your image. Choose from different shape options like square, portrait, or landscape, as well as sizes. Drag the crop area to reposition what is visible, and then zoom in or out to focus exactly where you want.
00:01:18:31 - 00:01:40:25
Once you're happy, select submit. Now here we have the image crop option. This is where you select which crop you want to use. Out of the options we just customised. This step tells the website which cropped version to actually display your chosen shape and zoom level will now be maintained even when the screen resizes on tablets or mobiles.
00:01:40:29 - 00:01:56:14
Just like other blocks in SwiftFox websites, you can also still apply the familiar styling options above like animations, padding, borders, shadows and margins. For example, here I will add a shadow and apply a sliding animation.
00:01:56:18 - 00:02:05:11
And there you have it. Your images will now be perfectly positioned. No more awkward crops or stretched photos, just pure visual harmony.
SwiftFox Websites
lessons
Not what you were looking for?
Get in touch and learn how easy it is to join SwiftFox, our team is available to help you every step of the way.