GithubHelp home page GithubHelp logo

leptoquark1 / sw-blurhash Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 1.0 2.55 MB

Brings Blurhash, the probably most compact and representative form of a placeholder for images in existence, to Shopware 6

License: Other

Shell 0.20% PHP 81.98% JavaScript 13.31% Twig 3.75% SCSS 0.76%
shopware shopware6-plugin blurhash

sw-blurhash's People

Contributors

leptoquark1 avatar tinect avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

tinect

sw-blurhash's Issues

List all images with missing Blurhash

It should be possible to list images which do not meet the 'exclusion' configuration settings and images with blurhash that no longer fit the 'exclusion' configuration.

  1. A Cli command with structural output
  2. Clean up with existing command and make it to be triggered from administration

thresholdThumbnail fallback

I want to make this plugin compatible with FroshPlatformThumbnailProcessor.
While this plugin doesn't have thumbnails on any space, the system for thresholdThumbnail isn't suitable.

My idea would be:

If thresholdThumbnail occurs and the thumbnail doesn't exist on disk, the thumbnail should be generated on the fly to calculate the hash of it. Tested with calculated hash for 9MB jpeg which will never show any hash for client. Hash is calculated,

What do you think about it?

Better performance on slow / weak devices

I have only put together a few ideas for mobile improvements here. Open for discussion...

Emulated integration

Processing

  • Queue order should match the actual position of the Images in DOM
  • Fixed or absolut image position should be respected - can their position in queue be corrected?

Misc

  • Individual placeholders / loading state indicators while Blurhash is processing

Encoding

Hash Media-queries

Different hash sizes by device size (media-query), user-agent and similar classifications

The effort-benefit ratio should definitely be assessed in advance

File size limitation

Default exclusion for tiny and small images

Blurhash decoding using WebAssembly

Blurhash decoding using WebAssembly

First try with Rust was significant slower than the current implementation

MediaHashId resource (Fetching / Upserting and Validation)

To increase compatibility, it shall be possible to fetch the generated Blurhashes via the store api and admin api. The model MediaHashId fulfils all requirements about the data a consumer might need.

Exhaustive requirements for the resources are as follows

  • fetch a single MediaHashId by mediaId
  • fetch a lists of MediaHashId's by it corresponding mediaId's
  • write MediaHashId for a single and multiple media entities (As seend as upsert backbone for outsourced processors)
  • validation of media entities by its mediaIds that returns a subset of valid mediaIds or it corresponding thumbnail
  • list missing images (Those which not meet the exclusion configuration)

Scoped config: Inheritance of encoding configuration (limited to those relevant for processing)

In order to be able to use the plug-in as flexibly as possible, the current restrictions due to the global scope of the entire configuration settings regarding the encoding process are definitely a barrier.

There should be a structured inheritance dependence in which a media entity is the first instance and the global configuration is the last.

Especially through active marketing using the shopping experience, a targeted and optimised use of the individually adapted behaviour of teasers for key visuals and content or product presentation matched to its context and further content flow is possible.

Currently, the following configuration values would provide a suitable framework for this:

Performance and Encoding

  • thumbnailThresholdHeight
  • thumbnailThresholdWidth
  • componentsX
  • componentsY

These values can then be defined in the following order of decreasing valence:

Media Entity -> CMS Page -> Media Folder -> Global Scope

Decoding really slow?

device (laptop):
Ryzen 9 5950hx
RTX 3060

hash WtH3Bgx]WXxZWYkCu6f*ofWBR*j?IonhogNHRjj[ivxYRkR-oJbI
1280 x 528
decode: 320 ms ๐Ÿ˜ฑ

hash WPRysgayxuj[xuoft7ayRjj[WBay~qj[M{ayofayM{fQxuayt7of
600 x 600
decode 150 ms

Is it really normal?

Exclude folders in media browser (like plugin config)

Just like validating and (re)generation of media entities (individually or by folder), it should be possible to exclude certain folders from generation. Media, however, can be excluded via tags.

The plug-in configuration can lead to confusion in the case of folders with the same name.

Remove a Blurhash from image

This feature is crucial for a fully well-rounded UX and maintainability of media that are considered for decoding from integration processes.

  • Using the media browser
    • single images
    • folders
  • Possibility to fully remove all generated Blurhashes when the plugin is uninstalled

Emulated integration should be compatible with background images

Problem

For maximum compatibility of emulated integration, at least the explicit handling of background images should be possible.

Current Behavior

Currently no background images are processed by the emulated integration.

Expected behaviour

At least via Shopping Experience / CMS Rich Editors or by certain Twig functionalities, it should be possible to add background images that will be respected in integrations.

It's open for discussion on

  • how to highlight those HTML Elements (by attributes or similar)
  • as how to add this seamlessly to the existing CMS Rich Editor functionality in Administration
  • how to adapt it to twig without leaving dependence to this plugin (Like enrich the twig core helpers)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.