DEV Community

Cover image for Introducing a banner generator for your articles on DEV

Introducing a banner generator for your articles on DEV

Christopher Kade on May 31, 2019

I've been struggling to find nice pictures for my articles on DEV (and ones that I'm allowed to use in fact). So I figured I'd make a quick banner ...
Collapse
 
ben profile image
Ben Halpern

Super cool! I agree with all the suggestions. Maybe we could all put some work into this and once it's really polished we could link to it or fold it in to the main editor in some way. πŸ™‚

One thing of note: Our image is 1000x420, but, so a little wider than a 2x1 "social image", so the edges get clipped. You may want to make it so the text can't extend too far to the edges of the image, so it will show up properly in both scenarios.

Collapse
 
christopherkade profile image
Christopher Kade

I'm glad you like it Ben ! We could definitely set up some contribution guidelines and a small roadmap.

Understood, glad you're telling me this as I noticed this problem on the Twitter preview image.

Collapse
 
maxwell_dev profile image
Max Antonucci

This will definitely help a lot of posters, thank you!

One suggestion I'd make is including a service like UnSplash for finding different banner images right from dev.to. It's open source and has lots of good options, and I believe the Notion app already has a working example of searching through its images in a GUI.

I'm obviously partial to including an open-source anime image search, but that may have too narrow an audience to justify haha

Collapse
 
georgecoldham profile image
George • Edited

My suggestions, although there is nothing wrong with this, just if you want more for your project!

  • Text size slider as well as number
  • Color pickers for text and background
  • Option to add an image as the background
  • Random background image/style/pattern generator
Collapse
 
christopherkade profile image
Christopher Kade

Love the suggestions ! Thanks for your input, I'm noting them down so I don't forget anything

Collapse
 
liyasthomas profile image
Liyas Thomas
Collapse
 
christopherkade profile image
Christopher Kade

Liyas, these are currently being worked on by members of the community as you can see here.

The color pickers and the random generation have already been added and other features are in the works. :)

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited

Inspired from your project, I made this simple banner generator. liyasthomas.github.io/banner
With more customizations such as:

  • Customizable background, foreground, border colors
  • Custom border width
  • Custom banner size
  • Color picker
  • Color randomizer
  • Upload your own background image etc..

Feel free to contribute on github.com/liyasthomas/banner

Collapse
 
christopherkade profile image
Christopher Kade • Edited

Great work, but why not contribute to the existing project to make it even better?

Collapse
 
liyasthomas profile image
Liyas Thomas

I went through your project and found out its built with react. I don't know react. So i made a simpler one.

Collapse
 
coreyja profile image
Corey Alexander • Edited

Is this open sourced so we all could poke around and help out with some of the ideas and suggestions that are in this thread?

EDIT: I ask before clicking through and seeing the nice GitHub corner banner πŸ˜†
Link for the lazy like me: github.com/christopherkade/banner-...

Collapse
 
kendalmintcode profile image
Rob Kendal {{β˜•}}

This is really cool! I've been using Canva so I have templates set up for those, but this is really really handy, awesome work!

Collapse
 
coreyja profile image
Corey Alexander

Bookmarking this for my next post! This is great!

Collapse
 
christopherkade profile image
Christopher Kade

For everyone already participating to the project: thank you ! Please give me a short while to set everything up so you guys have everything you need:

  • Issues to know what's needed (and therefore a way to assign people on tasks)
  • Guidelines
  • A better CI/CD pipeline (maybe?)

Have a good one :)

Collapse
 
finallynero profile image
Nero Adaware

This is awesome

Collapse
 
andypiper profile image
Andy Piper

Really like this - excited to see how it evolves!

Collapse
 
devarjunan profile image
dev-arjunan

Great stuff :)

Collapse
 
yogeswaran79 profile image
Yogeswaran

This is awesome!

Collapse
 
briwa profile image
briwa

This is super! Thanks a lot. I would never have thought about this!

Collapse
 
valentindududu profile image
Valentin D.

Good work Christopher !

Collapse
 
christopherkade profile image
Christopher Kade

Thanks Val !

Collapse
 
silvestricodes profile image
Jonathan Silvestri

Sir...I have been struggling so badly with making them myself.

Thank you so much

Collapse
 
andy profile image
Andy Zhao (he/him)

This is awesome! Love how you styled the button too!

Collapse
 
lankydandev profile image
Dan Newton

Cool. I might try this on my own blog. I have seen other writers here with similar banners and liked how clean they looked.

Collapse
 
rhymes profile image
rhymes

Great job Christopher!

Collapse
 
mellydevs profile image
Melissa Gilbert

Awesome dude! Very helpful

Collapse
 
msfjarvis profile image
Harsh Shandilya

I published my first post on DEV yesterday and was stumped by this same problem, so glad to discover this!

Collapse
 
flrnd profile image
Florian Rand

Wow christpher this is pretty cool!

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

Great tool, it's going to be a direct star! It would just be missing the possibility to put an image in the background with optional blur and that would be very useful.

Collapse
 
utkarsh profile image
Utkarsh Talwar

Pretty cool and minimalistic. Would be super helpful when someone is in a hurry. I like it!

Collapse
 
jsgoose profile image
Jonathan Sexton

This is really cool and I appreciate all of the hard work that went into it!

I look forward to using it with my next article!