Tips for Online Photos and Artwork

1. It is natural for posts on this site to include nice snapshot-quality images showing people, activities, and both informal and formal occasions. They are a welcome and important part of the web site!

2. For larger featured images, main landing pages, and other, more-substantial visuals, please consider a few points. We don't want to discourage photo contributions but attention to these will help the key images to represent the Cathedral well.

• Focus & exposure:
  On most point-and-click digital cameras, just tap the preview touchscreen to focus and make sure the subject (like a face) isn't cast into darkness because the background is bright.
• Lighting:
  Without sophisticated equipment, it still is easiest to get good results if the conditions provide good lighting. Not only in brightness — beware of a yellowish cast or other color, sometimes influenced by fluorescent lighting. These things usually can be corrected in Photoshop or an opens-source equivalent. Your best images are worth the extra step and it will help to elevate the overall quality of even the informal photography on the site.
• Graininess (often caused by low light):
  Often little can be done to correct for this except to seek the best lighting. Some cameras are better than others in low-light conditions.
• Bright background behind the subject of the image:
  An open door or window might frame our subjects nicely, but the light coming in from them causes a digital camera to "squint its eye," so everything else looks darker. Sometimes much darker! We want to show people's faces, so see "Focus & exposure" above and play with your camera a few minutes so it becomes a good habit.
• Composition:
  This is more subjective and also more difficult. Sometimes we're so focused, through our lens, on the subject we're looking at that we don't even notice a person't head blocking part of them or an unfortunate expression on their face. We all have favorite photos of the buildings, too — many of them with vehicles in the foreground. (To be fair, it's hard to avoid that. It's just not part of the picture we're painting with the site's Featured Images and the cornerstone images on key landing pages.)

For general images with posts, there aren't many constraints on sizes or proportions. For several reasons, we suggest uploading images that are no less than 900 pixels wide, even if you are inserting them to be displayed smaller than that. Caution: never upsample an image unless you are skilled and know the risks. Scaling it down is okay, but enlarging is generally a no-no when it comes to preserving quality.

For certain images, adhering to a few guidelines will improve your results:

• Featured Images and full-size photos:
  2000+ pixels wide, choosing only better-quality images because these are more prominent and, in some uses, may carry more responsibility for representing the Cathedral.
• Carousel (home page) images:
  The thumbnail-size images shown in the home-page's "carousel" are created automatically from the Featured Image for each of its posts. If a post featured there doesn't have a Featured Image, a discreet placeholder image is inserted by the system. (The images in the carousel show people and events in the Cathedral community's life and can be very engaging to site visitors.)
• Slideshows:
  Each image: 1200 pixels wide by as tall as that makes your camera's images, for example 800 pixels. For best effect, every image in a slow show should be the same proportions. This prevents landscape and portrait images from pushing neighboring content up or down as the slideshow proceeds. A little careful cropping often does the trick, if it can be done and still maintain the minimum size needed for the slideshow.
• "Cards" layouts:
  Subject to change, ask the webmaster: for the cards2 format, any image will be scaled down until it is no more than 260 pixels tall. For the cards3 format, images will be scaled down to no more than 140 pixels tall. Inserting images at as much as twice that size might improve quality on many displays.

  Tip: If the main purpose of a "card" is to provide a link, then link any image in that card to the same destination as its text link. If there is no primary link in a card, an image in it may be linked to the image's full-size media file or have no link at all.

For most single-event coverage, consisting of four or more images, the site design recommends use of a slideshow effect documented here. This provides a pleasing, site-wide consistency and familiar (or easily discoverable) interface and controls. This example doesn't use the caption options, but those are easy to add:

Georgina Pazcoguin — ballet and Broadway dance

Dr. Christopher Brigham - Brigham and Associates

Cathedral of St. Andrew - Hawaiʻi

Julia Gould, artist

Blue Water Glass - Hawaii (Oahu)

FORTH, Inc. — software & firmware

h2o IQ — information resources

The Law Offices of Ryan Soriano

Aloha Cyclery home page

BalletNext — dance company

Radeus Labs — electronics engineering, SatCom systems

Swan Builders, Hawaii — commercial & residential contractors

Seven Colonial — e-commerce

Faith-Based Claims Assoc. — non-profit association

Evidence-Based Pain and Spine Medicine — medical practice

Bridal Perfections — old-world bridal couture

Inserting one, or a series, of images

You can't go too wrong just using the usual WordPress editor's controls to "Add Media" -- photos, drawings, even PDFs. For best results, consistently:

• Refer to the "Image sizes" discussion, above. The system will make smaller versions, as needed, but it cannot enlarge photos acceptably.
• Out of the original photos in a set, select the few that capture the subject and help raise the bar for imagery site-wide. See the "Image quality" discussion, above.
• In your post's editor, use the Add Media button to navigate to your pre-selected, pre-cropped images.
• For each image, ensure there is a visitor-readable caption in the WordPress editor's caption field for that image. This extra step will pay off, both when displaying images individually and in some slideshows that use them.
• Please fill in the "Alt Text," too, in the editor -- think of Alt text as what a person with limited vision would like their screen-reader device to read out loud to describe your image.
• While using the editor to insert an image in the editor, set "Link To" to the media file -- this allows users to click-to-enlarge, the site design uses this widely.
• Consider giving users a full-width image, in which case we'd use an Alignment of none or centered. But if you choose a smaller size, set the Alignment to whatever effect you want for each image.

This site's design uses (currently) the WordPress plugin "Smart Slider 3" to create collections of related images. It supports very simple — or feature-rich — ways of presenting images.

• Tip: the plugin offers a useful video tutorial right here.
• Tip: For most sliders on this site, you'll get the best results with images that are at least 1200 pixels wide and 800 pixels tall, and all the same size. They don't have to be exact, but they should have at least that many pixels in both directions. If you don't crop them to size, the system will do a good job anyway, most of the time.
• Tip: To keep the site's sliders looking consistent and professional, always start any new ones with one of the existing sliders — just duplicate it, delete the slides you don't need (even if that's all of them), and insert your images and any text captions.

Example slideshow: web-development portfolio