Updating the About Us Page

Adding a new staff member

The list of staff members can be found at /about on the website.

To add a new staff member, you only need to:

• add the headshot image files

• update the markup in the About Us template

Headshots

You can automatically generate cropped and compressed headshot images using the tools/crop_staff_list.py script.

To use it, make sure you’ve installed the image manipulation dependencies:

pip install -r requirements-image.txt

Add each new staff member’s photo to media/img/thunderbird/staff/uncropped/. (This directory is gitignored.)

Follow this file naming convention: <whatever> - <First Name> <Last Name>.whatever-extension (e.g. 97147377 - Melissa Autumn.jpg)

As necessary, specify origin points for cropping by addding [Left|Center|Right,Top|Center|Bottom] to the file name. (e.g. 97147377 - Melissa Autumn[Left,Bottom].jpg.)

Then:

cd tools
python ./crop_staff_list.py

This adds the optimized versions of the image to the media/img/thunderbird/staff/ directory.

Make note of the name of the non high-res version of the .png. You will need it when you add the staff member to the markup.

Markup

Edit the file sites/www.thunderbird.net/about/index.html

Find the appropriate section

Add the new staff member using the job_block macro:

{{ job_block(_('Sr. Software Engineer, Desktop Engineering'), 'Roc', high_res_img('thunderbird/staff/roc.png', scale='2x', alt_formats=('webp',))) }}

This macro produces the appropriate markup, including the <picture> element.

Specifying optional attributes

You can also pass optional attributes to high_res_img:

 {{ job_block(_('Staff Software Engineer, Desktop'), 'Ben Campbell', high_res_img('thunderbird/staff/ben_campbell.png', scale='2x', optional_attributes={'class': 'pixel'})) }}

This particular class ensures the image scales using nearest neighbour scaling instead of bilinear.