j1-template 2023.1.0 → 2023.2.0

data/lib/starter_web/pages/public/previewer/preview_masonry.adoc

@@ -1,361 +0,0 @@
----
-title:                                  J1 Masonry
-tagline:                                Preview
-date:                                   2020-11-03 00:00:00
-description: >
-                                        J1 Template implements the Masonry module based on the Javascript
-                                        library Masonry, a popular grid layout library by David DeSandro.
-                                        The masonry or the Pinterest-style layout is a popular choice for
-                                        aesthetically pleasing images of varying sizes.
-
-categories:                             [ Previewer ]
-tags:                                   [ Masonry, Example ]
-
-comments:                               false
-fab_menu_id:                            open_toc
-scrollbar:                              false
-regenerate:                             false
-permalink:                              /pages/public/previewer/masonry/
-
-resources:                              [
-                                          clipboard, justifiedGallery, lightbox,
-                                          lightGallery, masonry, rouge, slick
-                                        ]
-resource_options:
-  - attic:
-      padding_top:                      600
-      slides:
-        - url:                          /assets/images/modules/attics/1920x1280/hayden-mills-2.jpg
-          alt:                          Photo by Hayden Mills on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Hayden Mills
-            href:                       https://unsplash.com/@haydmills
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:url-roundtrip--present-videos:         /pages/public/learn/roundtrip/present_videos/
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-[role="dropcap"]
-The recnical term *Masonry* is used in web development to refer to a *grid
-layout* system for arranging elements on a webpage. The masonry layout, also
-known as the **Pinterest**-style layout, is a popular choice for displaying
-images of varying sizes aesthetically pleasingly.
-
-J1 Masonry is based on the popular JavaScript library _Masonry_, which enables
-the creation of responsive, dynamic grid layouts of *large* groups of content.
-It uses a unique algorithm to arrange elements vertically, then horizontally
-in the grid. The result is a visually appealing layout that works well with
-images and other content of varying sizes.
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-== Responsive Slider
-
-A J1 Slider may be an alternative for a masonry-styled grid to display groups
-of posts, articles, or images in quite a *compact* way. The negative aspect of
-using sliders on *larger* groups of elements is the limited number of elements
-displayed on a slideshow. Sliders are typically used for so-called featured
-content to show *specific* elements the website visitors should find on a
-most top position of your homepage as an eye-catcher.
-
-.Post Silder
-slick::post_slider[role="mb-4"]
-
-
-== Masonry Grid on Posts
-
-J1 Masonry is easy to use and can be added to a webpage with just a few
-lines. The module provides a flexible configuration that allows developers
-to customize the layout, adjust the column width and gutter size, and add
-animations and other effects.
-
-[role="mb-4"]
-J1 Masonry posts grid pull content from a specific category. All Grids for posts
-display the post category, the post title, the author and date. All Masonry
-Grids for the J1 Theme can be easily customized in various ways, such as
-changing the number of posts displayed, the masonry speed, and other options.
-
-.Asciidoc configuration
-[source, config, role="noclip mb-3"]
-----
-masonry::post_series_example[role="mb-4"]
-----
-
-.Masonry Post Grid
-masonry::post_series_example[role="mb-4"]
-
-.Configuration settings (YAML)
-[source, yaml, role="noclip mb-4"]
-----
-# --------------------------------------------------------------------------
-# Post Series
-#
-- grid:
-  enabled:                          true
-
-  id:                               post_series_example
-  type:                             post
-  group:                            Life
-  bs_gutter:                        1
-
-  # ------------------------------------------------------------------------
-  # Lightbox options
-  #
-  lightbox:
-    enabled:                        false
-
-  # ------------------------------------------------------------------------
-  # Masonry options
-  #
-  options:
-    originTop:                      true
-    originLeft:                     true
-    initLayout:                     true
-    percentPosition:                true
-----
-
-
-NOTE: The J1 Masonry module supports a series of posts out of the box. If the
-grid type of `post-series` is given, all posts of a group (series) are
-generated automatically as Bootstrap Cards of type *post*.
-
-[role="mb-4"]
-The Masonry Javascript module has become a go-to library for web developers
-who need to create dynamic grid layouts, especially for websites that showcase
-many images or other visual content like post series for example.
-
-
-== Masonry Grid on Images
-
-J1 Masonry is a great tool to create dynamic image galleries. Image galleries
-are popular on many websites, and masonry can be a useful tool for creating
-dynamic and visually appealing galleries. By using masonry, you can create a
-gallery that displays images of different sizes in an aesthetically pleasing
-and functional way.
-
-=== Bootstrap Image Cards
-
-Bootstrap cards are a popular component of the Bootstrap front-end framework
-that provides a flexible and customizable way to display content on a website.
-A card is a container for content that can be styled and arranged in various
-ways to suit the website's needs.
-
-.Asciidoc configuration
-[source, config, role="noclip mb-3"]
-----
-masonry::bs_image_cards_example[role="mb-4"]
-----
-
-.BS Image Cards + Lightbox
-masonry::bs_image_cards_example[role="mb-4"]
-
-.Configuration settings (YAML)
-[source, yaml, role="noclip mb-4"]
-----
-# --------------------------------------------------------------------------
-# Bootstrap Card Images
-#
-- grid:
-  enabled:                          true
-
-  id:                               bs_image_cards_example
-  type:                             bs_image_cards
-  image_base_path:                  /assets/images/modules/gallery/mega_cities
-  image_styles:                     img-fluid img-object--cover g-height-300
-  bs_gutter:                        1                                       # [0 .. 5]
-
-  # ------------------------------------------------------------------------
-  # Lightbox options
-  #
-  lightbox:
-    enabled:                        true
-
-  # ------------------------------------------------------------------------
-  # Masonry options
-  #
-  options:
-    originTop:                      true
-    originLeft:                     true
-    initLayout:                     true
-    percentPosition:                true
-
-  # ------------------------------------------------------------------------
-  # Images
-  #
-  images:
-
-    - image:                        # image 1
-      title:                        Man posing at the rooftop of Jin Mao Tower Shanghai - China
-      file:                         denys-nevozhai-1_b.jpg
-
-      ...
-----
-
-=== Grid on Images in different sizes
-
-Using an image gallery to display images of different sizes can be challenging,
-resulting in an uneven or unbalanced layout. However, this is where masonry
-can be particularly useful.
-
-==== Base Image Grid
-
-Masonry uses a dynamic grid system to position images to create a visually
-appealing and balanced layout. A dynamic grid system means you can display
-images of different sizes without worrying about them looking out of place
-or disrupting the overall flow of the gallery.
-
-.Asciidoc configuration
-[source, config, role="noclip mb-3"]
-----
-masonry::image_grid_base_example[role="mb-4"]
-----
-
-.Image Grid + No Gutters
-masonry::image_grid_base_example[role="mb-4"]
-
-.Configuration settings (YAML)
-[source, yaml, role="noclip mb-4"]
-----
-# --------------------------------------------------------------------------
-# Base Image Grid
-#
-- grid:
-  enabled:                          true
-
-  id:                               image_grid_base_example
-  type:                             image_grid
-  image_base_path:                  /assets/images/modules/gallery/mega_cities
-  image_styles:                     img-fluid
-  bs_gutter:                        0
-
-  # ------------------------------------------------------------------------
-  # Lightbox options
-  #
-  lightbox:
-    enabled:                        false
-
-  # ------------------------------------------------------------------------
-  # Masonry options
-  #
-  options:
-    originTop:                      true
-    originLeft:                     true
-    initLayout:                     true
-    percentPosition:                true
-
-  # ------------------------------------------------------------------------
-  # Images
-  #
-  images:
-
-    - image:                        # image 1
-      title:                        Man posing at the rooftop of Jin Mao Tower Shanghai - China
-      file:                         denys-nevozhai-1_b.jpg
-
-      ...
-----
-
-==== Image Grid + Lightbox
-
-A Lightbox is, in general, a helper which displays enlarged, almost
-screen-filling versions of images (or videos) while dimming the remainder
-of the page. The technique, introduced by Lightbox2, gained widespread
-popularity thanks to its simple style. The term *lightbox* has been employed
-since then for Javascript libraries to support such functionality.
-
-.Asciidoc configuration
-[source, config, role="noclip mb-3"]
-----
-masonry::image_grid_lightbox_example[role="mb-4"]
-----
-
-A lightbox supports image groups (image sets). Click on the images below to
-see how a Lightbox manages a group of images shown in your grid.
-
-.Image Grid + Gutters + Lightbox
-masonry::image_grid_lightbox_example[role="mb-4"]
-
-.Configuration settings (YAML)
-[source, yaml, role="noclip mb-4"]
-----
-# --------------------------------------------------------------------------
-# Image Grid + Lightbox
-#
-- grid:
-  enabled:                          true
-
-  id:                               image_grid_lightbox_example
-  type:                             image_grid
-  image_base_path:                  /assets/images/modules/gallery/mega_cities
-  image_styles:                     img-fluid
-  bs_gutter:                        1
-
-  # ------------------------------------------------------------------------
-  # Lightbox options
-  #
-  lightbox:
-    enabled:                        true
-
-  # ------------------------------------------------------------------------
-  # Masonry options
-  #
-  options:
-    originTop:                      true
-    originLeft:                     true
-    initLayout:                     true
-    percentPosition:                true
-
-  # ------------------------------------------------------------------------
-  # Images
-  #
-  images:
-
-    - image:                        # image 1
-      title:                        Man posing at the rooftop of Jin Mao Tower Shanghai - China
-      file:                         denys-nevozhai-1_b.jpg
-
-      ...
-----
-
-NOTE: The default lightbox for Masonry Grids is _Lightbox2_, the classic
-lightbox widely used on the Internet.
-
-[role="mt-5"]
-== Justified Gallery
-
-[role="mb-4"]
-As an alternative to grids on image contents arranged by Masonry, the module
-*JustifiedGallery* can be used to display photos in a masonry-styled image
-gallery. link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
-is a great _jQuery_ Plugin to create responsive, infinite, and high-quality
-justified image galleries.
-
-.Masonry Layout of JustifiedGallery
-gallery::jg_customizer[role="mb-4"]
-
-Digital image content, pictures or videos, are easy to make. Today, every
-mobile has a camera. Presenting a bunch of photos or videos is done very
-easily by using *Justified Gallery*. Videos created by a digicam or a mobile
-can be played by J1 Theme using the HTML5 Video support. Present
-videos you have made at it’s best.
-
-TIP: Find more on how to present video contens using *JustifiedGallery* on the example
-page link:{url-roundtrip--present-videos}[Present Videos, {browser-window--new}].