PHPackages                             isapp/tinyeditor-picture-tag - 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. [Framework](/categories/framework)
4. /
5. isapp/tinyeditor-picture-tag

ActiveLibrary[Framework](/categories/framework)

isapp/tinyeditor-picture-tag
============================

Easily convert <img> to responsive <picture> tags for TinyMCE with Laravel helper!

0.1.1(1y ago)03731MITPHP

Since Jan 5Pushed 1y agoCompare

[ Source](https://github.com/isap-ou/tinyeditor-picture-tag)[ Packagist](https://packagist.org/packages/isapp/tinyeditor-picture-tag)[ RSS](/packages/isapp-tinyeditor-picture-tag/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (3)Versions (3)Used By (0)

TinyMCE Picture Tag Helper for Laravel
======================================

[](#tinymce-picture-tag-helper-for-laravel)

[![TinyMCE Picture Tag Helper for Laravel](https://github.com/isap-ou/tinyeditor-picture-tag/raw/main/images/banner.jpg?raw=true)](https://github.com/isap-ou/tinyeditor-picture-tag)[![Latest Version on Packagist](https://camo.githubusercontent.com/c3169a4420970a973eb0626587ce56cf1a53382fd75ecacc4896b247583f3829/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f69736170702f74696e79656469746f722d706963747572652d7461672e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/isapp/tinyeditor-picture-tag)[![Total Downloads](https://camo.githubusercontent.com/ca94b121570829b722881532eb53cc0760b5841286b1000e3a5b99c5fdbef98a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f69736170702f74696e79656469746f722d706963747572652d7461672e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/isapp/tinyeditor-picture-tag)

This helper is designed for Laravel projects and works through model observers triggered after a model is created or updated. It transforms the default `` tags inserted by TinyMCE into `` tags, enabling responsive images based on your predefined configuration.

> **⚠️ Important:**
> This helper works exclusively with [Spatie Media Library](https://spatie.be/docs/laravel-medialibrary). Make sure the library is installed and properly configured in your project before using this helper.

How It Works
------------

[](#how-it-works)

The helper listens for model creation or updates and processes any TinyMCE content by converting `` tags into `` tags. This transformation ensures that your images are responsive and optimized for various devices and browsers.

Example: Transformation
-----------------------

[](#example-transformation)

Below is an example of how the helper transforms content.

### Before Transformation

[](#before-transformation)

When an image is inserted into TinyMCE, it looks like this:

```

```

### After Transformation

[](#after-transformation)

After the helper processes the content, the result is:

```

```

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

[](#installation)

You can install the package via composer:

```
composer require isapp/tinyeditor-picture-tag
```

### Preparing your model

[](#preparing-your-model)

```
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Isapp\TinyeditorPictureTag\Concerns\InteractsWithTinyeditor;
use Isapp\TinyeditorPictureTag\Contracts\HasTinyeditorPictureTag;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class YourModel extends Model implements HasMedia, HasTinyeditorPictureTag
{
    use InteractsWithMedia;
    use InteractsWithTinyeditor
```

### Configuration: Setting Up TinyEditor Fields

[](#configuration-setting-up-tinyeditor-fields)

To configure how TinyEditor content is processed and make images responsive, set up the following method in your model:

```
public function registerTinyeditorFields(): void
{
    $this->registerTinyeditorField('', '')
        ->registerSource(
            $this->registerTinyeditorPictureSource('')
                ->setWidth(1200)
                ->setFormat('webp')
                ->setBreakpointMinWidth(576)
        )
        ->registerSource(
            $this->registerTinyeditorPictureSource('')
                ->setWidth(1200)
                ->setBreakpointMinWidth(576)
        )
        ->registerSource(
            $this->registerTinyeditorPictureSource('')
                ->setWidth(410)
                ->setFormat('webp')
        )
        ->registerSource(
            $this->registerTinyeditorPictureSource('')
                ->setWidth(410)
        );
}
```

This method configures the content field to generate responsive `` tags with multiple image sources based on the specified breakpoints, widths, and formats.

Documentation
-------------

[](#documentation)

The full documentation for this package is still in progress and will be added soon. Stay tuned for updates!

Contribution
------------

[](#contribution)

This package was originally created to work seamlessly with [Filament](https://filamentphp.com/) and the [Filament Forms TinyEditor](https://github.com/mohamedsabil83/filament-forms-tinyeditor/).

Contributions are welcome! If you have suggestions for improvements, new features, or find any issues, feel free to submit a pull request or open an issue in this repository.

Thank you for helping make this package better for the community!

License
-------

[](#license)

This project is open-sourced software licensed under the [MIT License](https://opensource.org/licenses/MIT).

You are free to use, modify, and distribute it in your projects, as long as you comply with the terms of the license.

---

Maintained by [ISAPP](https://isapp.be) and [ISAP OÜ](https://isap.me).
Check out our software development services at [isap.me](https://isap.me).

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance41

Moderate activity, may be stable

Popularity15

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 68.8% 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 ~0 days

Total

2

Last Release

492d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9bfb1eae1e3e43813da6740e5eaa39307a95db7561c2d27e7e8aa24233cdcbeb?d=identicon)[andrii-trush](/maintainers/andrii-trush)

---

Top Contributors

[![andrii-trush](https://avatars.githubusercontent.com/u/14265776?v=4)](https://github.com/andrii-trush "andrii-trush (11 commits)")[![art-usenko](https://avatars.githubusercontent.com/u/75730386?v=4)](https://github.com/art-usenko "art-usenko (4 commits)")[![testperson1993](https://avatars.githubusercontent.com/u/69803132?v=4)](https://github.com/testperson1993 "testperson1993 (1 commits)")

---

Tags

filamentphplaravellaravel-packagephptinytinymcephpframeworklaravellaravel-packagetinymcefilamentfilamentphp

### Embed Badge

![Health badge](/badges/isapp-tinyeditor-picture-tag/health.svg)

```
[![Health](https://phpackages.com/badges/isapp-tinyeditor-picture-tag/health.svg)](https://phpackages.com/packages/isapp-tinyeditor-picture-tag)
```

###  Alternatives

[codewithdennis/larament

Larament is a time-saving starter kit to quickly launch Laravel 13.x projects. It includes FilamentPHP 5.x pre-installed and configured, along with additional tools and features to streamline your development workflow.

3691.5k](/packages/codewithdennis-larament)[relaticle/custom-fields

User Defined Custom Fields for Laravel Filament

15828.6k](/packages/relaticle-custom-fields)[raugadh/fila-starter

Laravel Filament Starter.

614.9k](/packages/raugadh-fila-starter)[tomatophp/filament-cms

Full CMS System with support of importing integrations and multi meta functions

11410.4k4](/packages/tomatophp-filament-cms)[ercogx/laravel-filament-starter-kit

This is a Filament v3 Starter Kit for Laravel 12, designed to accelerate the development of Filament-powered applications.

401.5k](/packages/ercogx-laravel-filament-starter-kit)[awcodes/filament-addons

A set of components / fields to extend Filament Admin.

3013.1k2](/packages/awcodes-filament-addons)

PHPackages © 2026

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