[WIP] pat-gallery: Add feature to auto-wrap <img> tags within pat-gallery.

[thet]

From the docs:

Sometimes it's not possible to modify content with images to fullfill pat-gallery's markup requirements.
In this case you can auto-add these images and also change the src value via search/replace.

    <nav class="pat-gallery" data-pat-gallery="item-selector: a.add-to-gallery; autoadd-enabled: true; autoadd-src-replace-from: thumb-; autoadd-src-replace-to: full-;">
      <a href="full-1.jpg" class="add-to-gallery"><img src="thumb-1.jpg"/></a>
      <img src="thumb-2.jpg"/>
      <img src="thumb-3.jpg"/>
    </nav>

This will result in:

    <nav class="pat-gallery" data-pat-gallery="item-selector: a.add-to-gallery; autoadd-enabled: true; autoadd-src-replace-from: thumb-; autoadd-src-replace-to: full-;">
      <a href="full-1.jpg" class="add-to-gallery"><img src="thumb-1.jpg"/></a>
      <a href="full-2.jpg" class="autoadd-gallery-selector"><img src="thumb-2.jpg"/></a>
      <a href="full-3.jpg" class="autoadd-gallery-selector"><img src="thumb-3.jpg"/></a>
    </nav>

Please note the usage of the special class autoadd-gallery-selector to mark images to be added to the gallery. This is because we cannot determine the class from the pat-gallery configuration (the selector can also include id and element selectors).

[cornae]

Hi @thet Can you demo this in the design call tomorrow so that I understand it? I don't fully understand it, but I already see things that we don't/shouldn't do with Patterns. Including the use of booleans in properties. Please try to start the plans for changes to a pattern always in the Design call and using a design process.

NB At this moment fixes to pat-calendar are for more important.

[thet]

Hi, this refers to https://github.com/quaive/ploneintranet.prototype/issues/993

There is already a boolean option in pat-gallery: loop.

The reason for this feature is, that we want pat-gallery be active also for images added via the "redactor" html editor where we cannot easily change the markup produced by it.

This is a quote from the development ticket:

In a discussion between Ale, Thet and Alex, we found that we would like to enhance pat-gallery so that it can scan for all images in its content and enhance them to become the gallery. That way we don't have to rewrite the markup produced by redactor. 

I can show you tomorrow the effects of this.

[thet]

By the way, the pat-calendar issues are right next on my todo list.

[thet]

Reopening with "hold-merge" label to not loose track of this feature.
We're going to implement it by altering the HTML output server-side ("plone.transformchain"), but maybe we want this thing baked ready later. At least it also gives an idea on what to do with the plone.transformchain method.

[cornae]

If it turns out that server side will take more hours than anticipated, we should revert to this plan, but then we need to give more thought to the syntax of the properties, guessing of filenames for thumbs and all other aspects of this change, with all the disciplines around the table.

[pilz]

Stating here because it was not stated above:
The goal of this task is to allow news items to have a gallery on the hero image of a news item in case there are more images in the news item content.

Design Ticket: https://github.com/quaive/ploneintranet.prototype/issues/993

New information:
In development we found that rewriting the content in the backend can be tricky. What if the user has already placed a link around the image to some external website (Possible in Redactor)?
Also, rewriting in the backend would change the behaviour without informing he user. All his Links would suddenly have a link on them which would open the image in gallery, which might - or might not - be desired.

Out of that discovery, the idea was born: What if we extend pat-gallery in a way so that it can read all images within its context and build a gallery based on these images? Of course that would require that all images are embedded using a high resolution (2000px) in the first place, which is perfectly fine. That way, we don't need a second target for a high res image source. Also the syntax for the pattern could be simple. The image-wrapper would be set to nothing and then the pattern would pick up the src attributes of the images instead.

Implementation wise this could be quite easy to do in pat-gallery, while we still would have to resolve the above conflict mentioned for the backend rewrite.

Does that approach have drawbacks?

[cornae]

@pilz Can we discuss this using a ticket but not in a ticket during the design call?

[pilz]

Monday, at 15:00 :)

[cornae]

You had till (Spanish) dinner time, right? ;)

…

Op 21 aug. 2020, om 15:53 heeft Alexander Pilz ***@***.***> het volgende geschreven: Monday, at 15:00 :) — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#743 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFUKKN4IKE5RZLTWQ4EKNLSBZ37HANCNFSM4P6R35WQ>.

[thet]

Closing in favor of: #750