Can we Use custom layout instead of just images ?

[NoumanMukhtar]

This library is really awesome and helpful.
But I want to use customized layout where i could add captions, context menus and much more like that. Is there any way i could use it for that purpose?

Any suggestions would be really appreciated.
Thanks 😊

[schlosser]

If you want to add more HTML, I recommend modifying getElement here: https://github.com/schlosser/pig.js/blob/master/src/pig.js#L851-L866

However, the layout logic only allows for a visual gap and the images, so any text / buttons would need to be on top of them. Updating to also account for images next to text would be out of scope for this library.

[BePo65]

As it seems this requirement is quite common (ok, I admit that I have it too). So I fiddled around to find the best solution or at least several solutions to choose from. In any case I tried to avoid replacing the images with complete new elements (e.g. a div for the caption pus 1 image plus another div as footer...), but work with "overlays", title elements etc.
These variants came to my mind:

Variant 1: use hooks to customize the properties of the 'ProgressiveImage' and modify the generated images or add new elements when creating the content of the <figure> tag. An example can be found on Stackblitz.
Advantages

• now we have defined extension points

Disadvantages

• usually we need additional data to show in the customized tags. In that case we have to use 2 hooks and therefore have 2 places that "describe" the modification
• the customization code gets quite complicated.

Variant 2: enable using a custom 'ProgressiveImage' class via the config file (see pr #18
Advantages

• all modifications in one place

Disadvantages

• the custom class must copy all the code pieces that we want or have to keep

Variant 3: As I like this idea, why not go one step further and update pig to ECMAscript classes? Any modern browser supports this (and for the rest we can use a bundler). I have made a demo for this on Stackblitz too (and have prepared an updated gulpfile with esbuild as a bundler to generate the umd file from the esm sources).
To enable the customization of the 'ProgressiveImage' class, I added a factory function to create new 'ProgressiveImage' instances as a new config parameter.
A demo with customization looks like this on Stackblitz.
And with the umd file bundled with the help of the modified gulpfile we get something like this.

Advantages

• all modifications in one place
• one can use a derived class for 'ProgressiveImage' to avoid duplicating code
• we can have esm and umd files from one source (with the help of e.g. esbuild)
• if someone doesn't want to extend 'ProgressiveImage', his code or html page can stay as is (perhaps update the src of the <script> tag, but that depends on where we put the pig files to - in my projects I prefer a dist directory)

Disadvantages

• probably I have to think a littler bit longer ;-)

I would appreciate, if one of the variants would find it s way into this valuable package and if it helps, I can prepare a pr for Variant 1 and 3.