Social Media Image Kit

Social Media Image Kit

Configuration Overview

Social Media Kit offers many different configuration options, aimed at helping fine tune the installation to meet your projects needs.

After installation, you should see the following configuration files within your site's config/social_media_image_kit folder:

  • general.php: Contains generalized configuration options, such as enabling the image generation features, disabling events, and configuring the asset container and collections.

  • generation.php: Provides advanced control of the rendering and generation process. This file is generally safe to ignore for the vast majority of deployments.

  • images.php: Contains the social media image configuration, such as which platforms to generate images for, their size, as well as additional metadata that should be included in the final output.

  • queue.php: Provides configuration options for running Social Media Image Kit with a job queue, and the associated database/queue connection information.

#Configuring Image Sizes

Image sizes, and their associated metadata, are configured within the images.php configuration file.

Each configured social media image must have the following properties:

  • handle: A unique handle to internally represent the social media platform. This value should not contain special characters or spaces, and should not be changed once set as it is used to link attributes and other meta-data to images within the Social Media Images asset container.

  • name: The name is used to help identify what size the site is for; its purely informational and will be displayed within the Control Panel.

  • width: The width of the final image, in pixels.

  • height: The height of the final image, in pixels.

  • attributes: A list of attributes that will be added to the rendered meta tag.

The following image profiles are available by default to help you get started:

1<?php
2 
3return [
4 
5 'profiles' => [
6 [
7 'handle' => 'twitter',
8 'name' => 'Twitter',
9 'width' => 1024,
10 'height' => 512,
11 'attributes' => [
12 'name' => 'og:image',
13 ],
14 ],
15 [
16 'handle' => 'facebook',
17 'name' => 'Facebook',
18 'width' => 1200,
19 'height' => 630,
20 'attributes' => [
21 'property' => 'og:image',
22 ],
23 'meta_tags' => [
24 [
25 'property' => 'og:image:width',
26 'content' => '$width',
27 ],
28 [
29 'property' => 'og:image:height',
30 'content' => '$height',
31 ],
32 [
33 'property' => 'og:image:alt',
34 'content' => '$alt',
35 ],
36 [
37 'property' => 'og:image:type',
38 'content' => '$mime_type',
39 ],
40 ],
41 ],
42 ],
43 
44];

#Selecting which Collections Images are Generated For

To specify the collections Social Media Image Kit should generate images for, we need to add the collection's handle to the list of collections within the general.php configuration file. Each configured collection will also need to import Social Media Image Kit's fieldset into its blueprint.

1<?php
2 
3return [
4 
5 // ...
6 
7 /*
8 |--------------------------------------------------------------------------
9 | Collection Handles for Image Generation
10 |--------------------------------------------------------------------------
11 |
12 | The 'collections' array specifies which collection handles the Social Media
13 | Image Kit addon will reference to retrieve entries. Only collections that
14 | appear in this array will be used to generate social media images for.
15 |
16 */
17 
18 'collections' => [
19 'documentation',
20 'pages',
21 ],
22 
23];

#Configuring Folder Paths

By default, Social Media Image Kit will produce a nested folder structure for all generated assets. Folder names are generated using an Antlers template. This template can be changed by modifying the folder configuration value within the config/social_media_image_kit/general.php file.

The default folder template is:

1{{ if date }}
2 social-media/{{ date | format('Y') }}/{{ date | format ('m') }}/{{ date | format ('d') }}
3{{ else }}
4 social-media/{{ collection:handle /}}
5{{ /if }}

Some absolutely amazing
people

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.