bug: logo isn't displayed correctly

[holkexyz]

I used this logo: https://site-assets.plasmic.app/e1dddbd0e6a7104aee374d7b1b47a04a.svg

It looks fine in the create app:

But it doesn't show correctly later:

[ccerv1]

Check dimensions of images to confirm it's not a library issue (or dimensions issue)

[ryscheng]

@holkeb did you try again with a different image type (not SVG) or different image dimensions?

• If this only affects SVGs, I might just forbid SVG images
• If it's something else, I might P2 this unless it affects the generated URLs for the gitcoin round.

[holkexyz]

@ryscheng SVGs: Yes, I created 3 more with SVG's and I got the bug consistently --> agree to forbid SVGs for now

PNGs and JPGs: The preview also looks different than the result. The preview is centered and scaled, while result is stretched.

Preview with centered and scaled logo

Result with stretched logo

[ccerv1]

OK, I think I have figured this out.

First, I requested all the Gitcoin banner images and took their dimensions. The dimensions we want for a banner are 320 x 214 and for an icon 40 x 40.

Then, I started running some tests comparing create previews and actual hypercerts. All of the actual hypercerts were compressed, even ones like Jolly Roger that need to be stretched to fill the banner size.

You can see these below:

Project	Dimensions	Preview	Actual	Issues
Jolly Roger	249 x 83			width is compressed
Natives in Tech	1500 x 500			width compressed + doesn't appear to span banner

Next, I looked through the actual dimensions and saw that all were supposed to have a 3:1 aspect ratio. This is when I realized that Natives in Tech had its width extended with transparent pixels (presumably by the Gitcoin app) to conform to their banner spec.

To fix this, we will need to process the images as follows:

Banners

1. Identify images that have transparent padding
2. For those with padding:
   • Crop out the transparent padding
   • Shrink/stretch to width of 320 pixels
   • Crop top and bottom to height of 214 pixels
3. For the rest:
   • Shrink/stretch to height of 214 pixels
   • Crop sides to width of 320 pixels

Icons

1. Find the smaller dimension
2. Shrink/stretch on that dimension to 40 pixels
3. Crop on the other dimension to 40 pixels

[ccerv1]

Here is Natives in Tech create page with images cropped per the above methodology.

Preview

Actual

[ccerv1]

Update: I've created an image processing script and (temporarily) put new banner images on IPFS.

Will create separate issue for hosting assets on our CDN and updating the .gitignore