Home Page Slide Show - How to edit images to fit

Home Page Slide Show - How to edit images to fit

When working with images that will be used in your site’s homepage slide show, it can be somewhat difficult to upload images that fit very well depending on the actual image and how it was taken.  In this tutorial, we’ll walk through some editing steps that will help with these images.


The website is 1000 pixels wide, however, it is also responsive and can adjust the images to a certain extent. Images do not have to match the size requirements exactly, they can be a little larger than the required size, but they cannot be smaller. 

We'll need to be mindful of the shape or ratio of the slide show while editing the images. We'll want to try to keep that as close to the same ratio as possible, this can be especially difficult if the pictures are in Portrait orientation.

Your website will let you know what size images will fit best in your slide show.

Most of these edits can be done in a program like Paint 3D, which is pre-installed on most Windows computers.



Open Paint 3D and browse for the image you need to edit.


Find the image you need to edit, select it and then click Open.



This is the initial view on Paint 3D. We’ll navigate to the Canvas Tool. 
Notice that the zoom is only at 19% but this image looks full size.


In the Canvas Tool, you’ll see some Sizing Options on the right-side panel.



These are the most common tools we’ll use to edit the images for the homepage slideshow.

This image starts out at 6000 x 4000 pixels which is fairly common but images can vary in shape and size.
This is where we start to manipulate the image using the tools for locking the aspect ratio and resizing the image.
You can type in a new pixel size in one of the fields or you can grab the side of the image and drag it to size. 
Notice in this image that the pixels are smaller in number and the zoom is now at 100%, we kept the same image ratio and just scaled it down some.



Now since this image is not a similar ratio to what the website is asking for, we need to edit the 'shape' of this image. 
This will be done with the same method as scaling the image down. 

Now, with the aspect ratio and resizing image options deselected, drag the sides of the 'canvas' out and away from the image. 


 When you are adjusting the size of the image, both options for aspect ratio and resizing the image need to be checked.
 When adding space to the background, neither of the options should be checked.

The transparent background settings allow you to choose between an invisible background or one that is white and can be filled with color. 
This process is trial and error at first due to images coming from all different types of cameras, and each site has its own minimum size requirement. 
Be sure to
save your work.
** You can use the Save As option to save the file as a new image with a new title so that you can keep both copies of the image.


    • Related Articles

    • Embedding Google Slides

       In google slides, open the presentation you would like to embed 1.  Click on File and select Publish to web     2. Click on Embed (listed next to the link options) and pick your size from the Slide Size drop-down, select how quickly the slides will ...
    • Photo Album / Slide Show

      1. First, you need to create a photo album.  Click "Add Page"     2. Under the Media category, you will select "Photo Album" as the page type then select Next.         3. Name your page and add sidebars if desired. Save the page.       4. Back under ...
    • Full Width Slideshow stack

      Full Width Slideshow  What is the Full Width Slideshow?  The Full Width Slideshow stack item is one option for you to display images on your page. It is similar to the design slideshow available for your home page. The slideshow will be the Full ...
    • How do I resize an image?

      1. Go to https://pixlr.com/editor/ 2. Open the image from your computer 3. Go to Image - > Resize Image 4. Scale the image to the size you need. Be warned that resizing an image from small to large will distort the image quality. Click OK when you ...
    • How do I set a section home page?

      How do I set a section home page?  Why should I use a section home page?  In your Section with Sub-pages, you can choose to set a home page. This is the content that will be displayed when the section is navigated to. This option is intended to allow ...