[Marketing] Website quickfix: sponsors page design notes

[Jody Garnett]

 Hey folks, I am moving notes to a GitHub issue here:
https://github.com/OSGeo/osgeo/issues/250
I have made a good visual template for aligning sponsor logos within a 740
x 412 px tile.
--
Jody Garnett


On Feb 2, 2024 at 8:53:22 PM, Jody Garnett <jody.garnett at gmail.com> wrote:

> Some good news, it looks like we can find the design documents from
> GetInteractive, and can revise engineer some details, to recover the
> sponsors page:
>
>    - Checking meeting notes sponsor wireframes were sent to the list for
>    discussion
>    - Email indicates this google document
>    <https://drive.google.com/file/d/0B08AjQ2hqLipMmxRWFYtR1ZKLWM/view?resourcekey=0-5X32G9CAEXeMePkQPGI8cQ> and
>    I can see the wireframe on page 17
>    - It looks like the wordpress theme is very simple, and relied on some
>    care being used when producing the sponsors images
>
>
> This leaves us with a clear "quickfix":
> a) go through the sponsors logos and place each on a 740 x 412 template
> (taking care to centre and adjust so the result is "fair" visually)
> b) restore the css styling (rows and columns) matching design
>
> Here are my research notes for anyone wishing to check my work...
> Jody
>
> NOTES
>
> *GetInteractive Design*
>
>
>    - When editing a sponsors page - and adding a logo the image produces
>    a warning indicating:
>       - Width should be at least: 740px
>       - Height should be at least: 412px
>    - 740 by 412px (aspect ratio of 1.80)
>    - The easiest thing to do is recreate the sponsor logos in this size
>    and then multi-column layout becomes easier
>    - The wireframe shows rectangles, with some margins between them
>    (which would mitigate some of the relative size conflicts we are
>    experiencing)
>
>
>
>
> *Looking at wordpress media:*
>
> The original logos provided by GetInteractive all have filenames
> sponsor-xxxxx
>
> sponsor-gaia3d-e1594996762376.png
>
>
>    - August 9, 2017
>       - 16 KB
>       - 358 by 160 pixels (aspect ratio 2.24)
>
>
> sponsor-geodan.png
>
>
>    - August 9, 2017
>       - 14 KB
>       - 358 by 160 pixels (aspect ratio 2.24)
>
>
> Further more these were created with a consistent amount of white space.
>
>
> Newer logos did not keep this aspect ratio, or the recommended size:
>
> OrangeMan-Logo_RoundOrangeENG.png
>
>
>    - December 29, 2021
>    - 24 KB
>    - 380 by 385 pixels (aspect ratio 0.99)
>
>
> camptocamp_logo_square_moto_2020_cmyk-1.png
>
>
>    - February 22, 2021
>       - 63 KB
>       - 897 by 447 pixels (aspect ratio of 2.01)
>
>
> *Changes to page theme*
>
>    - The logos are now arranged in square, not the rectangles from the
>    wireframe
>       - CSS allows logos to completely fill the available square (example
>       500x500 pixels)
>       - Q: I wonder if we can compare with the initial GetInteractive
>       design in version history
>
>
> *Checking www_osgeo/origional branch:*
>
> wp-content/themes/roots/templates/atomic/organism-sponsors-list.php
> (grayscale indicates to me that this is for the footer)
>
>         <li class="col-sm-2 list-item sponsors-item grayscale">
>             <?php if ($url): ?><a href="<?php echo $url ?>"><?php endif; ?>
>                 <?php gi_load_template('templates/atomic/atom-image.php',
> array(
>                     'src' => $logo['url'],
>                     'title' => $sponsor->post_title,
>                     'width' => 195,
>                     'height' => 80
>                         )); ?>
>                 <?php if ($url): ?></a><?php endif; ?>
>         </li>
>
> wp-content/themes/roots/templates/atomic/organism-sponsors.php
> (this must be for the individual rows)
>
>             <li>
>                 <?php if ($sponsorUrl): ?><a href="<?php echo $sponsorUrl;
> ?>" target="<?php echo $target; ?>"><?php endif; ?>
>                     <?php
>                     echo
> gi_load_template('templates/atomic/atom-image.php', array(
>                         'src' => $sponsorImage['url'],
>                         'title' => $sponsor->post_title,
>                         'width' => $size,
>                         'height' => $size
>                     ));
>                     ?>
>                 <?php if ($sponsorUrl): ?></a><?php endif; ?>
>             </li>
>
>
> wp-content/themes/roots/archive-sponsor.php
> (Not sure why these pages all say "archive" but this does the rows)
>
>     <section class="block diamond-sponsors">
>         <div class="container">
>             <h2>Diamond sponsors <?php echo $currentYear; ?></h2>
>
>             <div class="row">
>                 <?php
> gi_load_template('templates/atomic/organism-sponsors.php',
> array('sponsorType' => 'diamond', 'size' => 400, 'target' => '_blank')); ?>
>
>             </div>
>         </div>
>     </section>
>
>
>
> --
> Jody Garnett
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/marketing/attachments/20240204/0d667ca0/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.jpg
Type: image/jpeg
Size: 106764 bytes
Desc: not available
URL: <http://lists.osgeo.org/pipermail/marketing/attachments/20240204/0d667ca0/attachment-0001.jpg>