[Marketing] Website quickfix: sponsors page design notes
Jody Garnett
jody.garnett at gmail.com
Mon Feb 19 09:07:55 PST 2024
The page has been restored to column layout, and looks much better:
https://www.osgeo.org/sponsors/
Limitations:
- The column layout does not adapt to narrow screens (such as phone or
tablet) - anyone good with CSS :)
- The present approach requires someone (presently me) to prep sponsor
logo according guidelines defined on
https://github.com/OSGeo/osgeo/issues/250
The results are in version control here
https://github.com/OSGeo/osgeo/tree/master/marketing/website
--
Jody Garnett
On Feb 15, 2024 at 12:01:17 AM, Jody Garnett <jody.garnett at gmail.com> wrote:
> 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/20240219/15363f53/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/20240219/15363f53/attachment-0001.jpg>
More information about the Marketing
mailing list