Behavior for Folder and Collection to manipulate various appearance settings using Bootstrap (column layout) and patternslib (masonry, inject)
Project description
collective.gridlisting
Adds a Behavior to manipulate various listing appearance settings using Bootstrap 5 (column layout) and patternslib (masonry).
This behavior is automatically enabled for “Folder” and “Collection” when you install it.
Features
Adds new view template “Grid listing” for “Folder” and “Collection”
You get a new “Grid listing” tab when editing a Folder or a Collection where you can set various options for the listing template.
Get started
Install collective.gridlisting in the Add-ons controlpanel
Go to a folder and select Grid listing from the Display menu
Edit the folder and go to the Grid listing tab
You can enter CSS classes for the grid items and/or enable Masonry layout.
Grid setup
The grid structure is set up as follows:
Container row
|
You can define css classes for each of those containers.
For example if you simply want a responsive 4/2/1 column layout you can set the Container row CSS class to:
row-cols-1 row-cols-lg-2 row-cols-xl-4
You can also define borders, margins and paddings for the column content with Column content CSS Class:
border border-primary m-2 p-2
And you can further experiment with gutters or backgrounds.
Inside the column, the text and image information can be defined separately. You can for example simply switch the order of text/image with:
Column content text: col order-2
Column content image: col order-1
or put the image above the text with:
Column content text: col-12 order-2
Column content image: col-12 order-1
For more information on the CSS definitions see the Bootstrap documentation:
Special Example: Card listing
The following values gives you a listing with cards, cell height 100% and image at the top:
Container row: row-cols-3 (3 columns)
Column: pb-3 (spacing below card)
Column content: card h-100 (card outline, 100% cell height)
Column content text: order-2 card-body (text below image)
Column content image: order-1 card-img-top (image above text)
et voila!
NOTE: If you enable Masonry layout you have to remove h-100 from Column content and you have a masonry card listing like shown here: https://getbootstrap.com/docs/5.3/examples/masonry/
Translations
This product has been translated into
English
German
Installation
Install collective.gridlisting by adding it to your buildout:
[buildout] ... eggs = collective.gridlisting
and then running bin/buildout
Compatibility
Plone 6, Python 3.8 - 3.11
Contribute
Issue Tracker: https://github.com/collective/collective.gridlisting/issues
Source Code: https://github.com/collective/collective.gridlisting
Documentation: https://github.com/collective/collective.gridlisting/docs
License
The project is licensed under the GPLv2.
Contributors
Peter Mathis, peter.mathis@kombinat.at
Changelog
1.2.1 (2024-10-25)
Dependency updates. [petschki]
1.2.0 (2024-07-02)
Enable cropping for preview images. [petschki]
1.1.3 (2024-07-02)
Fix value for preview_scale. [petschki]
1.1.2 (2024-07-02)
Fix default values for show_more_link and more_link_text [petschki]
1.1.1 (2024-06-06)
Fix missing_value for Choice Fields. [petschki]
1.1.0 (2024-06-04)
Add controlpanel to define site-wide defaults. [petschki]
1.0.0 (2023-06-28)
Initial release. See README.rst [petschki]
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for collective_gridlisting-1.2.1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 7e300ed657137058da868bf930f5591319600156de66af25dde71df750a761de |
|
MD5 | 161c267434f8f96496ed2ed0e3833ca9 |
|
BLAKE2b-256 | ae260d51399315f3d79712bcab250240c1b966e2727395649967a8f49a027231 |
Hashes for collective.gridlisting-1.2.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 7584411430c54b13561e1b3b1892c1aa174ea23dfcdb1a64abe063fa5b7fc339 |
|
MD5 | 50b7f3f53b7d35cd78f3ca58ee34ef64 |
|
BLAKE2b-256 | 51b1456b0543782a8c5473545d6a6b9c9884994d77fbe50bde912e54f5cb7e16 |