miletorix-vitepress-image-group

Vue 3 component to render responsive image groups with automatic layout styling (big, double or icon).

Limitations

• No lazy loading customization (yet).
• Only accepts array of strings as sources.

Installation

npm

npm i @miletorix/vitepress-image-group

Usage

Configuration

docs/.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
 
import { ImageGroup } from '@miletorix/vitepress-image-group'
import '@miletorix/vitepress-image-group/style.css'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('ImageGroup', ImageGroup) 
  }
}

Image Group

<ImageGroup
  :sources="[
    'path-to-image...'
  ]"
  type="type..."
  alt="alt text..."
  caption="caption text..."
/>

IMPORTANT

Type required: 'icon' | 'big' | 'double' | 'auto' | 'manual'

NOTE

Alt and caption text is optional, default alt text is ImageGroup - type

NOTE

5 types of image grouping are supported:

• big (800px wide single image)
• double (two images side by side)
• icon (small 70×70px images in a row)
• auto (full size image)
• manual (manual width and automatic height)

Examples

Image Group - big

Input:

example.md

<ImageGroup
  :sources="[
    'demo-2.jpg'
  ]"
  type="big"
  caption='"Rolling hills", Moravia, Czech Republic.'
/>

Output:

"Rolling hills", Moravia, Czech Republic.

Image Group - double

Input:

example.md

<ImageGroup
  :sources="[
    '/img/demo-3.jpg',
    '/img/demo-4.jpg'
  ]"
  type="double"
  caption="Images from both sides."
/>

Output:

Images from both sides.

Image Group - icon

Input:

example.md

<ImageGroup
  :sources="[
    '/img/edge-logo.png',
    '/img/chrome-logo.png',
    '/img/firefox-logo.png',
    '/img/safari-logo.png'
  ]"
  type="icon"
  caption="Browser icons: MS Edge, Google Chrome, Mozilla FireFox, Apple Safari"
/>

Output:

Browser icons: MS Edge, Google Chrome, Mozzila Firefox, Apple Safari

Image Group - auto

Input:

<ImageGroup
  :sources="[
    'demo-4.jpg'
  ]"
  type="auto"
  caption="Full size image"
/>

Output:

Full size image

Image Group - manual

Input:

<ImageGroup
  :sources="[
    'demo-3.jpg'
  ]"
  type="manual"
  width="300px"
  caption="Manual image size"
/>

Output:

Manual image size