Skip to content

Use a real asset in the card example #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arhimede merged 1 commit into from
Sep 15, 2026
Merged

Use a real asset in the card example #30

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docs/book/v1/how-tos/twitter-opengraph-cards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ Make sure to update all items based on your page content.
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Basic description">
<meta name="twitter:image" content="{{ absolute_url(asset('images/app/My-image.png')) }}">
<meta name="twitter:image" content="{{ absolute_url(asset('images/app/logo.png')) }}">
<meta name="twitter:image:alt" content="Image alt">

<!-- OpenGraph card -->
<meta property="og:title" content="Page title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ url('app::index') }}"/>
<meta property="og:image" content="{{ absolute_url(asset('images/app/My-image.png')) }}"/>
<meta property="og:image" content="{{ absolute_url(asset('images/app/logo.png')) }}"/>
<meta property="og:description" content="Basic description"/>
```

Expand All @@ -26,4 +26,5 @@ In the example:
- `{{ url('app::index') }}` is the absolute URL of the homepage, and `url()` returns an absolute URL for any route name, which is what cards require — you can point a card at another page the same way, just like the canonical URL does in `{% block canonical %}{{ url(routeName ?? null) }}{% endblock %}`.
- The `block` item is present to mitigate for not-found pages, e.g. when the url is typed incorrectly.
- Card images must be absolute URLs too, but `asset()` on its own returns a path, so it is wrapped in `absolute_url()`.
The image from `{{ absolute_url(asset('images/app/My-image.png')) }}` is found in `public/images/app/PHP-REST-API.png`, but it is copied there by the `npm` script from `src/App/assets/images/PHP-REST-API.png`.
The image in the example, `images/app/logo.png`, is served from `public/images/app/logo.png`, where the Vite build copies it from `src/App/assets/images/logo.png`.
Replace it with your own card image by adding the file to `src/App/assets/images/` and rebuilding.