Generate custom social images from SVG templates via Linkable entities by Copilot · Pull Request #235 · sigwinhq/yassg

Copilot · 2025-12-18T19:40:36Z

Refactor to use yassg_svg_url() from LinkableExtension
Fix fragile block check by defining empty fallback
Update demo templates to use new approach
Move SVG templates to correct location (pages/ not social/)
Update documentation
Fix hardcoded URL and malformed README examples

Original prompt

This section details on the original issue you should resolve

<issue_title>Generate custom social images</issue_title>
<issue_description>Example https://opengraph.githubassets.com/ffc3f988f382ffd8f6ed506138a96127ea9c75c723a84985a6cb9a2d22ca6142/sigwinhq/yassg

Project is using ImgProxy internally, idea is to allow specifying (an optionally overriding per article, category, etc) a SVG which we can render and it would get served via ImgProxy which dumps it into a WebP or whatever and then it's served as the social image.

The override could in theory work by us having a dedicated (overrideable in the downstream project) Twig template which we inject the current article into when rendering, it gets processed via ImgProxy when building like any asset.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Generate custom social images #211

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

src/Bridge/Twig/Extension/SocialImageExtension.php

.gitignore

dkarlovi · 2025-12-18T20:43:25Z

@copilot good start, but I think we can start like this:

let's think of the social image like "the Accept: application/svg for the article / page etc in question, like a SVG representation of it
we can then use the same url + .svg (instead of .html or nothing) for this SVG
the route knows which thing it needs to render and that it needs to produce a SVG,
it injects these things into the Twig template which produces a valid SVG
we then use that SVG URL with yassg_thumbnail() function which by default passes it through ImgProxy and dumps it during build, just like any other asset

We could probably tweak the route loader which creates the routes or we might not even need to, it supports passing extensions already (just .html, needs examination).

TLDR:

/some/article - HTML
/some/article.svg, that same article, but rendered as a SVG
yassg_thumbnail("/some/article.svg"), should already work as expected

…umbnail - Simplified yassg_social_image() to return SVG URL (e.g., /article/slug.svg) - Updated RouteLoader to support .svg extension alongside .html - Modified DefaultController to render social/{route}.svg.twig templates - Removed configuration for social_image_template (no longer needed) - Updated templates to use yassg_thumbnail(yassg_social_image(entity)) - SVG templates now receive same context as HTML templates - Images processed through ImgProxy at build time via existing AssetQueue Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Copilot · 2025-12-18T20:51:12Z

@copilot good start, but I think we can start like this:

let's think of the social image like "the Accept: application/svg for the article / page etc in question, like a SVG representation of it...

Implemented in eb55c8b. The approach now works as follows:

/article/slug renders HTML from pages/article.html.twig
/article/slug.svg renders SVG from social/article.svg.twig
yassg_social_image(article) returns /article/slug.svg
yassg_thumbnail(yassg_social_image(article)) processes it through ImgProxy

The RouteLoader supports .svg extension and DefaultController detects it to render the appropriate SVG template. The SVG template receives the same context (article, etc.) as the HTML template.

- Fixed RouteLoader regex to properly match index.html or .svg - Changed yassg_social_image to use _filename parameter instead of _format - Simplified DefaultController SVG detection to check _filename === '.svg' Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

dkarlovi

@copilot I've vastly simplified your approach since we already had the Linkable extension, this just expanded on it.

See how can we handle the block check not working, maybe we define an empty one like for title and then only use it if redefined?

composer.json

tests/functional/site/templates/layout.html.twig

- Define empty social_image block in layouts to prevent errors when block is not defined - Update demo Page model to implement Linkable interface - Move SVG templates from social/ to pages/ directory to match controller expectations - Update demo templates to use yassg_svg_url() with block pattern - Update README with simplified approach using yassg_svg_url() and blocks Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Copilot

Pull request overview

This PR implements dynamic social image generation by allowing routes to render SVG variants that can be processed through ImgProxy. The implementation adds a new Twig function yassg_svg_url() to generate SVG URLs for entities, updates the routing layer to support .svg extensions, and modifies the controller to render SVG templates with appropriate content types.

Key changes:

Route system now supports .svg extension alongside .html for any route
New yassg_svg_url() Twig function generates SVG URLs from Linkable entities
Controller detects SVG requests and renders SVG templates with proper content type headers

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/Bridge/Twig/Extension/LinkableExtension.php	Adds `yassg_svg_url()` function to generate SVG URLs by appending `_filename: 'index.svg'` parameter
src/Bridge/Symfony/Routing/Loader/RouteLoader.php	Updates route requirement regex to allow both `index.html` and `index.svg` extensions
src/Bridge/Symfony/Controller/DefaultController.php	Adds SVG detection logic and renders appropriate template with `image/svg+xml` content type
tests/functional/site/templates/pages/article.svg.twig	Adds SVG template for article pages with dynamic content from article entity
tests/functional/site/templates/pages/article.html.twig	Uses `yassg_svg_url()` in social_image block
tests/functional/site/templates/layout.html.twig	Integrates social image URL into Open Graph and Twitter Card meta tags
resources/init/demo/templates/social/demo.svg.twig	Provides demo SVG template with gradient background and dynamic text
resources/init/demo/templates/layout.html.twig	Demonstrates social image integration in demo layout
composer.json	Explicitly adds symfony/dependency-injection to requirements
README.md	Documents the social image generation feature with usage examples

Copilot · 2025-12-18T21:44:55Z

README.md

+{% block body %}
+    {# ... #}
+{% endblock %}
+```


The README documentation states that SVG templates should be created in templates/social/{route}.svg.twig, but the actual controller implementation in DefaultController.php line 47 looks for templates in pages/{route}.svg.twig. This mismatch will cause the documented approach to fail with template not found errors. Either the documentation should be updated to reflect the actual pages/ directory, or the controller should be modified to look in the social/ directory for SVG templates.

Copilot · 2025-12-18T21:44:56Z

resources/init/demo/templates/layout.html.twig


    <title>{{ demo_page.title }}</title>

+    {% block social_image %}{% endblock %}


Type error: The yassg_svg_url() function requires a Linkable parameter, but demo_page is of type App\Model\Page which does not implement the Linkable interface (see resources/init/demo/src/Model/Page.php). This will cause a TypeError at runtime. The Page class needs to implement the Linkable interface with getLinkRouteName() and getLinkRouteParameters() methods.

src/Bridge/Twig/Extension/LinkableExtension.php

Copilot · 2025-12-18T21:44:56Z

resources/init/demo/templates/layout.html.twig


    <title>{{ demo_page.title }}</title>

+    {% block social_image %}{% endblock %}


The function yassg_social_image() does not exist in the codebase. The actual function added in LinkableExtension.php is yassg_svg_url(). This will cause a runtime error when the template is rendered. The function call should be changed to yassg_svg_url(demo_page).

Suggested change

{% block social_image %}{% endblock %}

{% set social_image_url = yassg_thumbnail(yassg_svg_url(demo_page), {width: 1200, height: 630, format: 'webp'}) %}

README.md

Copilot · 2025-12-18T21:44:57Z

README.md

+```
+
+The SVG template receives the same variables as the HTML template (article, page, etc.).
+


The code example is malformed with incomplete syntax. Lines 107-110 contain a closing code block with dangling code that appears to be leftover from editing. The example should either be removed or completed properly. The fragment "format: 'png'" and closing braces/backticks don't belong to any coherent code example.

Suggested change

```

The SVG template receives the same variables as the HTML template (article, page, etc.).

Fixed in daf3ca2. Removed the malformed code fragment (format: 'png' and extra closing braces/backticks).

Copilot · 2025-12-18T21:45:05Z

@copilot I've vastly simplified your approach since we already had the Linkable extension, this just expanded on it.

See how can we handle the block check not working, maybe we define an empty one ...

Fixed in 90dd6f2. Added an empty {% block social_image %}{% endblock %} definition in the layout templates before calling block('social_image'). This provides a fallback so templates that don't define the block won't cause build failures. Child templates can override it when they have a Linkable entity to generate social images.

dkarlovi · 2026-01-15T17:18:37Z

tests/functional/site/templates/layout.html.twig

+
+        Revamp when we have a full Docker build setup
+    #}
+    {% set social_image_url = "http://app:9988"~block('social_image') %}


Hardcoded here.

Fixed in daf3ca2. Removed the hardcoded URL and now using absolute_url() properly, consistent with the demo layout.

- Remove hardcoded "http://app:9988" URL and use absolute_url() properly - Fix malformed code block in README (remove dangling format: 'png' fragment) - Makes test layout consistent with demo layout approach Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Initial plan

6be6016

Copilot AI assigned Copilot and dkarlovi Dec 18, 2025

Copilot started work on behalf of dkarlovi December 18, 2025 19:40 View session

Copilot AI and others added 6 commits December 18, 2025 19:50

Add social image generation functionality with Twig templates

a558e56

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Configure test site with social image template and meta tags

556d45a

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Add documentation and demo templates for social images

876b47f

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Clean up backup files and update gitignore

a72b5fc

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Address code review feedback: use SHA-256 and improve context handling

28b8fd0

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Restore composer.json to proper state

6caa9ad

Co-authored-by: dkarlovi <209225+dkarlovi@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add functionality to generate custom social images~~ Generate custom social images from SVG templates via ImgProxy Dec 18, 2025

Copilot AI requested a review from dkarlovi December 18, 2025 20:01

Copilot finished work on behalf of dkarlovi December 18, 2025 20:01

dkarlovi reviewed Dec 18, 2025

View reviewed changes

Copilot started work on behalf of dkarlovi December 18, 2025 20:43 View session

Copilot AI changed the title ~~Generate custom social images from SVG templates via ImgProxy~~ Generate custom social images from SVG templates via route-based rendering Dec 18, 2025

Copilot AI requested a review from dkarlovi December 18, 2025 20:54

Copilot finished work on behalf of dkarlovi December 18, 2025 20:54

dkarlovi added 4 commits December 18, 2025 22:00

fix SVG routing, now it works correctly

f3e6fb9

add yassg_svg_url for Linkable

d6d58fc

add yassg_svg_url for Linkable

a1cf0cd

fix Symfony dependency

309cad9

dkarlovi requested a review from Copilot December 18, 2025 21:36

Copilot started reviewing on behalf of dkarlovi December 18, 2025 21:36 View session

dkarlovi requested changes Dec 18, 2025

View reviewed changes

composer.json Show resolved Hide resolved

tests/functional/site/templates/layout.html.twig Show resolved Hide resolved

Copilot started work on behalf of dkarlovi December 18, 2025 21:40 View session

Copilot AI reviewed Dec 18, 2025

View reviewed changes

Copilot AI changed the title ~~Generate custom social images from SVG templates via route-based rendering~~ Generate custom social images from SVG templates via Linkable entities Dec 18, 2025

Copilot AI requested a review from dkarlovi December 18, 2025 21:46

Copilot finished work on behalf of dkarlovi December 18, 2025 21:46

dkarlovi added 3 commits December 19, 2025 18:44

fix Symfony route paths

739567e

fix test app

eb3a62e

it works

ad34271

dkarlovi requested changes Jan 15, 2026

View reviewed changes

Copilot started work on behalf of dkarlovi January 15, 2026 17:20 View session

Copilot AI requested a review from dkarlovi January 15, 2026 17:22

Copilot finished work on behalf of dkarlovi January 15, 2026 17:23


		<title>{{ demo_page.title }}</title>

		{% block social_image %}{% endblock %}

	{% block social_image %}{% endblock %}
	{% set social_image_url = yassg_thumbnail(yassg_svg_url(demo_page), {width: 1200, height: 630, format: 'webp'}) %}

		```

		The SVG template receives the same variables as the HTML template (article, page, etc.).

Conversation

Copilot AI commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Comments on the Issue (you are @copilot in this section)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dkarlovi commented Dec 18, 2025

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

dkarlovi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

dkarlovi Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Dec 18, 2025 •

edited

Loading