Project Browser: Update logo for Colorbox

Created on 5 July 2024, 5 months ago
Updated 19 September 2024, 2 months ago

Problem/Motivation

The Project Browser Initiative wants nice project logos for better UX. The logo will be displayed on the card for your module in the Project Browser (as well as on drupalcode.org as your project avatar, and on drupal.org on your project page).

The Colorbox module needs a new logo for this objective.

Proposed resolution

Note a logo was created in #3217375: Create an official logo for the module so just needs to be adjusted to match the requirements below.

  • Create a logo that is 512x512 square dimension in PNG format without animations.
  • The file size should be 10k or less.
  • Use a lossy image tool (such as pngquant) to reduce the file size while keeping the image quality at around 80%.

Examples:

https://www.drupal.org/files/issues/2024-07-04/jQuery-UI-Selectable-fs8.png
https://www.drupal.org/files/issues/2023-05-03/Embed-Project-Logo.png
https://www.drupal.org/files/issues/2022-04-28/pathauto-fs8.png
https://www.drupal.org/files/issues/2022-09-23/search_api.png
https://www.drupal.org/files/issues/2022-09-23/Rest%20UI.png
https://www.drupal.org/files/issues/2023-08-16/entity_queue_3.png
https://www.drupal.org/files/issues/2022-10-04/views_slideshow_logo_1.png
https://www.drupal.org/files/issues/2022-09-30/redis-project-browser-cub...
https://www.drupal.org/files/issues/2022-09-23/DropzoneJS_v2-min.png
https://www.drupal.org/files/issues/2023-08-14/File_Metadata_Manager_2.png

MAINTAINERS: Once a logo is reviewed and approved, it should be added to the root folder of your project's repo, and be named logo.png. This must be present on your project’s default branch. If you have a logo as the first image in the Images field on your project page, please remove it. The logo will be displayed on the cards in the Project Browser grid and list views.

Review steps

  1. Review any logos on this ticket.
  2. Provide design feedback if applicable.
  3. If multiple logos are provided, choose your preferred one.
  4. Ensure logo meet the requirements:
    • 512px by 512px square
    • PNG format
    • no animations
    • 10k file size or less
    • reasonable image quality
    • visually represents the project
📌 Task
Status

Fixed

Version

2.1

Component

User interface

Created by

🇺🇸United States Kristen Pol Santa Cruz, CA, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Kristen Pol
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Moving this from project_browser queue to project queue per @leslieg.

  • Assigned to Kristen Pol
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    I'm going to take this one and see if one of my interns can help today. Adding existing logo to summary.

  • remade and upscaled the logo

  • Status changed to Needs work 4 months ago
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Looks good but the size is 12KB. Can you get it down to 10KB?

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Jacob mentioned to me that he couldn't get this lower than 12KB so I'll check in Slack for ideas.

  • Issue was unassigned.
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Unassigning from me but I'll follow up once I hear back in Slack.

  • 🇮🇪Ireland lostcarpark

    Diagonal gradients are difficult to compress.

    12K is close enough that it's not a big issue.

    However, vertical gradients tend to compress much better. It would be interesting to see how it looks with the inner gradiant going left to right, and the outer gradient going right to left. If it doesn't look good or achieve enough of a file size saving, I'd say we just accept this one being slightly over size.

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Sounds good. Thanks for the feedback 👍

  • 🇺🇸United States paulmckibben Atlanta, GA

    Folks, I'll defer to your expertise here, as my graphics skills are pretty basic. If somebody would like to offer a new logo with the gradient changes that @lostcarpark suggests, I'm happy to commit it! Otherwise, if we want to continue with the existing logo, I'll be happy to commit that instead.

  • Status changed to Needs review 3 months ago
  • 🇫🇷France dydave

    Managed getting the image from #4 down to 9.95KB by reducing the colors to 64, with pngquant, without losing "too" much quality, see:

    The smoothness of the gradient is a bit degraded, but if the logo is displayed in a small size (which I assume it is supposed to) perhaps that wouldn't be too visible?
    See for example:

    If more compression is required, then reducing the colors further to 32 or 16 would get the size further down to 8KB or 7KB, but the gradient would look more degraded.

    Otherwise, the changes suggested at #8 might help getting better results, but my design skills are too limited to implement them.

    Setting issue back to Needs review as the compressed image in this comment should answer the request above at #5 to get the image size below 10KB.

    Hope that helps.
    Thanks in advance for your feedback and reviews!

  • Status changed to RTBC 3 months ago
  • Hi @DYdave,
    Your argument seems to be legit, as in PB I think the logos will be displayed in small thumbnails, so the degradation of the gradient won't be that much visible. This compression looks good to me as well as meets the criteria as well. Hence moving it to RTBC from my end!

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Note that the logo will be in a bigger size for PB vs as shown on the project’s page but hopefully this reduced version is still okay

  • Pipeline finished with Success
    3 months ago
    Total: 198s
    #253593
  • 🇫🇷France dydave

    Thanks everyone for the prompt follow-up and positive feedback on this updated logo file.

    Created at #14 an initial merge request on default branch 2.1.x, which should allow integrating Colorbox logo with PB and project page on DO.

    Thanks in advance for the feedback and reviews!

    • dydave committed f46e42cc on 2.1.x
      Issue #3459382: Project Browser: Updated logo for Colorbox.
      
  • Status changed to Fixed 3 months ago
  • 🇺🇸United States paulmckibben Atlanta, GA

    Thanks, everyone! This has been merged.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • 🇫🇷France dydave

    Thanks a lot Paul (@paulmckibben) for getting module's logo added: It looks great on the project page!

    I realize the issue is now closed and this message is just a bit too late ... but I'm hoping you might perhaps receive and see the email notification:

    Could you please edit the project page ( https://www.drupal.org/project/colorbox ) and hide or remove the Colorbox logo, since it is now displayed next to the module's page title?

    As suggested in the Project Browser integration guidelines at:
    https://www.drupal.org/docs/contributed-modules/project-browser/module-m...

    5. If you previously added a logo as the first image on the Drupal.org project page, please remove it.

    That's really minor, but we forgot to mention it earlier.
    Thanks in advance!

  • 🇺🇸United States paulmckibben Atlanta, GA

    @dydave, thanks for letting me know about this. I removed the logo from the project page images.

  • 🇫🇷France dydave

    Thanks Paul! (@paulmckibben)
    You're a super nice maintainer! Always positive, helpful, crediting everyone and super reactive!

    It's a great pleasure to be able to work with you! 🙂

    I've seen your feedback on the ESLint ticket ... it's a hard one and will take a bit of time, but I'm definitely going to get back to you on this when I have some time.

    Thanks again for all the great help maintaining the module and super helpful feedback!
    Cheers!

Production build 0.71.5 2024