Images

Overall flow is upload hi-res files to Libris with good naming and tagging (directions below), download the image you need, crop, optimize, etc. Then re-upload to WordPress library. Goal is to ensure we always have a repository in Libris of the hi-res, well tagged files for others.

Image choices and cropping

We’re after connective and emotionally driven imagery and have two overarching rules; close or far (minimize the middle ground). First is close and intimate with a focus which could be an animal, people, or an event. Find the connective point, what is important that we are trying to share then focus on it with cropping. Second is beautiful broad overview imagery, this could be landscapes or events were we see a big number of people; show the big picture as long as someone can digest it. Most images are inherently shot or cropped in that middle zone where there isn’t a focus. We have lots of imagery like this, no focus, just a snapshot, it’s up to us to crop images well.

Sizes

Blog

• Full size 1024 x 700 (hero/featured image)
• Image in post – size down to max width of 900px or use “Large” size in attachment display settings in the WP add media overlay.
• Before/After slider – max width 900 px, both images need to be equal height
• Author/category size 300×300

Action Center

• Full size 1024 x 700
• Card size 370 x 370

Marketing Pages

• Fullwidth image size 1024 x 350
• Content images (for 2/3 or 1/3 columns including CTA cards) 768 x 479

For the Press

• Narrow image at top: Headers Size = 1436 X 238 (shape is created in css, not image)
  • To edit, go to Divi in left WP nav. Select Divi Library, and look for items named Header – In the News, Header – OpEds or Header – Press Releases. Image is placed as a background image in the Section.

Photoshop

1. Open image in Photoshop
2. Crop based on sizes below
3. Shift + Option + Command + S (Save For Web)
4. Save for Web dialog box
   1. JPG
   2. Quality > between 30% – 50%
   3. Mark progressive image
5. Run through Tinyjpg.com

The goal is for the final image (hero size) to be less than 80KB per image. Smaller images should be even less. Once you upload the image into WP, WP Smush will further optimize.

How to: Images

For a more comprehensive tutorial on how to crop images, save for web and place in WordPress/Divi, download this PDF.

How to: Animated GIFs

In order for the animation to be retained, the image optimization plugin (Smush) must be temporarily deactivated when the GIF is uploaded. Go to the Plugins page and deactivate Smush, upload the file, then reactivate the plugin.

Use the Image module instead of text module and link to the original file. Using the Image module allows you to choose the alignment, force full width if you want, and add a border if you want. Those are all on the Design tab.

How to: Libris

After the files are uploaded and thrown into their default “Incoming Files” gallery,  Annaliza (or another Admin) would go in, select all photos uploaded, and select “Move to Another Gallery.” You can then create a new gallery, and choose a name that matches that of the Word Document. 

Now that the gallery has the same name as the Word Document you’re using, your content creator (assuming they’re an Admin, Editor, Tagger) can utilize the top search bar (“find gallery/collection by name”). Once they start typing in the title, and as long as the gallery has the same name, It’ll guide them to the correct gallery they’re looking for, which has all of the images they need. Annaliza can even flag certain images (or even rate them) to help the content creator pick out of the gallery the best images. For example, you can tell your content creators “Only use the images are flagged/rated above 4 stars”- something like that.

You can even batch edit the Metadata on the photos if you’d rather search for specific images rather than the galleries. After the images are uploaded, select all images, and in the “Actions” drop-down select “Edit Image IPTC.” You can add a description to all images in batch that has the same title as the word document. After the metadata has been updated, Annaliza would move images to a new gallery. Now, your content creator can do a file search using the word document’s title, and find all images with that description.

It would also benefit everyone to create a completely separate Collection for your content creators, it’ll be easier for them to at least know a general area to stay in.