Image galleries

[javan]

This pull request adds support for displaying groups of images in a grid, AKA image galleries. It works by automatically grouping adjacent image attachments into blocks, and styling the block's attachment elements to form a grid. The layout is 100% CSS-based so it can easily be customized or adjusted for different viewport sizes using media queries. Out of the box, Trix supports two and three column grids controlled by just a few styles in trix.css:

trix/assets/trix/stylesheets/content.scss Lines 96 to 116 in 23ea7a0 .attachment-gallery { display: flex; flex-wrap: wrap; position: relative; margin: 0; padding: 0; .attachment { flex: 1 0 33%; padding: 0 0.5em; max-width: 33%; } &.attachment-gallery--2, &.attachment-gallery--4 { .attachment { flex-basis: 50%; max-width: 50%; } } }

→ → →

Additional changes

1. Attachment toolbars now include file metadata, and their markup and has been revised to align more closely with <trix-toolbar>'s.
   

2. Text formatting can no longer be applied to attachments because, in part, the resulting HTML would break image gallery layouts. It also had weird/inconsistent results before and could easily happen accidentally (dropping images into bold text, for example).
   

3. Attachments with href attributes now render <a>s inside their <figure>s.

   <!-- BEFORE -->
   <a href="…">
     <figure>
       <img src="…">
       <figcaption>…</figcaption>
     </figure>
   </a>
   
   <!-- AFTER -->
   <figure>
     <a href="…">
       <img src="…">
       <figcaption>…</figcaption>
     </a>
   </figure>

[leandromatos]

Amazing! I look forward to the acceptance of this pull request. 👏🏻

[randohinn]

Seems like the styles are not included by default? Had to add manually to https://www.npmjs.com/package/trix

[javan]

@randohinn, see Styling Formatted Content:

We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.

[mrancys]

Will image linking functionality be restored in some future?