How to add custom layout?

[therohitdas]

Thank you very much for making this!
I am tired of all the other ways to create OG images on the fly.

1. I wanted to know what the process of adding a layout will look like. In general, what is the workflow you use to create layouts? I would like to fork and create a personalised layout for my site.
2. How to include custom fonts, what will that process look like?
3. How does this generator create Images? Is it taking screenshots or some other wizardry?

[svenluijten]

It's currently not possible to add your own layouts or themes (which includes backgrounds and fonts). This was done by design, but I have a PR open to allow for custom themes (backgrounds, fonts): #7.

To answer your question 3: it uses intervention/image, which in turn relies on imagick to create images. No screenshots, no browsers, just pure PHP wizardry ✨

[simonhamp]

Thank you very much for making this!
I am tired of all the other ways to create OG images on the fly.

Me too! Thanks for the kind words @therohitdas

It's currently not possible to add your own layouts or themes

That's not strictly correct 😊

Before we get into it, it's worth noting my approach (which may seem odd):

I've split the way you design an image into a Theme and a Layout:

• The theme governs backgrounds, colours and fonts.
• The layout governs the size (maximum dimensions, font sizes etc) and position of 'features'. Basically, the placement of all of the elements of the design onto the canvas.
  • The layout is currently also in charge of rendering, though this may change in the future.
• The Image class is simply the coordinator of all of this configuration - bringing your content together with a theme and a layout.

I've split these so that it's easier to mix and match different themes with different layouts. The goal is to create a few core themes and layouts that can easily be mixed and modified by devs to create a huge variety of potential designs without having to go into the weeds of doing image layout work.

But I totally get that some will want to do this and I am keen for this package to provide some of that flexibility.

Layouts

Take a look at the Standard layout class

They're pretty straightforward config that's basically just setting up the size and position of the various 'features'.

At the moment, the only features are TextBox's, background images and borders.

If you're looking to add extra images, such as watermarks, or other features like panels, I'd be happy to receive PRs that add to the AbstractLayout with other 'feature renderers'.

We should discuss how that should work before you start writing any code though, because I already have some specific implementation details in mind for that.

Themes

Themes are super easy to build right now! You simply create a class that accepts all of the necessary parameters.

The only limitation there is that it currently uses a Font enum which contains just a few variants of the font 'Inter', the only font I've currently bundled in. I am planning to bundle more fonts as I build out more themes.

That's why we need....

Custom Fonts

@svenluijten is correct that custom fonts aren't there yet, but they are coming - #7 and #13 are contenders for getting this available.

In either case, you will be able to extend a simple interface and pass that into your custom Theme as described above once one of these is merged.

[simonhamp]

#13 is now merged and will be released tomorrow. I'll add more details to the README.

This brings custom fonts and backgrounds to the package, which means you are now able to customise everything about the image you generate.

My next goal is to create two more themes. This will likely expose the 'features' work that I was talking about earlier. So I'm expecting to refactor some logic there.

I'm not expecting any breaking changes from that work though, so feel free to go wild.

[therohitdas]

Thank you very much for the reply.
I am very excited about the custom background and fonts 🎉

I spent the last few days trying different ways to make OG images again.
For me, @vercel/og takes around 2-3 sec to generate an OG image. I have code deployed on DigitalOcean using docker.

http://og-image.hq.friendshipking.com/api/og/v1/large?url=placehold.co/150.png

Change the URL part to experiment with an implementation of @vercel/og.

Currently, @vercel/og does not take a screenshot. It uses Satori to create SVG from HTML.

Is there any benchmark on how long it takes to generate an OG image using the-og?
It will be nice to compare the-og with other ways to generate OG images.

@simonhamp Can you create a theme with a dynamic profile image? This can be a good example of creating a thumbnail with dynamic images.

[simonhamp]

@therohitdas

Is there any benchmark on how long it takes to generate an OG image using the-og?
It will be nice to compare the-og with other ways to generate OG images.

You can run the test suite. Generating images is very quick if all assets to be used in the image are available locally (i.e. no network requests needed to fetch the background image).

Rendering time will depend on the size of the image and the number of features being rendered, but...

It usually takes only a few hundred milliseconds to render an image.

Can you create a theme with a dynamic profile image?

I have a PR coming today that will demonstrate this 👍🏼

[simonhamp]

@therohitdas I've just released v0.4 which adds support for the PictureBox. This might not be exactly what you have in mind yet, but it's a step in the right direction.

This allows you to set an image used in the layout via the picture() method. See the tests for an example of how to use this.

[simonhamp]

@therohitdas I released v0.5.1 yesterday which added support for circle() masking pictures.

This will allow you to create that popular circular avatar style. You can see an example of this in use in the Avatar layout.

I'm going to close this issue now as I believe I've delivered everything you've asked for. If you have any issues with anything, please open a new issue 🙏🏼