Social Media Image Kit

Social Media Image Kit

Front-end Templates

The required meta tags can be added to your front-end Antlers templates in a few different ways. The simplest method is to use the provided {{ get_social_media_images /}} tag:

1<!doctype html>
3 <head>
4 {{ get_social_media_images /}}
5 </head>

Meta tags will be automatically created and added to the templates output if the image has been generated for that entry. This tag will not trigger the image generation process, by design.

#Manually Rendering Meta Tags

If you'd like to manually create the metadata tags, you may use the provided tag as a tag pair:

1<!doctype html>
3 <head>
4 {{ get_social_media_images }}
5 Custom logic here.
6 {{ /get_social_media_images }}
7 </head>

The following variables will be made available to you:

  • url: The generated asset's URL.

  • handle: The handle of the social media image (from the configuration file).

  • meta: An array of resolved metadata values (from the configuration file).

  • value: A complete metadata tag. This is the value that is automatically output when not using the tag-pair version.

#Using Site Essentials for Statamic

If you are also using the Site Essentials for Statamic addon, Social Media Image Kit provides a metadata provider that can be registered.

Within your site's AppServiceProvider (or wherever you are currently registering metadata):

3namespace App\Providers;
5use Illuminate\Support\ServiceProvider;
6use Stillat\StatamicSiteEssentials\Support\Facades\Metadata;
8class AppServiceProvider extends ServiceProvider
10 /**
11 * Bootstrap any application services.
12 */
13 public function boot(): void
14 {
15 // ...
17 Metadata::withDefaults()->addProviders([
18 \Stillat\SocialMediaImageKit\Metadata\MetadataProvider::class,
19 ]);
21 // ...
22 }

When using this integration method, you do not need to add any custom Social Media Image Kit tags to your site's front-end templates.

Some absolutely amazing

The following amazing people help support this site and my open source projects ♥️
If you're interesting in supporting my work and want to show up on this list, check out my GitHub Sponsors Profile.