# Og:image and Twitter Card Image Generator

**URL:** <https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794>\
**Category:** support\
**Created:** [October 4, 2022, 12:58am UTC](https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794 "2022-10-04T00:58:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BlueBlueSky](https://avatars.discourse-cdn.com/v4/letter/b/8baadc/32.png) [@BlueBlueSky](https://discourse.gohugo.io/u/BlueBlueSky)\
**Post date:** [October 4, 2022, 12:58am UTC](https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794/1 "2022-10-04T00:58:07Z")

</div>

Hey guys!  
I am surprised that I can’t anything about [tcardgen](https://github.com/Ladicle/tcardgen) 😲

> Generate Twitter card (OGP) images for your blog posts. Supported front-matters are title, author, categories, tags, and date. Also, both toml and yaml formats are supported.

Is there an easier way to generate images for og:image based on variables from \*.md of posts?  
I want to generate those on my own variables

---

<div class="post-metadata">

**Author:** ![erik06](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/erik06/32/12906_2.png) [@erik06](https://discourse.gohugo.io/u/erik06)\
**Post date:** [October 4, 2022, 2:02am UTC](https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794/2 "2022-10-04T02:02:51Z")

</div>

We use Cloudinary to serve our OG images. For adding text and layering our logo on top we use a combination of these:

> **[Dynamically Add and Transform Multiple Image Overlays](https://cloudinary.com/blog/transform_your_image_overlays_with_on_the_fly_manipulation)**
>
> Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements

> **[Cloudinary Cookbook](https://cloudinary.com/cookbook/add_a_text_to_an_image)**
>
> Recipes demonstrating cloud-based image and video manipulation and upload using Cloudinary. Sample image and video manipulation URLs and code snippets from multiple frameworks.

By substituting part of the Cloudinary URL with Hugo variables from our markdown files, we get custom OG images for each content page!

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [October 4, 2022, 2:18am UTC](https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794/3 "2022-10-04T02:18:50Z")

</div>

[https://discourse.gohugo.io/t/approaches-for-dynamically-creating-opengraph-images/40614/5](https://discourse.gohugo.io/t/approaches-for-dynamically-creating-opengraph-images/40614/5)

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [October 4, 2022, 1:07pm UTC](https://discourse.gohugo.io/t/og-image-and-twitter-card-image-generator/40794/4 "2022-10-04T13:07:06Z")

</div>

Still trying to figure out a way to control how the [`.Text` filter](https://gohugo.io/functions/images/#text) breaks lines — specifically, how to tell it to do either of the following:

- Respect any non-breaking spaces in the `.Title`. (Tried to feed it formatted text but, of course, it works with only a string.)
- Failing that, make sure that the last line of `.Title` is at least two words.

Otherwise, I can end up with text that looks like this (simulating):

**This is my extra-long title**  
**with a really short word at the**  
**end**

Perhaps a future update will allow `.Text` to accept HTML. One can hope. 🤔