5 Creative Uses for Mockly's Image Generation API

Mockly.me's image generation API is often used for simple placeholders, but it's capable of so much more. In this guide, I'll show you five creative ways to leverage image generation APIs that go beyond basic placeholders and unlock new possibilities for your projects.

1. Dynamic User Avatars and Profile Pictures

Instead of using generic placeholder avatars, create dynamic, personalized avatars using mockly.me's avatar endpoint. Each avatar is unique and can be seeded for consistency.

Basic Avatar Usage

<!-- Generate avatar from name -->
<img src="https://mockly.me/avatar?name=John+Doe" alt="John Doe">

<!-- Generate consistent avatar with seed -->
<img src="https://mockly.me/avatar?seed=12345" alt="User avatar">

<!-- Generate avatar with specific size -->
<img src="https://mockly.me/avatar?name=Jane+Smith&size=200" alt="Jane Smith">

Creating a User Directory

async function createUserDirectory() {
  // Fetch multiple users
  const users = await Promise.all([
    fetch('https://mockly.me/user').then(r => r.json()),
    fetch('https://mockly.me/user').then(r => r.json()),
    fetch('https://mockly.me/user').then(r => r.json())
  ]);
  
  // Each user already has an avatar URL
  const directory = users.map(user => ({
    name: user.name,
    email: user.email,
    avatar: user.avatar, // Already includes mockly.me avatar URL
    role: user.job_title
  }));
  
  return directory;
}

function renderUserDirectory(users) {
  const container = document.getElementById('user-directory');
  container.innerHTML = users.map(user => `
    <div class="user-card">
      <img src="${user.avatar}" alt="${user.name}" class="avatar">
      <h3>${user.name}</h3>
      <p>${user.email}</p>
      <p class="role">${user.role}</p>
    </div>
  `).join('');
}

2. QR Code Generation for Contact Sharing

Generate QR codes on the fly for vCards, WiFi credentials, URLs, and more. Perfect for contact sharing, event check-ins, and digital business cards.

Creating Contact QR Codes

function generateContactQR(user) {
  // Create vCard format
  const vCard = `BEGIN:VCARD
VERSION:3.0
FN:${user.name}
ORG:${user.company}
TITLE:${user.job_title}
TEL:${user.phone}
EMAIL:${user.email}
URL:${user.website || ''}
ADR:;;${user.address.street};${user.address.city};${user.address.state};${user.address.zip_code};${user.address.country}
END:VCARD`;
  
  // Generate QR code
  const qrUrl = `https://mockly.me/qr?text=${encodeURIComponent(vCard)}`;
  return qrUrl;
}

// Usage
async function createDigitalBusinessCard() {
  const user = await fetch('https://mockly.me/user').then(r => r.json());
  const qrCodeUrl = generateContactQR(user);
  
  return {
    user,
    qrCode: qrCodeUrl
  };
}

WiFi QR Code Generator

function generateWiFiQR(ssid, password, security = 'WPA') {
  // WiFi QR code format: WIFI:T:WPA;S:NetworkName;P:Password;;
  const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`;
  return `https://mockly.me/qr?text=${encodeURIComponent(wifiString)}`;
}

// Example
const wifiQR = generateWiFiQR('MyNetwork', 'MyPassword123', 'WPA2');
console.log('WiFi QR Code:', wifiQR);

3. Dynamic Product Image Galleries

Create product image galleries with consistent styling using seed-based image generation. Perfect for e-commerce demos and catalog displays.

function createProductImageGallery(productId, imageCount = 5) {
  const images = [];
  
  for (let i = 0; i < imageCount; i++) {
    // Use product ID as seed for consistency
    const imageUrl = `https://mockly.me/image?seed=${productId}-${i}`;
    images.push({
      url: imageUrl,
      alt: `Product ${productId} - View ${i + 1}`,
      thumbnail: `${imageUrl}&size=150`
    });
  }
  
  return images;
}

function renderProductGallery(images) {
  const gallery = document.getElementById('product-gallery');
  const mainImage = document.getElementById('main-product-image');
  
  // Set main image
  mainImage.src = images[0].url;
  mainImage.alt = images[0].alt;
  
  // Render thumbnails
  gallery.innerHTML = images.map((img, index) => `
    <img 
      src="${img.thumbnail}" 
      alt="${img.alt}"
      onclick="changeMainImage('${img.url}', '${img.alt}')"
      class="thumbnail ${index === 0 ? 'active' : ''}"
    >
  `).join('');
}

function changeMainImage(url, alt) {
  document.getElementById('main-product-image').src = url;
  document.getElementById('main-product-image').alt = alt;
}

4. Social Media Preview Cards

Generate dynamic Open Graph images and social media preview cards for blog posts, articles, and shared content.

function generateSocialPreview(title, description, author) {
  // Create a preview card with image
  const previewData = {
    title: title,
    description: description,
    author: author,
    image: `https://mockly.me/image?text=${encodeURIComponent(title)}`,
    url: window.location.href
  };
  
  // Update meta tags
  document.querySelector('meta[property="og:image"]').content = previewData.image;
  document.querySelector('meta[property="og:title"]').content = title;
  document.querySelector('meta[property="og:description"]').content = description;
  
  return previewData;
}

// Usage
generateSocialPreview(
  'My Amazing Blog Post',
  'Learn about amazing things',
  'John Doe'
);

5. Loading State Placeholders and Skeletons

Create elegant loading states using generated images that match your content structure. Better than blank spaces or generic spinners.

Image Placeholder with Dimensions

<!-- Specific dimensions -->
<img src="https://mockly.me/image/placeholder/800/600" alt="Loading...">

<!-- Square placeholder -->
<img src="https://mockly.me/image/placeholder/400/400" alt="Loading...">

<!-- Wide banner -->
<img src="https://mockly.me/image/placeholder/1200/300" alt="Loading...">

Progressive Image Loading

class ProgressiveImageLoader {
  constructor(imageUrl, placeholderSize = 50) {
    this.imageUrl = imageUrl;
    this.placeholderSize = placeholderSize;
  }
  
  async load() {
    // Show low-res placeholder first
    const placeholder = `https://mockly.me/image/placeholder/${this.placeholderSize}/${this.placeholderSize}`;
    this.showPlaceholder(placeholder);
    
    // Load full image
    const img = new Image();
    img.onload = () => this.showFullImage(img.src);
    img.src = this.imageUrl;
  }
  
  showPlaceholder(url) {
    const container = document.getElementById('image-container');
    container.innerHTML = `<img src="${url}" class="blur-load" alt="Loading...">`;
  }
  
  showFullImage(url) {
    const container = document.getElementById('image-container');
    const img = container.querySelector('img');
    img.src = url;
    img.classList.remove('blur-load');
    img.classList.add('loaded');
  }
}

// Usage
const loader = new ProgressiveImageLoader('https://example.com/large-image.jpg');
loader.load();

Content-Aware Placeholders

function createContentAwarePlaceholder(contentType, dimensions) {
  const [width, height] = dimensions;
  
  // Different placeholder styles based on content type
  const placeholders = {
    product: `https://mockly.me/image/placeholder/${width}/${height}?text=Product`,
    avatar: `https://mockly.me/avatar?size=${Math.min(width, height)}`,
    banner: `https://mockly.me/image/placeholder/${width}/${height}?text=Banner`,
    thumbnail: `https://mockly.me/image/placeholder/${width}/${height}`
  };
  
  return placeholders[contentType] || placeholders.thumbnail;
}

// Usage
const productPlaceholder = createContentAwarePlaceholder('product', [400, 400]);
const avatarPlaceholder = createContentAwarePlaceholder('avatar', [100, 100]);

Bonus: Image Carousel with Generated Content

Create dynamic image carousels for testimonials, team members, or featured content:

class ImageCarousel {
  constructor(containerId, imageCount = 5) {
    this.container = document.getElementById(containerId);
    this.images = [];
    this.currentIndex = 0;
    this.generateImages(imageCount);
  }
  
  generateImages(count) {
    for (let i = 0; i < count; i++) {
      this.images.push({
        url: `https://mockly.me/image?seed=${i}`,
        alt: `Image ${i + 1}`
      });
    }
  }
  
  render() {
    this.container.innerHTML = `
      <div class="carousel-wrapper">
        <img src="${this.images[this.currentIndex].url}" 
             alt="${this.images[this.currentIndex].alt}" 
             class="carousel-image">
        <button class="carousel-prev" onclick="carousel.prev()">‹</button>
        <button class="carousel-next" onclick="carousel.next()">›</button>
      </div>
      <div class="carousel-indicators">
        ${this.images.map((_, i) => `
          <span class="indicator ${i === this.currentIndex ? 'active' : ''}" 
                 onclick="carousel.goTo(${i})"></span>
        `).join('')}
      </div>
    `;
  }
  
  next() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.render();
  }
  
  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    this.render();
  }
  
  goTo(index) {
    this.currentIndex = index;
    this.render();
  }
}

// Initialize carousel
const carousel = new ImageCarousel('carousel-container', 5);
carousel.render();

Conclusion

Mockly.me's image generation API is a powerful tool that goes far beyond simple placeholders. From dynamic avatars to QR codes, product galleries to social previews, there are countless creative ways to leverage image generation in your projects.

Key takeaways:

• Use avatars for personalized user experiences
• Generate QR codes for contact sharing and WiFi credentials
• Create product galleries with seed-based consistency
• Build social media preview cards dynamically
• Implement elegant loading states with placeholders

Start experimenting with these creative uses today and discover new possibilities for your projects!