Page History

Also known as: logos, hiring company logos, companies

Description

A block that displays multiple logos in a single row or up to 3 stacked rows. 4-6 logos can fit in each row and we can add a swiper to display up to 20 logos total.

Design

Use When

• Displaying logos for corporate sponsors/partners or for hiring companies
• Displaying 4+ small images without taking up much space

Editorial Guidelines

Follow our general Web Copy General Guidelines for headings, introductory copy, and buttons.

Logo limits

• For the stacked layout (multiple rows), the limit is 12-16 logos or 3 rows
• For the swiper layout, the limit is 20 logos

Design Assets Needed

Images - logos

• Make sure to source a high-quality, png version of each logo.
  • We have many company logos in our WP media library already, so check with a web developer before you source all the logos for a project.
• Crop out any whitespace around the logo. We will space the logos out on the page using code.
• Dimensions: 512px wide, heights will vary (smaller logos can work if needed)
• png file

Implementation

ACF

This block was designed to display a large number of images without taking up too much space.

Design

...

...

Use Cases

• Displaying logos for corp. sponsorships 
• Display logos for career outcomes and internships
• Image galleries when you want to display 4+ images without taking up much space.

Fields

Introduction/Header, Footer, and Column Structure 

Pulls in Our standard fields for thesecustom blocks.

Images (Repeater)

Add images for the block here. You can select multiple images from the media library at once to speed things up.

Limits:

• Stacked layout - 3 rows, or 12-16 logos
• Swiper layout - 20 logos
• While the block can technically handle more logos, we want to limit them to prevent issues with swiper arrows on mobile and avoid cognitive overload for users. Logos lose their impact as you increase the number and they can create an overly busy look for the page.

Image recommendations:

• Images are automatically optimized on this component, so oversized images are totally okay!
  • You'll just want to make sure the image is large enough that it won't appear blurry.  Logos Logos files are typically 512px wide.
• Logos should be PNGs with transparent backgrounds.
• If a logo is appearing much smaller than others next to it, try cropping out whitespace in the logo image file.
• Ideally, all the images will have the same ratio height and width, especially if they don't have a transparent background.

...

A number, in pixels, that limits the height of all images. Most useful for when you have a square logo and it's way bigger than the other images.

Recommended default: 90

Top/Bottom Padding

Adds a py- value to each image. Recommended default: 4

Left/Right Padding

Adds a px- value to each image. Recommended default: 4

Swiper

Checkbox that When checked, puts the images in a swiper. 

Randomize Order

Checkbox that When checked, shuffles the order of the images on load. Most useful when you're using a swiper , and don't want to show favoritism to the first few images. 

...

This field only appears if Randomize Order is checked. Prevents the first X images from randomizing, in case you want to feature the first few images but want the rest random.

Anchor ID

Sets id of the block.

Additional Notes

This block is the first time a component included code that used the Column Structure fields to calculate the approximate image widths for optimization purposes.

Here's the code snippet for how it was done. 

//columns
$columns_xs = get_field('columns_xs');
$columns_sm = get_field('columns_sm');
$columns_md = get_field('columns_md');
$columns_lg = get_field('columns_lg'); 
$columns_xl = get_field('columns_xl');

  //Calculates approx. image widths in vw (viewport width) based on column sizes
    //these are calculated for the purpose of defining the sizes="" attribute for the img html
    //so that the browser picks the correct size image to load from the srcset
    //the calculated sizes aren't precise, and are often overestimates, but it's close enough!
  //it also sets all the values for the $columns_ variables, in case they were defaulted at 0, for the swiper code.
  $min_cols = 1; //sets min number of columns. 
  if($columns_sm) : $min_cols = $columns_xs; else: $columns_xs = $min_cols; endif;//sets min columns to # xs columns if defined. if not, $columns_xs will be set to min columns.
  $xs_image = ceil(100 / $columns_xs); //xs screens, 0-575px
  if($columns_sm) : $min_cols = $columns_sm; else: $columns_sm = $min_cols; endif; //sets min columns to # small columns if defined. if not, $columns_sm will be set to min columns.
  $sm_image = ceil(100 / $columns_sm); //sm screens, 576-767px
  if($columns_md) : $min_cols = $columns_md; else: $columns_md = $min_cols; endif; //sets min columns to # med columns if defined. if not, $columns_nd will be set to min columns.
  $md_image = ceil(100 / $columns_md); //md screens, 768-991px
  if($columns_lg) : $min_cols = $columns_lg; else: $columns_lg = $min_cols; endif; //sets min columns to # large columns if defined. if not, $columns_lg will be set to min columns.
  $lg_image = ceil(100 / $columns_lg); //lg screens, 992-1200px
  if($columns_xl) : $min_cols = $columns_xl; else: $columns_xl = $min_cols; endif; //sets min columns to # xl columns if defined. if not, $columns_xl will be set to min columns.
  $xl_image = ceil(100 / $columns_xl); //xl screens, 1200px or more

This block is also the first time we used Column Structure in combination with the Swiper. The code snippet above, combined with the code in the breakpoints parameter of Swiper JS below, is how this was accomplished.

...

...

.

...