Web Integration

Integrating imGenerate into your website is effortless and eliminates all image-related worries. Simply include the provided CDN script, add the imgenerate class to your tags, and customize attributes like size, text, and colors as needed. Watch your placeholders come to life instantly, making your development process smoother and tension-free!

Installation

It's more than easy to integrate imGenerate into your website. Add this CDN to your website. It's just plug and play.

<script src="https://cdn.jsdelivr.net/gh/naim886/imGenerateCDN@main/0.0.1/dist/imGenerate.min.js"></script>

And see the magic!

Documentation

Add the imgenerate class to your <img> tag where you want to implement the imGenerate placeholder image.

Example:

<img class="imgenerate"/>

Height & Width

It will take the width and height of its parent, but if you want to specify its width and height, you have 3 methods:

Specify height and width in the data attribute like data-width="150" & data-height="150"
```
<img class="imgenerate" data-height="600" data-width="150"/>
```
If data-width or data-height is not found in the <img> tag, it will find the element height & width:
```
<img class="imgenerate image-1"/>
<style>
.image-1 {
    width: 200px;
    height: 200px;
}
</style>
```
If height and width are not defined by CSS, it will take its parent's height and width.

Background

By default, you will get #1e3a8a as the background. But why stick with the default background color? Try this:

<img class="imgenerate image-1" data-bg="green"/>
<img class="imgenerate image-1" data-bg="00ff00"/>

Text

You can add text to your photo:

<img class="imgenerate image-1" data-text="www.imgenerate.com"/>
<img class="imgenerate image-1" data-text="200X200"/>

If you write data-text="size", the image size will be written on it.

Text Color

By default, the text color is #ffffff, but you can choose your own:

<img class="imgenerate image-1" data-text-color="black"/>
<img class="imgenerate image-1" data-text-color="ff0000"/>

Tech Stack

Client: JavaScript
Server: PHP, Laravel
Client Dependency: jQuery