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.