Basic
Guide to generating your first image variation with query string integration
Last updated
Was this helpful?
Guide to generating your first image variation with query string integration
Last updated
Was this helpful?
Query string is a key value pair that you can append to a URL. In this particular use case, we can use it to encode modification that needs to be applied to a template.
A good use case for this integration is to create open graph image, product images for your e-commerce store and many more.
By creating query string URL for your template, you can create variation of the image by just simply modifying the query string.
For example, the link below has two query strings - title and src. It generates the following image.
By simply changing the query string title and src to something different, you could generate a new variation like below,
We will walk you through to create your first image variation.
Unlike other integration, this is the simplest form of integration. All you need is your template. If you don't have one, choose from our selection of presets.
From the drop down menu, select "Query String URL". Alternatively, you can select "Console" and navigate to "Integrations" > "Query String".
You should now see the Query String wizard
Our query strings are appended to this base URL. Base URL lets us know which template you want to create variation for.
This allows us to block any requests that come from unauthorized domains.
You can specify multiple origins, they must be separated by comma. Wilcard (*) character is allowed. Here's few examples.
Allowed Origins
Description
*
Allow all origins
*.usestencil.com
Allows app.usestencil.com, images.usestencil.com, and anything with that ends with .usestencil.com
usestencil.*
Allows usestencil.com, usestencil.org, usestencil.io, etc
usestencil.com, *.usestencil.com, example.com
Only allows usestencil.com, example.com, app.usestencil.com, api.usestencil.com, etc
We highly recommend that you setup this value to only domains you're going to use the integration with.
Why?
Unlike Secure Signed Image, anyone can create variation from this URL. If your templates are really good looking (which I'm sure they are) and without your branding, then anyone can use the URL to create variation for their own use. This will eat up your image generation quota.
Here you would customize which query string belongs to which object to be modified.
In this example, we create two query strings - image which should change the src field for bg_image object and title which should change the text field for text_4 object.
The preview will show you how the URL will look like. Of course you need to replace those values with a real value and it must be properly URL encoded.
Don't forget to save it you're done!
If you're unsure which object belongs to which item on your template, simply go to the "Test API" and consult the table for the right information.
To test your query string, copy the URL from previous step and modify the query strings properly.
The above links give me,
The first image will take a few seconds to generate. If the modifications remain the same, the subsequent call to the image will retrieve the image from cache.
Read more about cache and quota.
