Getting started with Instamgic Create is really simple. First add the
im-create
class to a div.
The default
width
and
height
is set to 300x300px. But you probably have some specific sizes in mind.
This is easy. Simply set the
data-im-create-width
and
data-im-create-height
properties to the pixel size you want.
In the example above we have defined an image 800x200px. Remember, Instagram images are square so using round numbers ensures no parts of the image are cropped.
Finally set the
Adding text (to copyright it, add a watermark or just for fun) to your created images is easy.
Simply start with the
data-im-create-text
property and set the text you would like to appear.
The size of the text will automatically adjust it's size to fit within the image. SO the more text, the smaller the font size.
Next, set the text position like so:
data-im-create-text-position = "top-left"
.
Options include:
top-left
,
top-right
,
middle-left
,
middle
,
middle-right
,
bottom-left
,
bottom-right
.
Simply set the positon and you're ready to go.
The Instamagic Create function is pretty flexible. It's best to experiment with different settings and tweak your image till you get them perfect.
Created images are all cached. Once an image has been generated it will be saved in the folder you specify in the
config.php
file.
Next time you load up your page the image will be retreived from your Instamagic save directory speeding uploading time.
Options:
Data property
Type
Default
Options
Description
data-im-lightbox
bool
false
true, false
Use this if you want your Instagram images in a popup lightbox. Use with
im-lightbox-group
to group images in to different lightboxes.
data-im-lightbox-group
string
gallery-img
none
Set a unique name for each lightbox group. Use with
im-lightbox
data-im-number-of-images
int
20
1-20
Set the number of images to fit page size or for different layouts.
data-im-create-style
string
grid
grid, collage
Set a grid of columns and rows or choose collage for a random scattered effect (still experimental).
data-im-create-spacing
int
0
0-10
Set a the space inbetween each image in pixels.
data-im-create-width
int
300
100-1900
Set a fixed width for the image you create.
data-im-create-height
int
300
100-900
Set a fixed height for the image you create.
data-im-create-bg-color
hex
#ffffff
hexadecimal, transparent
Set the color inbetween the images - match your page background color or set to transparent for no background color.
data-im-create-shape
string
square
square, circle
Use to set the shape of the images - squares or circles.