Instamagic Create

Create your own unique images from your Instagram on the fly. Make background images, add parallax effects, add shapes, borders, grids and more.

Basic Setup

<div class="im-create"
    data-im-create-width = "800"
    data-im-create-height = "200"
    data-im-tags = "landscape">
</div>

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
```
data-im-tags
```
property and you're all set.

Getting Creative

<div class="im-create"
    data-im-create-spacing = "5"
    data-im-create-width = "790"
    data-im-create-height = "418"
    data-im-create-bg-color = "transparent"
    data-im-create-shape = "circle"
    data-im-create-tile-size = "xs"
    data-im-create-use = "background"
    data-im-create-parallax = "true"
    data-im-tags = "cat, dog, sun">
</div>

In this example we've set the
```
data-im-create-use
```
property to background. The default is
```
image
```
. And what fun is a nifty background without out a sweet little parallax effect? Set it like this:
```
data-im-create-parallax = "true"
```
. Setting the
```
data-im-create-bg-color
```
to
```
transparent
```
will create a png with a transparent background so it blend nicely with the background colour of your site.

Add a little spacing between each image with the
```
data-im-create-spacing
```
property. Set the size of the images like this:
```
data-im-create-tile-size = "xs"
```
. Options are:
```
xs, small, medium, large, xl
```
. We set the shape of the image with
```
data-im-create-shape
```
(default is
```
square
```
).

Setting the style, background color, image size and spacing

data-im-create-style = "collage"
data-im-create-bg-color = "#7ad84c"
data-im-create-tile-size = "small"
data-im-create-border = "5"

data-im-create-bg-color = "#7ad84c"
data-im-create-spacing = "5"
data-im-create-tile-size = "medium"
data-im-create-border = "5"

In the first exmaple we change the
```
data-im-create-style
```
form the default
```
grid
```
to collage. The result is a slightly jumbled collage of your Instagram images (filtered by tags). We also set a background color with the
```
data-im-create-bg-color
```
property.

To add a border simply set the
```
data-im-create-border
```
to the desired pixel value. We also adjust the tile size too with the
```
data-im-create-tile-size
```
property.

Adding text and setting the position

data-im-create-text = "Instamagic..."
data-im-create-text-position = "middle"

data-im-create-text = "Instamagic..."
data-im-create-text-position = "top-left"

data-im-create-text = "Instamagic, ©2023"
data-im-create-text-position = "top-right"

data-im-create-text = "Instamagic, ©2023"
data-im-create-text-position = "bottom-left"

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.
data-im-create-text	string	null	none	Text to display over a created image.
data-im-create-text-position	string	null	top-left, top-right, middle, middle-left, middle-right, bottom-right, bottom-left	Set the positioning for the text on your created image.
data-im-filter	string	none		Add filter effects to spice up your images. Combine with data-im-hover for some cool hover effects.

Instamagic Create

Create your own unique images from your Instagram on the fly. Make background images, add parallax effects, add shapes, borders, grids and more.

Basic Setup

Getting Creative

Setting the style, background color, image size and spacing

Adding text and setting the position

Options:

And there's more...

Check out even more cool demos and tutorials with tons of more features