[Marketing] Website quickfix: sponsors page design notes

[Jody Garnett]

 The results for current sponsors are now available online:
https://www.osgeo.org/sponsors/
While the sponsors page will not look correct until multi-column layout is
restored, the website footer is noticeably better.

The files are available here:
https://github.com/OSGeo/osgeo/tree/master/marketing/website
--
Jody Garnett


On Feb 4, 2024 at 12:16:32 PM, Jody Garnett <jody.garnett at gmail.com> wrote:

> 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/20240215/a89ab351/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/20240215/a89ab351/attachment-0001.jpg>