Fleer Card Image Generator, Built by Me

[Rin 249]

My submission this week is in the form of a website: https://vhl-card-template.sqnnet.dev/

 

 

Incoming context text to go along with my graphic that might count for a PT all on it's own, LOL

 

At any rate-- I've been in talks with a few people regarding hockey cards, which has been a really nice development overall. We have a crazy talented pool of graphic makers here, so much so that it kinda puts me to shame.

 

One of the greatest problems we'd face when it comes to making a large-scale card collecting or pack opening platform is the sheer amount of time required up front in order to generate the cards. Jersey swaps, text swaps, team logo and potentially color swaps, etc etc would all need to be performed in order to give each player their own card, which would require a lot of man hours.

 

So, being a (now formerly, as I move into DevOps) professional full stack developer, I figured I'd try to create a little something unique for my graphic submission this week. Rather than just putting forth a graphic, I've created a little proof of concept website that allows anyone with an image of their own to create a card in my recreated Fleer template within seconds. As an example, I went ahead and put my most recent graphic of @Spade18's player, MacGregor Walcott, into the site:

 

  

 

Admittedly, I should have used an image that would have fit better within the aspect ratio of the card, but I don't want to re-do an entire jersey swap for the time being. I also do notice a little artifact on the right side of the card, looks like a possible issue with the library I'm using for the "Save As PNG" button, because the card doesn't appear that way in the image preview. That can easily be cropped out, though, for easy use in signatures. When the stakes are a bit higher than just making a quick proof of concept, I'll investigate that and see if I can't clean it up a little bit.

 

The resolution for the card is deliberately locked because you motherfuckers insist on throwing 1920x1080 wallpapers in your fucking FORUM SIGNATURE WHICH TAKES UP 15X THE SPACE YOUR POST DOE-- ahem, I digress.

 

This, though, serves as a kind of soft test for what could be accomplished somewhere down the line. It's a little bit of spit, duct tape, and chip clips behind the scenes to keep the output looking pretty, and I'm sure complexity would be far greater when working on more detailed templates, but I feel like it's a great start toward adding some QoL/worldbuilding features to the VHL if we ever care for them. In my mind, that could potentially include:

 

• Allowing people to upload an image or image URL, and displaying a (possibly unique per season) card just like this on their player page
  • These could also be collected or snapshotted to show a "collection" of cards from a season
• Generating cards for some kind of pack opener/card collection minigame
• Providing new users a quick and easy "first graphic" that helps bring them into the world of the VHL

 

Not to mention, the possibilities for expansion:

 

• Applying an animation to said cards to flip them over, revealing stats and maybe a short, customizable biography
• Creating special variants of cards to commemorate career milestones, highlights, award wins, etc
• Encouraging members to upload their own templates or designs, driving engagement and rewarding those with something that will impact the entire site

 

This is just me coming up with things from the top of my head, though. Feel free to play around with this and let me know what you think!

[N0HBDY 1,161]

4 hours ago, Rin said:

The resolution for the card is deliberately locked because you motherfuckers insist on throwing 1920x1080 wallpapers in your fucking FORUM SIGNATURE WHICH TAKES UP 15X THE SPACE YOUR POST DOE-- ahem, I digress.

Not the hero we deserve but the hero we need.

[N0HBDY 1,161]

@Spartan Time to start the VHL TCG

[N0HBDY 1,161]

@Rinhow's this for size?

[leandrofg 1,237]

Brilliant work, @Rin! I don't know what the problem is, but there's an issue with Safari. Exporting there will override your resolution settings and hide the team logo. Example below. @Banackock, Reddit material!

 

Firefox:

Spoiler

 

Safari:

Spoiler

 

[Rin 249]

27 minutes ago, leandrofg said:

Brilliant work, @Rin! I don't know what the problem is, but there's an issue with Safari. Exporting there will override your resolution settings and hide the team logo. Example below. @Banackock, Reddit material!

 

Firefox:

  Reveal hidden contents

 

Safari:

  Reveal hidden contents

 

 

That's definitely weird, does it look normal in-browser for Safari?

 

Seems like the library I used to export the image has a few kinks, I'll play around with an alternative to see if it doesn't help. Thankfully, it exports it to scale, so taking a screenshot of the card is still a perfectly fine workaround. (It was actually the intent, before I decided to go a step further)

[BOOM 9,040]

Hey, it works!

 

[Daniel Janser 2,306]

11 hours ago, BOOM said:

Hey, it works!

 

This disgusting filth has been reported!

 

[Spade18 1,313]

This looks awesome!

 

Thank you!

[BOOM 9,040]

8 hours ago, Daniel Janser said:

This disgusting filth has been reported!

 

 

Ha. I'm sure someone probably has though.