Template Options
This page is in progress.
Social Magick comes with three quick-start templates pre-installed: Solid, Overlay, and Cutout. These are to help you get an idea of what you can do with the different options.
Here is how the templates start, and the generated images (using Joomla's pre-installed sample data):
| Template | Generated Image |
|---|---|
 |
 |
 |
 |
 |
 |
For the purposes of this documentation, we are going to use the Cutout template as an example.
Here are the options that are pre-installed with the plugin:
Let's go through them one-by-one.
This is going to be how you know which template to select in the menu, article, or category options. It should be short but memorable so that you can identify which template is which. For example, you can use properties of the template (like we did in the samples), or name them by where they should be used (like "default", "blog", or "events").
The basis of your template. If you are currently making open graph images for your site currently, you can save a blank version as a png and use that as your template. If you're not sure where to start, you can also remove the template image and select just a background colour instead.
The number of pixels wide your final Open Graph image should be. If it doesn't match your template image, your image will be resized and/or cropped to fit.
The number of pixels tall your final Open Graph image should be. If it doesn't match your template image, your image will be resized and/or cropped to fit.
If you don't have a template image loaded, you can define a background colour for your open graph image instead.
This is useful if you want to use an article image behind your template. Move the slider to the left to make the background colour more transparent. Move it to the right to make it more opaque. The default is all the way to the right, or 100% opaque.
The typeface your open graph images should use. Social Magick looks for fonts in the folder plugins/system/socialmagick/fonts; upload your desired font there, and it will be available for selection here. By default, Social Magick includes Open Sans (in both Bold and Bold Italic).
Your desired font size, in points. If you mostly have short page titles, you can use a bigger font size. If you have very long page titles, stay around the default (32). If you define the font as too small, remember that people might not be able to read it when it's used in link previews, as it displays the image as much smaller.
The color you want the generated text to be.
These values define the bounding box for the text. (What is the maximum amount of space that the text can occupy if someone puts really long text in there?) It is easier to find these if you used some kind of design program (like Adobe Illustrator or Affinity Designer) to create your template. Then you can place a text box on the design where you want it, and check the dimensions like so:
Where should the text align with respect to the bounding box (above)? Like any text editor, the options are left, middle, and right.
Should the text be vertically aligned in the center? The default is yes; by selecting "No", the text will align to the top of the text box.
Let's see what happens if we select "No" in the cutout template:
Well, that doesn't look quite right, but it is definitely aligned to the top. We will fix the spacing in the next option:
How many pixels away from the top should the text be? Again, this is easier to figure out in an image program:
In Affinity Designer, the bigger top left square means that it is showing the X and Y coordinates from the top left corner. Since we want the pixels away from the top, we will use the Y coordinate, and round it up to 93.
That gives us this:
Much better!
If we have set "centre text vertically" to "Yes", this text box replaces the above. This defines how many pixels from the centre of the template you want the centre of the textbox to be. This is a little confusing, so let's see another screenshot with the text centered vertically (and adjusted by 0, for now):
It looks okay, but if you look closely, you can see it's not quite lined up to the center of the circle. If we go back to our design file, we see why:
The center of the text box is above the center of the template, just by a bit.