Hero card & image: review sizes

inesdgomes commented 6 months ago

We need to review the size of hero images. There are two issues:

In portals, the minimum height of hero images is too short (362px) and it's being extremely challenging for web editors to find photos that fit this ratio. Example: https://www.ilo.org/topics/social-and-solidarity-economy
In other pages, the maximum height of hero images is too large, preventing users from even seeing the page title before they scroll. Example: https://www.ilo.org/enterprises-department/areas-work/ilo-helpdesk-business-international-labour-standards

beatrizmartinmartins commented 5 months ago

done @inesdgomes on design it has a max height but you need to tell justin what we talked about the percentages of the sizing of the screen

inesdgomes commented 5 months ago

This the logic applied in the development of the hero component.

Homepage Hero banner

Postersize: (240px) large Cardsize: (721px) medium Align: center Justify: start

Basic page

Postersize: (527px) xlarge Cardsize: (920px) xlarge Align: baseline Justify: center

Portal

Postersize: (240px) large Cardsize: (625px) small Align: baseline Justify: start

Publication

Postersize: (527px) xlarge Cardsize: (998px) xxlarge Align: if image bottom / no image baseline Justify: 1 col center / 2cols offset

Event

Postersize: (527px) xlarge Cardsize: (920px) xlarge / 2 cols (998px) xxlarge Align: if image bottom / no image baseline Justify: 1 col center / 2cols offset

Project

Postersize: (527px) xlarge Cardsize: (920px) xlarge / 2 cols (998px) xxlarge Align: if image bottom / no image baseline Justify: 1 col center / 2cols start

Multimedia story

Postersize: (527px) xlarge Cardsize: (856px) large Align: bottom Justify: center

Resource

Postersize: (527px) xlarge Cardsize: (920px) xlarge / 2 cols (998px) xxlarge Align: if image bottom / no image baseline Justify: 1 col center / 2cols start

The relevant parameter for us above is the postersize, which determines the size of the image. This means we're currently only using 2 image sizes on the website: large and xlarge. However, you can see in storybook that there are 4 postersize available options: small, medium, large and xlarge.

As discussed, could you please:

Review the design of the component so there's only 2 available sizes for images in heros
Set the sizes in percentages rather than absolute numbers
Clean up the hero component to remove duplications or designs that are not needed

beatrizmartinmartins commented 4 months ago

@inesdgomes There's some things I think don't really make sense like the Basic page sizing. I have been testing and isn't it too big when here's no picture? Check that template here. (This is what we had previously on the templates, I didn't change the format of it)

inesdgomes commented 4 months ago

Hi @beatrizmartinmartins When there is no image, all templates should look the same, like this: https://www.ilo.org/rights-and-permissions OR https://www.ilo.org/ilo-and-multilateral-system

I think at this point in time, it's better if you follow what can bee seen in Storybook, which has a certain logic, rather than trying to find a logic in the designs. I know Justin struggled a lot to implement the component because of how poorly documented was and of all its different variations. I would suggest that you:

Update the designs following what can be seen in Storybook: https://ilo-ui-twig.netlify.app/?path=/docs/components-content-hero--default
Make any improvements/simplifications you think are necessary (any changes to the current behaviour of the component in Storybook need to be listed and thoroughly explained so Justin can action those changes)
Document the component in Figma as needed so we avoid this issue again in the future

beatrizmartinmartins commented 4 months ago

@inesdgomes everything is done.

I followed storybooks approach and I was able to replicate what we have there.
I simplified the component just like we have on Storybook. No more publication, event, etc variant. We have general ones where we can hide or unhide different options like language, search, eyebrow, etc. I think it's easier to understand and also to implement/use in design.
There shouldn't be anything else to be done actually. The component works perfectly. What do you need me to document really?

I also updated all the templates. They work like intended and are up to date :)

inesdgomes commented 4 months ago

Hi @beatrizmartinmartins Great work, thanks, much better! We definitely simplified the component and it's easier to understand, but we still need to resolve the original problem - see ticket description at the top. To be discussed, but this is what I think we need to do:

Document the possible sizes (i.e. height of the image) in the component
The possible sizes should probably be the minimum and maximum height, given that the size of the image increases according to the amount of text inside the hero card
The minimum height needs to be larger than what we have now and the maximum height needs to be smaller (see original problem described in the ticket)

beatrizmartinmartins commented 1 month ago

Logic of Hero Card component:

We removed all the namings of the component because we can use them independently of it's name. For example, maybe on Multimedia we can use the Hero Card on the center, of left, depending on the content. For this instance, it doesn't really had anything calling the variants by it's name. Meanwhile, we decided that it was better to divide them into two variants:

Mode (light and dark)
Template (start, center and offset)

For this reason, we have decided that all images are going to have the same min-heigh (493px) and max-heigh (593). By doing this, the component get's much easier to use and to identify where to apply. Check the component here

cc @inesdgomes @justintemps

international-labour-organization / designsystem