1.0 Guide – Dynamic Photos

Why are photos important?

Dynamic photos improve your website in many ways:

People click and interact more. Having good photos on your site convinces more people to explore pages other than the homepage.

As a result, this increases average time spent on the website.

This is great for SEO. This increases average site time, lowers the bounce rate, and helps your site appear higher on search rankings on Google.

For more information, check out the Google Analytics guide.

Why is Resizing Important?

New phones and cameras can take incredibly high-quality photos. These photos have a high file size. Let’s go over some terms:

Photos taken with your phone/camera have high pixels, often over 1500 length/width. Because of this, too many large photos can slow down a website. We want our CWP sites to work well on mobile data or in isolated areas with bad internet.

To prevent slowdown, you can use tools like PicResize (https://picresize.com/) to reduce the file size of your pictures while keeping their visual fidelity.

Step 1. First, go to https://picresize.com/

Step 2. Upload your file and click “Continue to Edit Picture.”

Step 3. Let’s get acquainted at the Resize Your Picture area here.

On the right of the Resize your Picture section, you can find the picture’s original image size under “Original (Pixels).” In this case, the uploaded image is 2560 x 1700.

The new size, shown next to “Estimated Final,” is 1280 x 850. That fits under 1500 length and/or width, so it will work well on the website.

You can select other sizes under “Select a new size for your picture” to change the Estimated Final. It defaults to 50% smaller.

Select the image size you want, then process the image by clicking the button at the bottom.

Step 4. When you’re done, click the Disk icon to download your new image. You can upload this image to the website.

Characteristics of Dynamic Photos

Let’s go over some good and bad practices.

Don’t just show places, show the people who live there. People are drawn to the face as a focal point. Expression helps people connect emotionally to the photo, and resonate with a cause.

Show photos from areas people recognize. This will help with tourism and finding landmarks.

Images help to communicate a message or support a cause. Use photos to show the action or impact of what you’re doing. Show the urgency of the thing you’re trying to change. Communicate your story through pictures.

Show people in action – walking, talking, working, doing.

Take photos that have a person or object in focus, with the background slightly blurred. New phones can do this automatically.

The Rule of Thirds is a design tool that dates back to the Renaissance. Put plainly, symmetrical photos look less dynamic compared to positioning the subject to the right or the left.

Try finding and taking photos with diverse groups people. Reach out to indiginous, LGBTQ+, Latinx, and multi-generational communities to find and take photos. This is a challenge to be profoundly inclusive with your photographs on your website.

Characteristics of Not-So-Good Photos

Next, let’s go over characteristics of not-so-good photos. These are practices that you should try to avoid when taking and picking photos.

This happens often when taking photos in a dark environment. Some ways to fix this are turning off your flash and letting your phone auto-adjust, or turning on some lights

This happens often when taking photos of meetings and events in front of an audience.

Try to find images that aren’t blurry or pixelated. Look for photos that are related to the subject.

If I were part of that meeting, my eyes would be glazed over from boredom! Try to show action.

Adding Photos to the Homepage Slider

Only Content Editors and Administrators can put photos on websites. First, Log In and access the Dashboard.

The Admin Bar is the black bar at the top of the screen. This will show up if you’re logged in as a moderator, administrator, or editor. Normal users don’t see this. It will show on both the backend and the frontend of the website.

Click on the website name at the top left of the admin bar. To switch between the frontend of the site and the dashboard, you can click on the website name anytime.

The Admin Bar has special shortcuts depending on where you are. In this case, we’re going to use it as a shortcut to edit the homepage.

To do that, click Edit Frontpage (Advanced Layout Builder). The edit page button will always have a pencil icon next to it.

For more information on editing pages, read the content management guide on the Network.

Find the Fullwidth Easy Slider button and click on it.

It will show the order in which the images on the homepage slider will appear. Click the arrows to the left of the images and drag them to move the order around. Click on the image thumbnails to enter its settings if you want to replace it. To remove an image from the slider, click the x symbol on the right.

To add an image, click Add Multiple Images. There, you will find two tabs at the top-left. You can upload a file from your computer, or select a photo already uploaded to your site.

Once you’re done, click the blue Save button at the bottom right of the window. To publish your changes, scroll to the top of the page editor and click the blue Update button.

Uploading a Featured Image for a Post

To set a featured image, create a post like you normally would, then find and click Set Featured Image.

Uploading an Image to a Page

Find the page you want to edit, and click “Edit Page” on the Admin Bar. Click the text area you’d like to include a photo in, then click “Add Media.” Once you’re done, click Publish at the top-right.