Showcase
Display a showcase of the images people have generated by adding the following page tag to a basic page:
shareables: page_slug
Replace page_slug with the slug of the page of your endorsement page.
Additionally, you can choose to display only the images you have vetted and marked as featured by adding the following tag to the basic page:
shareables_featured
Shareable Image Template
In general, any SVG should work fine, though there are a few guidelines to follow to ensure the user-editable sections work okay.
Note that to create a template, you'll need a vector graphics app such as Adobe Illustrator or Sketch (for Mac).
Photo
- A layer named photo can be added, which is replaced by the user-specified photo.
- The layer itself should be an image, not an SVG element – it can be a placeholder image of some sort, or even just a blank image inserted into the document.
Text
- Any user-editable text area should have a layer name that is a valid HTML ID – it should start with a letter, and only contain letters, hyphens, underscores and numbers (ex. comments or endorsement_name).
-
There should be a rectangle that indicates the area the text can occupy (it can be totally transparent as well). It should be named the same as the text layer, with “-box” appended to the end. For example, comments and comments-box.
- Further, you can indicate how the text should be aligned within that box. It defaults to aligned to the top & to the left, but you can add -center or -right to the layer name to align centre- or right-align it, as well as -middle and -bottom to vertically centre or align to the bottom. For example, comments-box-bottom-right will align the text to the bottom right.
-
There are several tokens that can be added to user-editable text areas that are then replaced by the user’s input.
- For example, something like “[first_name] endorses Bernie Sanders” would become, for example, “Jeff endorses Bernie Sanders”.
- Be sure to only use fonts available on the website, or commonly-available ones. The final image is created in the web browser, so the font needs to be available there.
- Export the file named as: "template.svg"
- Upload the file to your Endorsement Page
Tokens for user input
- [name]: full name
- [first_name]: first name
- [last_name]: last name
- [content]: comments
- [employer]: employer
- [occupation]: occupation
- [employer_occupation]: displays both employer and occupation
- [email]: email
- [mobile_number]: cell phone number
- Any custom field on the form can be used – the token is the field’s slug inside square brackets []
Export settings for Adobe Illustrator
File -> Export -> Export As...
Use Artboards: Checked
Styling: Presentation Attributes
Font: SVG
Images: Embed
Object IDs: Layer Names
Decimal: 2
Minify: Checked
Responsive: Unchecked