Skip to main content

Sponsors

Overview​

Similar to speakers, the sponsors page can be very difficult to maintain.

It is important with this page to note the following:

  1. Logos must generally appear on a white background
  2. Logos must be visually proportional relative to their sponsorship level
  3. The page must be accessible to screenreaders

Usage​

Page Template: Sponsors Page (White Background)

HTML Code:

<ul class="sponsors-listing">
    <li><img src="path/to/logo.png" width="YYY" height="ZZZ" alt="SPONSOR_NAME"></li>
</ul>
<ul class="sponsors-listing sponsors-listing-2">
    <li><img src="path/to/logo.png" width="YYY" height="ZZZ" alt="SPONSOR_NAME"></li>
    <li><img src="path/to/logo.png" width="YYY" height="ZZZ" alt="SPONSOR_NAME"></li>
</ul>

Suggested Workflow​

Create the image files​

Create equal dimension files for each sponsorship level, such as:

  • Platinum: 350px x 250px
  • Gold: 300px x 250px
  • Silver: 275px x 200px
  • Bronze: 250px x 150px
  • Non-Profit: 200px x 150px

Export these files as PNG to ensure quality / size ratio.

Use an application such as ImageOptim on the Mac to optimize these images.

Create the HTML​

The WordPress theme has several built-in classes to handle different levels and screen sizes.

One per row (on desktop): <ul class="sponsors-listing"></ul>

Two per row (on desktop): <ul class="sponsors-listing sponsors-listing-2"></ul>

Three per row (on desktop): <ul class="sponsors-listing sponsors-listing-3"></ul>

Four per row (on desktop): <ul class="sponsors-listing sponsors-listing-4"></ul>

Each sponsor image should be in a standard List and Image tag. Make sure to use alt text for the image!

Example: <li><img src="/anesthesia/files/2021/03/Fisher-Price-Healthcare.png" width="325" height="175" alt="Fisher & Price Healthcare"></li>

Add the Page in WordPress​

There is a specific template for the Sponsors page that removes the standard grey background. It is important to use a white background for the page and logos as this will ensure compatability with all brand standards.

Full Example​

This conference only has two levels: Silver and Bronze.

In this situation the following image dimensions were used:

  • Silver: 350px x 200px
  • Bronze: 325px x 175px
<h2 class="text-center">Silver</h2>
<ul class="sponsors-listing">
    <li><img src="/anesthesia/files/2021/03/Storz.png" width="350" height="200" alt="Storz"></li>
</ul>

<h2 class="text-center">Bronze</h2>
<ul class="sponsors-listing sponsors-listing-2">
    <li><img src="/anesthesia/files/2021/03/Fisher-Price-Healthcare.png" width="325" height="175" alt="Fisher & Price Healthcare"></li>
    <li><img src="/anesthesia/files/2021/03/Medtronic.png" width="325" height="175" alt="Medtronic"></li>
    <li><img src="/anesthesia/files/2021/03/Merck.png" width="325" height="175" alt="Merck"></li>
</ul>