Eclipse.org - Jumbotron image update

Hi, as per senior management's latest requests, we would like to update the Jumbotron image.
As can be seen below, for accessibility purposes, I added and multiplied a blurred dark box.

So, in the zip folder, you can find the image with the dark Multiply layer and one without it in case you like to add it by CSS. The visual assets have been enclosed for both options.

Jumbotron.zip

In case you would like to add it by CSS here is some information that might be helpful.

Hex #0F0E0E

object-blur:40

filter: opacity(54%); filter: blur(10px);

Please kindly consider the image not getting cut (defining it as a cover maybe) Thanks for your support! Mehrnaz

changed the description

assigned to @oliviergoulet

added team:webdev label

added statetodo label and removed team:webdev label

added prioritymedium severitylow team:webdev labels and removed statetodo label

added statetodo label

assigned to @zacharysabourin and unassigned @oliviergoulet

added statewip label and removed statetodo label

mentioned in commit zacharysabourin/eclipse.org@6750fdec

mentioned in merge request !63 (merged)

@mkokabi Here is a preview of the requested changes: https://preview-63--www-eclipse-org.eclipsecontent.org/home/

@zacharysabourin Looks great! Thanks!

@zacharysabourin just have one request, I think we should increase the opacity of the dark gradient boxes up to 5%- 7% for better accessibility.

NP! I didn't use any CSS for this. Feel free to provide a new file with the desired opacity and I will update the preview

So then please, let's add padding to both grey boxes, I believe if the boxes are moved up a bit we can resolve the accessibility. Maybe even for the bottom boxes even more padding. WDYT? Top box

padding-bottom: 50px;

Bottom box

padding-bottom: 100px;

Thanks so kindly,

I will give this a shot with CSS. However, it would probably be easier if you provide me with a new image file with the altered shadow. Unfortunately I can't edit this image.

No problem, will do!

added statereview label and removed statewip label

@zacharysabourin here is the updated Development XD link:

https://xd.adobe.com/view/f378408c-7649-45ca-962c-6f0a9ce1023d-a62b/

I also added the grey boxes in the folder below in case you would like to replace them.

Rectangles.zip

Is there a way to download the jumbotron from the XD link? I'm not very familiar with Adobe XD

Here is the screenshot:

@mkokabi It would be easier for us if you can simply provide an image that is ready for us to use. It would be too much work to start adding layers of rectangles on top of this existing image.

@cguindon Hi, I completely understand, and my apologies for the confusion! I usually do this, but once I got a comment from one of your team members that you rather add the gradient by CSS and not embedded to the image. So thought that is the way you do it.

Here is the image with boxes embedded in it.

@mkokabi Do you have a link for that comment? I would like to better understand the context.

I'm afraid I couldn't find it. but it was for the SDV.

@cguindon @mkokabi I believe it's this comment: sdv.eclipse.org#20 (comment 959012)

I see. However, these are 2 different use-case.

The sdv website needed a simple gradient which we can do with css but here, we were ask to add layers of images from the Rectagles.zip file. By doing so, we are adding more images to the page.

This can be tested by creating an image with and without the gradient to see if one is larger than the other. If the one without the gradient is much smaller, we can consider adding the gradient in the CSS.

We should also consider if it worth the extra effort. We shouldn't add an extra hour of work to save 1 or 2kb on an image with a gradient.

@mkokabi Here is a preview with the updated changes: https://preview-63--www-eclipse-org.eclipsecontent.org/home/

@zacharysabourin Looks good to me! Thanks!

mentioned in commit 73f480d1

closed with merge request !63 (merged)

Changes are now live! https://www.eclipse.org/

Perfect! Thanks @zacharysabourin