Oh Dear is the all-in-one monitoring tool for your entire website. We monitor uptime, SSL certificates, broken links, scheduled tasks and more. You'll get a notifications for us when something's wrong. All that paired with a developer friendly API and kick-ass documentation. O, and you'll also be able to create a public status page under a minute. Start monitoring using our free trial now.

Generating speaker cards using Tailwind and Laravel

Original – by Freek Van der Herten – 3 minute read

I'm currently organizing the Full Stack Europe conference. The first edition will be on 23 - 25 October in the beautiful city of Antwerp, Belgium. I believe that the best apps or sites aren't built by programmers. They're built by teams. That's why we designed this conference for everybody and don't stick to just one aspect of programming.

Like many other conferences, we'd like to give our speakers and workshop teachers a small image that they can share on Twitter or use in their slides. Such a card image should have the photo, name of the speaker and a few details of the conference.

I could have opened an image editor and handcraft 20+ of those images. But instead, I used my PHP and front end knowledge to generate those cards.

I created a Laravel app, installed Tailwind, and got to work. First, I created a view where all the speaker cards are displayed.

Each card on that page should be converted to an image. A while ago I made a package called Browsershot, that can convert any webpage to an URL. Under the hood, it uses headless Chrome to achieve that. Browsershot also has an option to render a specific dom node to an image.

This is the code used to generate image cards for each of the speakers.

Browsershot::url('http://cards-generator.test/')
  ->select($elementId)
  ->deviceScaleFactor(2)
  ->windowSize(2000, 2000)
  ->save(storage_path("app/cards/{$slug}.jpg"));

In the Laravel app, I've put that piece of code in a handy artisan command.

Here are some of the cards that were generated:

card

card

card

card

Even though I mainly identify as a backend developer, my basic frontend skills did come in handy.

If you want to step a bit out of your comfort zone, and want to learn a bit about the parts of the stack you might be uncomfortable with, consider coming to our conference. You'll find all info on fullstackeurope.com. I might be biased, but I really do think it's going to be an excellent event worth your time.

Stay up to date with all things Laravel, PHP, and JavaScript.

You can follow me on these platforms:

On all these platforms, regularly share programming tips, and what I myself have learned in ongoing projects.

Every month I send out a newsletter containing lots of interesting stuff for the modern PHP developer.

Expect quick tips & tricks, interesting tutorials, opinions and packages. Because I work with Laravel every day there is an emphasis on that framework.

Rest assured that I will only use your email address to send you the newsletter and will not use it for any other purposes.

Comments

What are your thoughts on "Generating speaker cards using Tailwind and Laravel"?

Comments powered by Laravel Comments
Want to join the conversation? Log in or create an account to post a comment.

Webmentions

Tom Witkowski liked on 26th May 2020
Jeroen Thora liked on 26th May 2020
Ed Grosvenor liked on 26th May 2020
Ed Grosvenor replied on 26th May 2020
No. It wasn’t one of you that wrote it and it was definitely specifically about the twitter card image. But that might actually be the package they used. I can see how it could work. I will give it a shot. Thank you!
Goran Gliga liked on 11th September 2019
64 Robots liked on 11th September 2019
Felipe Podestá liked on 10th September 2019
mahmod liked on 9th September 2019
Edwin I Arellano liked on 9th September 2019
JOSIAH YAHAYA liked on 9th September 2019
Mickaël Isaert liked on 9th September 2019
Curran Jensen liked on 9th September 2019
Chris Brown liked on 9th September 2019
Gianmarco Nalin liked on 9th September 2019
Wisdom Ebong retweeted on 9th September 2019
Wisdom Ebong liked on 9th September 2019
Oilmone liked on 9th September 2019
10x procrastinator liked on 9th September 2019
kayvan_am liked on 9th September 2019
Wrends liked on 9th September 2019
Vincenzo La Rosa liked on 9th September 2019
Edwin T. Encomienda retweeted on 9th September 2019
Edwin T. Encomienda liked on 9th September 2019
Neil Carlo Faisan Sucuangco retweeted on 9th September 2019
Diego Orellana liked on 9th September 2019
wouter van marrum liked on 9th September 2019
PheRum liked on 9th September 2019
Zubair Mohsin liked on 9th September 2019
Jimmy Lipham liked on 9th September 2019
Full Stack Europe retweeted on 9th September 2019
Dave Heslop liked on 9th September 2019
Dries Vints retweeted on 9th September 2019
Mithicher Baro retweeted on 9th September 2019
PHP Synopsis retweeted on 9th September 2019
Mithicher Baro liked on 9th September 2019
Jamie Norman replied on 9th September 2019
I get an error when trying to access your site, if I bypass this error I get a 502 Bad Gateway
Dries Vints liked on 9th September 2019
Matthew Poulter liked on 9th September 2019