PHPackages                             giantpeach/twiglet - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. giantpeach/twiglet

ActiveLibrary[Templating & Views](/categories/templating)

giantpeach/twiglet
==================

v1.1.1(11mo ago)01553MITPHP

Since Aug 17Pushed 11mo ago1 watchersCompare

[ Source](https://github.com/Giant-Peach-Design/twiglet)[ Packagist](https://packagist.org/packages/giantpeach/twiglet)[ RSS](/packages/giantpeach-twiglet/feed)WikiDiscussions main Synced yesterday

READMEChangelog (1)Dependencies (4)Versions (12)Used By (3)

Twiglet - Twig Extensions for WordPress
=======================================

[](#twiglet---twig-extensions-for-wordpress)

A collection of Twig extensions that provide WordPress-specific functionality and image handling utilities.

Installation
------------

[](#installation)

```
composer require giantpeach/twiglet
```

Image Functions
---------------

[](#image-functions)

### `image_tag()` - Responsive Images

[](#image_tag---responsive-images)

Creates a responsive `` tag with `srcset` and `sizes` attributes, similar to Liquid's `image_tag` filter.

#### Basic Usage

[](#basic-usage)

```
{# Simple responsive image #}
{{ image_tag(image.id) }}

{# With custom sizes attribute #}
{{ image_tag(image.id, '(max-width: 768px) 100vw, 50vw') }}

{# With custom widths and attributes #}
{{ image_tag(image.id, '100vw', [400, 800, 1200], {'class': 'hero-image', 'loading': 'eager'}) }}
```

#### Parameters

[](#parameters)

- `image` (int|array) - WordPress attachment ID or image array with `id` property
- `sizes` (string) - CSS media query for responsive sizing (default: `'100vw'`)
- `widths` (array) - Array of image widths for srcset (default: `[375, 750, 1100, 1500, 2200]`)
- `attributes` (array) - Additional HTML attributes

#### Generated HTML

[](#generated-html)

```

```

### `picture_tag()` - Art Direction

[](#picture_tag---art-direction)

Creates a `` element for art direction, allowing different images for different viewports (e.g., different aspect ratios for mobile vs desktop).

#### Basic Usage

[](#basic-usage-1)

```
{# Different images for mobile (≤640px) and desktop #}
{{ picture_tag(mobile_image.id, desktop_image.id) }}

{# Custom breakpoint #}
{{ picture_tag(mobile_image.id, desktop_image.id, '768px') }}

{# Full control over widths and attributes #}
{{ picture_tag(
   mobile_image.id,
   desktop_image.id,
   '640px',
   [375, 750],                    # mobile widths
   [1100, 1500, 2200],           # desktop widths
   {'class': 'responsive-hero'}   # attributes
) }}
```

#### Parameters

[](#parameters-1)

- `mobileImage` (int|array) - WordPress attachment ID for mobile viewport
- `desktopImage` (int|array) - WordPress attachment ID for desktop viewport
- `breakpoint` (string) - Media query breakpoint (default: `'640px'`)
- `mobileWidths` (array) - Widths for mobile srcset (default: `[375, 750]`)
- `desktopWidths` (array) - Widths for desktop srcset (default: `[1100, 1500, 2200]`)
- `attributes` (array) - Additional HTML attributes for the `` tag

#### Generated HTML

[](#generated-html-1)

```

```

#### Use Cases

[](#use-cases)

Perfect for:

- **Different aspect ratios**: 16:9 hero images on desktop, 4:3 on mobile
- **Different crop focus**: Show full product on desktop, close-up on mobile
- **Art direction**: Landscape images on desktop, portrait on mobile

### `image()` - Simple Image URL

[](#image---simple-image-url)

Returns a single image URL for a specific size configuration.

```
{# Get image URL for a configured size #}

{# Using as background image #}

```

Legacy Image Filter
-------------------

[](#legacy-image-filter)

### `image` Filter

[](#image-filter)

Process images with specific dimensions and options.

```
{# Basic usage #}
{{ image_url | image(800, 600) }}

{# With WebP format #}
{{ image_url | image(800, 600, true, true) }}
```

#### Parameters

[](#parameters-2)

- `width` (int) - Image width (default: 500)
- `height` (int) - Image height (default: 500)
- `crop` (bool) - Enable cropping (default: true)
- `webp` (bool) - Output WebP format (default: false)

Complete Examples
-----------------

[](#complete-examples)

### Hero Section with Art Direction

[](#hero-section-with-art-direction)

```
{# Different hero images for mobile vs desktop #}

  {{ picture_tag(
     hero.mobile_image.id,
     hero.desktop_image.id,
     '768px',
     [375, 750],           # Mobile: 375w, 750w (for retina)
     [1200, 1600, 2400],   # Desktop: multiple sizes
     {'class': 'hero__image'}
  ) }}

    {{ hero.title }}

```

### Product Gallery

[](#product-gallery)

```
{# Responsive product images #}

  {% for product_image in product.gallery %}

      {{ image_tag(
         product_image.id,
         '(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw',
         [200, 400, 600, 800],
         {'class': 'product-gallery__image'}
      ) }}

  {% endfor %}

```

### Blog Post Featured Images

[](#blog-post-featured-images)

```
{# Card layouts with consistent sizing #}

  {{ image_tag(
     post.featured_image.id,
     '(max-width: 640px) 100vw, 350px',
     [350, 700],  # Exact sizes needed
     {'class': 'post-card__image'}
  ) }}

    {{ post.title }}
    {{ post.excerpt }}

```

Requirements
------------

[](#requirements)

- WordPress environment
- giantpeach/images package
- Twig templating engine

Features
--------

[](#features)

- **Automatic WebP generation**: Both functions generate WebP variants automatically
- **Lazy loading**: Enabled by default for performance
- **Async decoding**: Improves page load performance
- **Alt text**: Automatically pulled from WordPress attachment metadata
- **SVG support**: Handles SVG files appropriately without processing
- **Twig-safe**: Returns `Twig\Markup` objects to prevent auto-escaping

###  Health Score

33

—

LowBetter than 72% of packages

Maintenance51

Moderate activity, may be stable

Popularity11

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~78 days

Recently: every ~0 days

Total

10

Last Release

346d ago

Major Versions

v1.1.1 → 3.0.x-dev2025-07-22

### Community

Maintainers

![](https://www.gravatar.com/avatar/e66b81ebd507f82992c477ab3e567933436d0a810a0886e6005b2e8b0fdf317a?d=identicon)[Giant Peach](/maintainers/Giant%20Peach)

---

Top Contributors

[![tom-gurney](https://avatars.githubusercontent.com/u/6736496?v=4)](https://github.com/tom-gurney "tom-gurney (4 commits)")

### Embed Badge

![Health badge](/badges/giantpeach-twiglet/health.svg)

```
[![Health](https://phpackages.com/badges/giantpeach-twiglet/health.svg)](https://phpackages.com/packages/giantpeach-twiglet)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.6M3.1k](/packages/craftcms-cms)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)