Add-on banner image size issues

[dgwyer]

🐞 bug report

Source: https://freemiusdev.slack.com/archives/CHW7SSTQD/p1592341490425900

Behavior:

• The card banner for an addon is actually rendered as 310x100 px in the WP admin, but in the Developer Dashboard, you can't upload an image exceeding 300px in width. It means everything looks fuzzy.
• Also, a similar thing occurs for the main banner. In the Developer Dashboard you're prompted to upload a 772x250 px image but when it's rendered in the iframe it's stretched to 821x250 px.

Fix:

• The easiest solution would be to just update the SCSS to match the expected dimensions in the Developer Dashboard. This is a pretty simple fix (just updating a couple of values in add-ons.scss but we first need to check if anything would be affected by these changes.

Versions: (*)

• Freemius SDK Version: 2.3.2
• WordPress Version: 5.0+
• PHP Version: 7.0+

[dgwyer]

@fajardoleo Do you think there would be any issues with just updating the values in add-ons.scss to these new values:

Main banner width: 821 -> 772 Card banner width: 310 -> 300

This would bring the SCSS inline with the image dimensions uploaded via the Developer Dashboard.

[dgwyer]

I've tested the card banner change which doesn't seem to have any impact for single/multiple add-ons. However, the iframe width was changed from 772px to 821px around a year ago (by Leo).

At 772px width it breaks the iframe so I'd recommend instead altering the banner image size on the Developer Dashboard to accept an 821px wide image. (Open new Asana ticket to address this)

I'll submit a PR for the card banner image to render 300px wide instead of 310px.