Homepage Hero Documentation

How to Upload the Images in the Block Editor

1. Use the Rotating Home Hero Images block.
2. Ideally select and upload 3 photos.
3. Add the text.
4. Adjust the settings.
5. To view the images, use the hide image feature to display only one image at a time or hard refresh the page.
6. Test the images for different device sizes (or use your phone/tablet) to be sure that text is always readable and any subjects in the image aren’t framed or cropped oddly. Use the text overlay or reposition the image/text if necessary. You can even flip the image in mobile if that works better for the image. 

Recommendation for Image Dimensions & Composition

• High quality and large size image
  • Our current images are  2500 x 1358 px and 2560 x 1558px as examples.
  • Save image as a high quality JPG (not png) in order to keep the quality but reduce the file size so it loads quickly. Our current image is 290 kb as an example.
  • Make sure the image has alt text when uploaded.

• Background of image is either one color or has sufficient color contrast with text to pass color contrast and be readable
  • Color Contrast Checker
  • “WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.”
  • All text must pass, including the heading text and the main menu navigation text and the logo text. And it must pass at all device sizes.

• Recommend that the supernova does not cover the subject (child) in the hero image or only in a small way (not the head for example) to avoid the impression that the child is crossed out. 

• Recommend that if the image does not have sufficient height where the background is one background color, then extra height be added to the background via photoshop to create a background of one color that the nav and logo can overlay.

• Recommend that the subject is actively engaged in the science activity and that there is sufficient room in the image for the text to be placed. If the photo has to be extended horizontally, it’s best to choose an image where the background is easily croppable or extendable. 

Requirements for Updating the Hero Image

• Knowledge of photoshop
• Knowledge of resizing the browser and testing the image on different device sizes and making the adjustments
• Knowledge of WordPress blocks

Recommendations for Possible Stock Image Sources

• Adobe images
  • Plan info – Plan or pack options
  • 29.99/month for 10 assets, annual plan, roll over 120 unused credits – basic plan
• Getty images
  • Pricing
  • A lot pricier

Recommendations for Image Selection

• When choosing images, try to select a diverse group of children.
• When choosing images, try to capture the excitement of children engaged in science vs looking directly at the camera.
• Try to find images that do not have busy backgrounds.
• Try to find images that have a space where text and the supernova could sit.
• Horizontal (landscape) images.

Recommendations for Custom Photoshoot

• If taking photos against a wall or curtain, try to leave additional background space at the top of the image which would save the need to photoshop extend it. 
• Try to set up the image so the child is on the right side of the image so that there is space for the text and for the supernova on the left side.
• Horizontal (landscape) images.

Recommendation of Timeline to Change Out Images

• With the current set up as photos are hard to obtain and the amount of time required to adjust them to fit the requirements, recommend changing them out twice per year, once for the Summer Season and once for the Winter Season.
• Target dates could be the first day of Summer Season and the first day of Winter Season.
• Recommending three rotating images on refresh/reload if possible.

Monday Board

• Create a Monday board with the tasks and assign who does what and who needs to review them as a template similar to the schedule change board and each season add another group when it’s time to swap them out. 
• List of tasks:
  • Select possible photos OR set up photoshoot (Marketing)
  • Review all possible photos selected / from photoshoot and select top choices (Marketing)
  • Group review of top choices (Marketing + Web Team)
  • Initial set up of images in Rotating Home Hero Images Block (Web Team)
  • Adjustments needed for text readability or photo subject alignment via block settings and photoshop (Web Team)
  • Final Marcomm review (Marketing + Web Team)
  • Set live (Web Team)