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-lightboxboolfalsetrue, falseUse 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-groupstringgallery-imgnoneSet a unique name for each lightbox group. Use with
im-lightbox
data-im-number-of-imagesint201-20Set the number of images to fit page size or for different layouts.
data-im-create-stylestringgridgrid, collageSet a grid of columns and rows or choose collage for a random scattered effect (still experimental).
data-im-create-spacingint00-10Set a the space inbetween each image in pixels.
data-im-create-widthint300100-1900Set a fixed width for the image you create.
data-im-create-heightint300100-900Set a fixed height for the image you create.
data-im-create-bg-colorhex#ffffffhexadecimal, transparentSet the color inbetween the images - match your page background color or set to transparent for no background color.
data-im-create-shapestringsquaresquare, circleUse to set the shape of the images - squares or circles.
data-im-create-textstringnullnoneText to display over a created image.
data-im-create-text-positionstringnulltop-left, top-right, middle, middle-left, middle-right, bottom-right, bottom-leftSet the positioning for the text on your created image.
data-im-filterstringnoneAdd filter effects to spice up your images. Combine with
data-im-hover
for some cool hover effects.

And there's more...

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

  • Fully Responsive
  • HTML5
  • CSS3
  • jQuery
  • Super Lightweight
  • Lightbox
  • Multiple Carousels
  • Hover Effects
  • Color Filters & effects
  • Quick & easy setup
  • Create images on the fly
  • Create personalised memes