christopherkade / banner-generator Goto Github PK

Am submitting - > Bug

Steps to recreate

1. change the title
2. change background and title color
3. click on randomize (attached downloaded image)
   

We should design it so any new inputs can be added without causing problems to the responsiveness of the layout.

Currently inputs are divided into 4 wrappers:

• ContentInput: everything related to the content such as the title.
• ColorInput: everything related to colors, such as the background and title colors.
• SizeInput: everything related to sizes, such as the size of the title.
• MiscInput: everything that doesn't fit in the previous wrappers, such as adding borders to the banner.

This is an open question, there are many cool ways we could implement this new layout.
Although we should keep in mind that the user should be able to generate a banner quickly, without having to click many times (so let's avoid accordions).

The user should be able to click on a button and have the banner's styles randomised (except the content values, such as the title).

Users should be able to select an image from their computer and have it displayed as the background of the banner.

Another option would be to integrate something like Unsplash in order to retrieve free images directly through the app.

A few questions are important:

• How should the positioning of the image work?
• Should the user be able to move it around?
• Should it fit the size of the banner (1000x420) automatically or be centred?

There is a problem with html2canvas not being able to generate a canvas based on an image though, so that would mean either changing the way we generate the canvas or dropping the idea.

Hey @christopherkade

First, thanks for your project. 🙌

I've found a bug using this title ☁️ State of Cloud Communities ☁️🇫🇷 in France 🇫🇷

The screen rendering is as expected but when I download I got 2 differents emojis for cloud - ☁️
Here is the downloaded banner in png.

The first emoji is like the one I put but the second one doesn't match my first cloud emoji.

It is not a big deal, I've copied and pasted the first cloud emoji in the image to get the rendering I wanted.

Thanks for your work. 👍

If the user clicks on the border option, display a color picker to modify its color.

Hey, I came across this on dev.to. I think the idea is brilliant, I never knew I would have needed this because I always steal photos from Unsplash for the image banner.

I have a suggestion tho. How about rich-text feature? This allows them to maybe edit the text on the banner itself instead of the input box while allowing the text to be bolded/italic/etc. Libraries like draft.js or slate.js could accomplish this. And if it's not anything fancy, I think html2canvas could still render them as images (this one I might need to test).

What do you think? Is this something you have in mind too? If it is, let me know. I am interested to work on this if you don't mind (this is because I want to validate this idea too, it might not work 😂). Thanks.