Add Images

Before we add images to our website, let's first review image placeholders on SwellSpace templates. Image placeholders can be identified by an image graphic shown below.

To add images, click on an image placeholder graphic or the corresponding “edit” pencil icon next to the image placeholder graphic. The example below is only one of the many different image placeholders in SwellSpace, but the process of adding an image is the same for all. Let's review the example below.

By reviewing the information in the image window, you’ll be able to determine the following information:

• There are two different ways we can add an image:
  • Uploading from your own computer
  • Utilizing stock media provided by SwellSpace
• SwellSpace supports the following graphic files: JPG, JPEG, PNG, GIF, WEBP, and SVG. Make sure that the images uploaded match the file types listed.
• This particular image placeholder is best suited for an image that is 445 pixels wide and 520 pixels tall. We recommend using images and graphics that are specifically sized for each of the image placeholders. In the event that your image does not match the exact dimensions, you will be able to use an image cropping tool. The image cropping tool will be covered further down below.

Uploading an Image From Your Own Computer

To upload from your own computer, click on “Upload for your computer or drop an image file here.” Afterward, SwellSpace will prompt you to choose a file from your computer. Choose a graphic file that SwellSpace supports, and SwellSpace will automatically launch the image cropping tool.
As stated above, we recommend using images that are specifically sized for each of the placeholders. Use the provided dimensions as a guide to size your images.

Image Cropping Tool

In the event that an image uploaded does not exactly match the image sizes provided in the image placeholder, you’ll be able to use the image cropping tool. After uploading your own image, an image cropping tool will automatically launch.

• If the uploaded image matches the image dimensions provided on the specific image placeholder, the image cropper will automatically fill the graphic space perfectly.
• Suppose the uploaded image DOES NOT MATCH the image dimensions provided on the specific image placeholder. In that case, you will be able to see that the image will not completely fill the space, or areas of the image will fall outside of the image cropper and not be visible to you.

There are specific ways the image cropping tool can be used to help you fit the image chosen into the image placeholder:

• Mouse scroll up and down: zoom in and out of the image
• Mouse drag the image: click and drag the image to the desired position
• Mouse drag the bounding boxes (small blue boxes around the graphic): click and drag the bounding boxes to decrease or increase the size of the crop. This control is only available on image placeholders that reflect “Any” as a width and/or height.

Click on “Finished” once you feel that you’ve cropped the image correctly.
Once the image is cropped in the preferred crop you would like, it is IMPORTANT to include alt text in the “Alt Text” field. The purpose of Alt Text is to improve accessibility by describing what an image is showing to visitors who do not have the ability to see it.

‍

Utilize Stock Media Provided by SwellSpace

SwellSpace provides a growing library of stock graphics. To use the provided stock graphics, click on the “Browse our stock media” button. You’ll be able to choose between the available stock images.

Note: Stock images provided vary in dimensions, just like the image placeholders throughout SwellSpace vary. It is important to note that certain images will only fit specific image placeholders.