<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Paweł Nosko</title>
    <description>The latest articles on DEV Community by Paweł Nosko (@pawel_nosko).</description>
    <link>https://dev.to/pawel_nosko</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3673955%2F09e941bd-6834-4797-905b-462514baf6c1.jpg</url>
      <title>DEV Community: Paweł Nosko</title>
      <link>https://dev.to/pawel_nosko</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pawel_nosko"/>
    <language>en</language>
    <item>
      <title>The Most Universal Image Gallery for PrestaShop</title>
      <dc:creator>Paweł Nosko</dc:creator>
      <pubDate>Wed, 17 Jun 2026 04:47:12 +0000</pubDate>
      <link>https://dev.to/pawel_nosko/the-most-universal-image-gallery-for-prestashop-cei</link>
      <guid>https://dev.to/pawel_nosko/the-most-universal-image-gallery-for-prestashop-cei</guid>
      <description>&lt;p&gt;PrestaShop does a great job when it comes to product images, category images, and manufacturer logos. The problem begins when you want to create your own image gallery.&lt;/p&gt;

&lt;p&gt;Customer projects? Inspiration galleries? Certificates? Production photos? Company portfolio?&lt;/p&gt;

&lt;p&gt;Surprisingly, PrestaShop still doesn't include a universal gallery system that can be used independently of products and categories.&lt;/p&gt;

&lt;p&gt;Most available gallery modules aren't much better. They are often limited to specific hooks, specific page types, or require multiple module instances for different locations.&lt;/p&gt;

&lt;p&gt;And that's where things become complicated.&lt;/p&gt;

&lt;p&gt;What if a single gallery could be displayed practically anywhere in your store?&lt;/p&gt;

&lt;p&gt;On CMS pages. Inside product descriptions. In category descriptions. On landing pages. Even inside a Custom HTML module.&lt;/p&gt;

&lt;p&gt;That's exactly the problem DC pGallery was created to solve.&lt;/p&gt;

&lt;h2&gt;
  
  
  Meet DC pGallery
&lt;/h2&gt;

&lt;p&gt;DC pGallery is a free PrestaShop module that allows you to create unlimited image galleries and display them exactly where they are needed.&lt;/p&gt;

&lt;p&gt;What makes this module different isn't the gallery itself. The real advantage is the freedom it gives you. Most gallery modules are tied to specific hooks, specific pages or require separate module instances for different locations.&lt;/p&gt;

&lt;p&gt;DC pGallery takes a different approach. You create a gallery once and then decide where you want to use it. A gallery of completed projects can appear on a CMS page, an inspiration gallery can be placed inside a category description, while a product showcase can be displayed on a landing page.&lt;/p&gt;

&lt;p&gt;You are not limited to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;specific hooks&lt;/li&gt;
&lt;li&gt;specific pages&lt;/li&gt;
&lt;li&gt;a single module instance&lt;/li&gt;
&lt;li&gt;a single gallery for the entire store&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In practice, galleries become reusable content elements that can be placed wherever they make sense from a business and marketing perspective.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Download the module
&lt;/h3&gt;

&lt;p&gt;The easiest way to get DC pGallery is from the official project page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.designcart.pl/laboratorium/332-galeria-obrazow-dla-prestashop-darmowy-modul-dc-pgallery.html" rel="noopener noreferrer"&gt;DC pGallery – Free Image Gallery Module for PrestaShop&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Simply scroll to the bottom of the page where you'll find the download button, screenshots, documentation and additional information about the module.&lt;/p&gt;

&lt;h3&gt;
  
  
  Install in PrestaShop
&lt;/h3&gt;

&lt;p&gt;Installing the module is exactly the same as installing any other PrestaShop extension.&lt;/p&gt;

&lt;p&gt;Navigate to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Modules&lt;/li&gt;
&lt;li&gt;Module Manager&lt;/li&gt;
&lt;li&gt;Upload a Module&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Select the ZIP file you downloaded earlier and wait for PrestaShop to complete the installation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Open module configuration
&lt;/h3&gt;

&lt;p&gt;After installation, find DC pGallery in the module list and open its configuration page.&lt;/p&gt;

&lt;p&gt;That's it.&lt;/p&gt;

&lt;p&gt;The module is now ready to use and you can start creating your own image galleries.&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating Your First Gallery
&lt;/h2&gt;

&lt;p&gt;One of the things I like most about DC pGallery is that galleries are managed through shortcodes. Instead of creating multiple module instances and assigning them to different hooks, you simply upload your images and decide how you want to display them.&lt;/p&gt;

&lt;p&gt;The fastest way to create a gallery is to upload images via FTP. Simply create a folder inside the directory specified in the &lt;strong&gt;Base gallery folder&lt;/strong&gt; setting and upload your images there.&lt;/p&gt;

&lt;p&gt;For example, if your base folder is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;img/mygalleries
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;you can create galleries such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;img/mygalleries/portfolio
img/mygalleries/projects
img/mygalleries/certificates
img/mygalleries/inspirations
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once the images are uploaded, you can display them anywhere using a shortcode.&lt;/p&gt;

&lt;h3&gt;
  
  
  Available gallery modes
&lt;/h3&gt;

&lt;p&gt;DC pGallery currently offers seven display modes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;normal&lt;/code&gt; – fixed ratio grid + GLightbox&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;tiles&lt;/code&gt; – Macy masonry + GLightbox&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;slideshow&lt;/code&gt; – Swiper, one slide&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;carousel&lt;/code&gt; – Swiper, multiple slides + GLightbox&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;coverflow&lt;/code&gt; – Swiper coverflow + GLightbox&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;cards&lt;/code&gt; – Swiper cards + GLightbox&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;thumbs&lt;/code&gt; – main slide + 1:1 thumbnails + GLightbox&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most gallery modes include a built-in lightbox, allowing visitors to open images in a larger view without leaving the page.&lt;/p&gt;

&lt;h3&gt;
  
  
  Global settings
&lt;/h3&gt;

&lt;p&gt;Although every gallery can be configured directly in the shortcode, it's worth understanding the most important global settings.&lt;/p&gt;

&lt;h4&gt;
  
  
  Base gallery folder
&lt;/h4&gt;

&lt;p&gt;Default value:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;img/mygalleries
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the main directory where all gallery folders are stored.&lt;/p&gt;

&lt;h4&gt;
  
  
  Default gallery mode
&lt;/h4&gt;

&lt;p&gt;Defines which gallery mode will be used when the &lt;code&gt;mode&lt;/code&gt; parameter is not specified in the shortcode.&lt;/p&gt;

&lt;p&gt;Default value:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;normal
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Columns
&lt;/h4&gt;

&lt;p&gt;Default number of columns used by the &lt;code&gt;normal&lt;/code&gt; and &lt;code&gt;tiles&lt;/code&gt; gallery modes.&lt;/p&gt;

&lt;h4&gt;
  
  
  Image ratios
&lt;/h4&gt;

&lt;p&gt;DC pGallery supports two independent ratio settings:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;ratio&lt;/code&gt; – image ratio used by the Normal gallery mode&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;slide_ratio&lt;/code&gt; – image ratio used by Swiper-based galleries&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1:1
3:4
16:9
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Carousel visible slides
&lt;/h4&gt;

&lt;p&gt;Controls how many images are visible simultaneously in Carousel mode.&lt;/p&gt;

&lt;h4&gt;
  
  
  Space
&lt;/h4&gt;

&lt;p&gt;Distance in pixels between gallery items.&lt;/p&gt;

&lt;h4&gt;
  
  
  Loop
&lt;/h4&gt;

&lt;p&gt;Enables or disables looping in Swiper galleries and the lightbox.&lt;/p&gt;

&lt;h4&gt;
  
  
  Swiper navigation styling
&lt;/h4&gt;

&lt;p&gt;You can customize:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;previous/next button colors&lt;/li&gt;
&lt;li&gt;button opacity&lt;/li&gt;
&lt;li&gt;hover opacity&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Shortcode settings always win
&lt;/h3&gt;

&lt;p&gt;This is one of the most useful features of the module.&lt;/p&gt;

&lt;p&gt;Whenever a parameter is specified in the shortcode, it overrides the corresponding global setting.&lt;/p&gt;

&lt;p&gt;This means you can have completely different gallery styles on the same page while keeping sensible defaults in the module configuration.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example shortcodes
&lt;/h3&gt;

&lt;p&gt;Classic gallery with portrait images:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="portfolio" mode="normal" columns="3" ratio="3:4"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Classic gallery with widescreen images:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="portfolio" mode="normal" columns="3" ratio="16:9"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pinterest / Masonry layout:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="portfolio" mode="tiles" columns="4"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Carousel with four visible slides:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="portfolio" mode="carousel" slides_visible="4" slide_ratio="16:9"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Where can you use a shortcode?
&lt;/h3&gt;

&lt;p&gt;Practically everywhere.&lt;/p&gt;

&lt;p&gt;You can insert galleries into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CMS pages&lt;/li&gt;
&lt;li&gt;product descriptions&lt;/li&gt;
&lt;li&gt;category descriptions&lt;/li&gt;
&lt;li&gt;Custom HTML modules&lt;/li&gt;
&lt;li&gt;landing pages&lt;/li&gt;
&lt;li&gt;blog articles&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because the module is shortcode-based, you're no longer restricted to specific hooks or predefined module positions.&lt;/p&gt;

&lt;p&gt;After changing the configuration, it's a good idea to clear the PrestaShop cache so the new settings become visible immediately.&lt;/p&gt;

&lt;p&gt;Fortunately, the configuration panel is very intuitive. After creating your first gallery, managing additional galleries becomes almost effortless.&lt;/p&gt;

&lt;h2&gt;
  
  
  Seven Gallery Modes in One Module
&lt;/h2&gt;

&lt;p&gt;This is where DC pGallery really starts to shine.&lt;/p&gt;

&lt;p&gt;The module doesn't offer just a single gallery layout. Instead, it comes with seven completely different display modes. Depending on your content, audience and design goals, the same set of images can look professional, creative, modern or highly interactive.&lt;/p&gt;

&lt;h3&gt;
  
  
  Normal – Classic Image Grid
&lt;/h3&gt;

&lt;p&gt;The Normal mode is the most universal gallery layout available in the module. Images are displayed in a clean grid with a fixed aspect ratio, creating a consistent and professional look.&lt;/p&gt;

&lt;p&gt;This mode works particularly well for project galleries, company portfolios and lifestyle product photography. If you're looking for a safe and proven layout, this is usually the best place to start.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fposcm4lgoh7adb995ca1.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fposcm4lgoh7adb995ca1.webp" alt="Normal Gallery Mode" width="800" height="526"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;project galleries&lt;/li&gt;
&lt;li&gt;company portfolios&lt;/li&gt;
&lt;li&gt;product presentations&lt;/li&gt;
&lt;li&gt;lifestyle photography&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="normal" columns="4" ratio="1:1"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Tiles – Pinterest / Masonry Layout
&lt;/h3&gt;

&lt;p&gt;Tiles is designed for more creative presentations. Unlike the Normal mode, images keep their original proportions, creating a masonry-style layout similar to Pinterest.&lt;/p&gt;

&lt;p&gt;This mode is particularly popular among photographers, artists, architects and home decor stores where visual presentation is just as important as the content itself.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnssopcavx079vasm7k0y.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnssopcavx079vasm7k0y.webp" alt="Tiles Gallery Mode" width="800" height="633"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;creative portfolios&lt;/li&gt;
&lt;li&gt;inspiration galleries&lt;/li&gt;
&lt;li&gt;architecture projects&lt;/li&gt;
&lt;li&gt;home decor stores&lt;/li&gt;
&lt;li&gt;artistic presentations&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="tiles" columns="4"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Slideshow – Focus on One Image at a Time
&lt;/h3&gt;

&lt;p&gt;Sometimes a single image deserves full attention.&lt;/p&gt;

&lt;p&gt;Slideshow displays one slide at a time and works surprisingly well as a lightweight hero banner. You can place it on the homepage using a Custom HTML module, use it as a visual separator on product pages or showcase high-quality manufacturer photography.&lt;/p&gt;

&lt;p&gt;I personally use this mode on product pages in electronics stores where large promotional images help break up long sections of content.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8n1r4hpyhe57p4w0m47x.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8n1r4hpyhe57p4w0m47x.webp" alt="Slideshow Gallery Mode" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;homepage banners&lt;/li&gt;
&lt;li&gt;landing pages&lt;/li&gt;
&lt;li&gt;product page separators&lt;/li&gt;
&lt;li&gt;premium product photography&lt;/li&gt;
&lt;li&gt;manufacturer marketing images&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="slideshow" slide_ratio="16:9"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Carousel – Multiple Images With Smooth Navigation
&lt;/h3&gt;

&lt;p&gt;Carousel is one of my favorite modes because of its versatility.&lt;/p&gt;

&lt;p&gt;It allows visitors to browse multiple images without consuming too much space on the page. You can use it to present manufacturer logos, team members, customer photos or product variations.&lt;/p&gt;

&lt;p&gt;I often use Carousel on product pages to showcase photos submitted by customers. It also works extremely well as a visual separator between sections of content.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F42n1xmexjhjjffawpz5n.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F42n1xmexjhjjffawpz5n.webp" alt="Carousel Gallery Mode" width="800" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;customer photos&lt;/li&gt;
&lt;li&gt;manufacturer logos&lt;/li&gt;
&lt;li&gt;team presentations&lt;/li&gt;
&lt;li&gt;product variations&lt;/li&gt;
&lt;li&gt;content separators&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="carousel" slides_visible="3" slide_ratio="16:9"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Coverflow – Premium 3D Presentation
&lt;/h3&gt;

&lt;p&gt;Coverflow adds a subtle 3D effect inspired by classic media browsers.&lt;/p&gt;

&lt;p&gt;The gallery looks modern, takes very little space and immediately attracts attention. It works particularly well for technology stores, electronics products and premium landing pages.&lt;/p&gt;

&lt;p&gt;If you want something more dynamic than a standard slider without overwhelming the layout, Coverflow is an excellent choice.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbv64k0n24viy9w4ip32a.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbv64k0n24viy9w4ip32a.webp" alt="Coverflow Gallery Mode" width="800" height="268"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;technology stores&lt;/li&gt;
&lt;li&gt;electronics products&lt;/li&gt;
&lt;li&gt;premium landing pages&lt;/li&gt;
&lt;li&gt;featured products&lt;/li&gt;
&lt;li&gt;modern marketing pages&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="coverflow"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Cards – Interactive Card Gallery
&lt;/h3&gt;

&lt;p&gt;Cards can be described as a more creative version of a traditional slider.&lt;/p&gt;

&lt;p&gt;Each slide behaves like a card, creating a more engaging browsing experience. This mode works well as a homepage banner, category banner or secondary gallery on a product page.&lt;/p&gt;

&lt;p&gt;Personally, I often use it when creating category pages. Imagine every category having its own animated image presentation without relying on heavy page builders or advanced commercial themes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ftjawi8o0chc5sujo8h.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ftjawi8o0chc5sujo8h.webp" alt="Cards Gallery Mode" width="800" height="475"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;homepage banners&lt;/li&gt;
&lt;li&gt;category banners&lt;/li&gt;
&lt;li&gt;creative product presentations&lt;/li&gt;
&lt;li&gt;inspiration galleries&lt;/li&gt;
&lt;li&gt;marketing pages&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="cards"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Thumbs – Product Style Gallery
&lt;/h3&gt;

&lt;p&gt;Thumbs is probably the closest thing to the native PrestaShop product gallery.&lt;/p&gt;

&lt;p&gt;The difference is that you can place it anywhere.&lt;/p&gt;

&lt;p&gt;It combines a large main image with a row of thumbnails underneath, making it ideal for showcasing products, project details and image-heavy content.&lt;/p&gt;

&lt;p&gt;This is a fantastic solution for blog posts, CMS pages and landing pages where you want visitors to browse images just like they would on a product page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feri0lmmebmlb7y9sd50c.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feri0lmmebmlb7y9sd50c.webp" alt="Thumbs Gallery Mode" width="800" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  When should you use it?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;product presentations&lt;/li&gt;
&lt;li&gt;blog articles&lt;/li&gt;
&lt;li&gt;CMS pages&lt;/li&gt;
&lt;li&gt;project details&lt;/li&gt;
&lt;li&gt;landing pages&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Example shortcode
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;{dcgallery source="demo" mode="thumbs" slide_ratio="16:9"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Why This Approach Is Different
&lt;/h2&gt;

&lt;p&gt;Most gallery modules focus on visual effects.&lt;/p&gt;

&lt;p&gt;DC pGallery focuses on flexibility.&lt;/p&gt;

&lt;p&gt;The goal wasn't to create yet another image gallery for PrestaShop. The goal was to create a gallery system that could adapt to different business needs without forcing store owners to install multiple modules or modify templates.&lt;/p&gt;

&lt;p&gt;The same images can be displayed as a classic grid, a Pinterest-style masonry layout, a slideshow, a carousel, a 3D coverflow or a product-style gallery. More importantly, those galleries can be placed almost anywhere in the store using a simple shortcode.&lt;/p&gt;

&lt;p&gt;That combination of flexibility and simplicity is what makes DC pGallery different.&lt;/p&gt;

&lt;p&gt;Instead of asking where the gallery can be displayed, you decide where it should be displayed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Images stopped being just decorative elements a long time ago.&lt;/p&gt;

&lt;p&gt;Today they help build trust, showcase expertise, present products more effectively and influence purchasing decisions. In many industries, high-quality visual content is just as important as product descriptions themselves.&lt;/p&gt;

&lt;p&gt;Whether you want to showcase completed projects, create inspiration galleries, present manufacturer materials or simply improve the visual appeal of your store, having a flexible gallery system can make a huge difference.&lt;/p&gt;

&lt;p&gt;If you're using PrestaShop and looking for a way to display image galleries practically anywhere in your store, DC pGallery might be one of the most versatile solutions you'll find.&lt;/p&gt;

</description>
      <category>gallery</category>
      <category>prestashop</category>
      <category>slideshow</category>
      <category>carousel</category>
    </item>
    <item>
      <title>Liquid Alerts: WOW Alerts Meet Liquid Border</title>
      <dc:creator>Paweł Nosko</dc:creator>
      <pubDate>Wed, 27 May 2026 08:27:53 +0000</pubDate>
      <link>https://dev.to/pawel_nosko/liquid-alerts-wow-alerts-meet-liquid-border-22mc</link>
      <guid>https://dev.to/pawel_nosko/liquid-alerts-wow-alerts-meet-liquid-border-22mc</guid>
      <description>&lt;p&gt;&lt;strong&gt;Liquid Alerts&lt;/strong&gt; merges two lab plugins: premium &lt;strong&gt;WOW Alerts&lt;/strong&gt; (pure CSS) and &lt;strong&gt;Liquid Border&lt;/strong&gt; (jQuery + SVG &lt;code&gt;clip-path&lt;/code&gt;). You get rich backgrounds, hover shine, drifting glow — plus a living, organic edge that ripples like liquid.&lt;/p&gt;

&lt;p&gt;This post covers where to download the pieces, how to wire them together, and how to tune the waves.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Live demo:&lt;/strong&gt; &lt;a href="https://pawelnosko.com/demos/liquid_alerts/" rel="noopener noreferrer"&gt;https://pawelnosko.com/demos/liquid_alerts/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://pawelnosko.com/videos/liquid_alerts.mp4" rel="noopener noreferrer"&gt;Watch the Liquid Alerts demo video&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Where to get the components
&lt;/h2&gt;

&lt;p&gt;Liquid Alerts does not replace the original plugins — it &lt;strong&gt;combines&lt;/strong&gt; them. You need both packages. Grab them from the lab repos or, if you are reading this on my blog, from the links below.&lt;/p&gt;

&lt;h3&gt;
  
  
  WOW Alerts (CSS)
&lt;/h3&gt;

&lt;p&gt;Success / error / warning / info / neutral banners, light and dark themes, enter animations, hover shine, dismiss button.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Download WOW Alerts package:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://pawelnosko.com/js-frontend-tools/wow-alerts-modern-css-alerts-that-actually-grab-attention" rel="noopener noreferrer"&gt;https://pawelnosko.com/js-frontend-tools/wow-alerts-modern-css-alerts-that-actually-grab-attention&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqb9iv0myep0ukmfgthdz.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqb9iv0myep0ukmfgthdz.webp" alt="WOW Alerts preview — five variants in light and dark themes" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;WOW Alerts — five variants, light and dark.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Files in the WOW Alerts package:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;css/wow-alerts.css&lt;/code&gt; — alert styles&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;index.html&lt;/code&gt; — demo without Liquid Border (optional reference)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Liquid Border (jQuery)
&lt;/h3&gt;

&lt;p&gt;Applies an animated SVG &lt;code&gt;clip-path&lt;/code&gt; to a block or image. Waves can be organic (random height pulsing), and side edges can stay straight (&lt;code&gt;horizontalOnly&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Download Liquid Border package:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://pawelnosko.com/js-frontend-tools/liquid-border-revolutionary-jquery-plugin-with-organic-wavy-edges" rel="noopener noreferrer"&gt;https://pawelnosko.com/js-frontend-tools/liquid-border-revolutionary-jquery-plugin-with-organic-wavy-edges&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flvp99dlvzcocg7hd72g1.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flvp99dlvzcocg7hd72g1.webp" alt="Liquid Border preview — wavy edge on blocks and images" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Liquid Border — wavy edge on blocks and images.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Files in the Liquid Border package:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;js/jquery.liquidBorder.js&lt;/code&gt; — plugin&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;css/liquid-border.css&lt;/code&gt; — wrapper and SVG layers&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;index.html&lt;/code&gt; — demo with sliders (optional)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Ready-made merge: Liquid Alerts
&lt;/h3&gt;

&lt;p&gt;In the &lt;strong&gt;Liquid Alerts&lt;/strong&gt; folder both kits are already merged. File layout:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;liquid_alerts/
├── index.html
├── css/
│   ├── wow-alerts.css
│   ├── liquid-border.css
│   └── liquid-alerts-integration.css
└── js/
    └── jquery.liquidBorder.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  2. Requirements
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;jQuery 3.x (CDN is fine)&lt;/li&gt;
&lt;li&gt;A browser with &lt;code&gt;clip-path&lt;/code&gt; and &lt;code&gt;ResizeObserver&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Modern CSS (&lt;code&gt;color-mix()&lt;/code&gt; in WOW Alerts)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Include the assets
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"css/wow-alerts.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"css/liquid-border.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"css/liquid-alerts-integration.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://code.jquery.com/jquery-3.7.1.min.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"js/jquery.liquidBorder.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  4. HTML markup
&lt;/h2&gt;

&lt;p&gt;Structure comes straight from WOW Alerts. A theme wrapper holds the stack; each alert is icon + body + optional close.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alerts wow-theme-dark"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert wow-alert--success"&lt;/span&gt; &lt;span class="na"&gt;role=&lt;/span&gt;&lt;span class="s"&gt;"alert"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert__icon"&lt;/span&gt; &lt;span class="na"&gt;aria-hidden=&lt;/span&gt;&lt;span class="s"&gt;"true"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;svg&lt;/span&gt; &lt;span class="na"&gt;viewBox=&lt;/span&gt;&lt;span class="s"&gt;"0 0 24 24"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;path&lt;/span&gt; &lt;span class="na"&gt;d=&lt;/span&gt;&lt;span class="s"&gt;"M20 6L9 17l-5-5"&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&amp;lt;/svg&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert__body"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert__title"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Success&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert__message"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Payment received.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"wow-alert__close"&lt;/span&gt; &lt;span class="na"&gt;aria-label=&lt;/span&gt;&lt;span class="s"&gt;"Dismiss alert"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;×&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Classes worth knowing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;wow-theme-light&lt;/code&gt; / &lt;code&gt;wow-theme-dark&lt;/code&gt; — theme on the container&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;wow-alert--success&lt;/code&gt;, &lt;code&gt;--error&lt;/code&gt;, &lt;code&gt;--warning&lt;/code&gt;, &lt;code&gt;--info&lt;/code&gt;, &lt;code&gt;--neutral&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;wow-alert--compact&lt;/code&gt; — smaller variant&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. Initialize Liquid Border on alerts
&lt;/h2&gt;

&lt;p&gt;Call &lt;code&gt;.liquidBorder()&lt;/code&gt; on each &lt;code&gt;.wow-alert&lt;/code&gt; &lt;strong&gt;after&lt;/strong&gt; the markup is in the DOM (e.g. after cloning from &lt;code&gt;&amp;lt;template&amp;gt;&lt;/code&gt;).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;amplitude&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;frequency&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;speed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.45&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;organic&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;organicIntensity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.85&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;organicSpeed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;2.2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;contentPadding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;horizontalOnly&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;borderWidth&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Why these values?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;amplitude: 6&lt;/code&gt;&lt;/strong&gt; — alerts are horizontal; a smaller amplitude looks clean, not like a floating blob.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;horizontalOnly: true&lt;/code&gt;&lt;/strong&gt; — waves on top and bottom only; straight sides fit banner layout.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;contentPadding: 10&lt;/code&gt;&lt;/strong&gt; — extra inner space beyond wave clearance (2× amplitude + padding).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;borderWidth: 0&lt;/code&gt;&lt;/strong&gt; — clip only; the CSS alert border still shows inside the clip.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  6. CSS integration (&lt;code&gt;liquid-alerts-integration.css&lt;/code&gt;)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Do not edit&lt;/strong&gt; &lt;code&gt;wow-alerts.css&lt;/code&gt;, &lt;code&gt;liquid-border.css&lt;/code&gt;, or &lt;code&gt;jquery.liquidBorder.js&lt;/code&gt;. Put layout fixes in &lt;code&gt;css/liquid-alerts-integration.css&lt;/code&gt;, loaded after the libraries.&lt;/p&gt;

&lt;p&gt;Liquid Border wraps each alert in &lt;code&gt;.liquid-border-wrapper&lt;/code&gt; and applies negative margins on &lt;code&gt;.wow-alert&lt;/code&gt; (wave padding compensation). The default WOW Alerts &lt;code&gt;gap&lt;/code&gt; is not enough — alerts overlap visually. The bridge file clears stack &lt;code&gt;gap&lt;/code&gt; and adds &lt;code&gt;margin-bottom&lt;/code&gt; on wrappers via &lt;code&gt;--la-stack-gap&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;It also restores &lt;code&gt;display: grid&lt;/code&gt; on &lt;code&gt;.liquid-border-target&lt;/code&gt; (Liquid Border sets &lt;code&gt;display: block&lt;/code&gt;, which breaks the icon | message | close row).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;stackGapPx&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;maxAmp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;amplitude&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;organicIntensity&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;totalPad&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;maxAmp&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;contentPadding&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;ceil&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;totalPad&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alerts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;--la-stack-gap&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;stackGapPx&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;px&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Recompute this when amplitude or &lt;code&gt;contentPadding&lt;/code&gt; changes, together with &lt;code&gt;liquidBorder('update')&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  7. Dismissing an alert
&lt;/h2&gt;

&lt;p&gt;Pause the wave animation, run the CSS dismiss animation, then destroy the plugin instance:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert__close&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;alert&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;closest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;$alert&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;$alert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pause&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;is-dismissing&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;animationend&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;$alert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;destroy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;once&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  8. Liquid Border API (quick reference)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;update&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;amplitude&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pause&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;play&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.wow-alert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;liquidBorder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;destroy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On the &lt;a href="https://pawelnosko.com/demos/liquid_alerts/" rel="noopener noreferrer"&gt;live demo&lt;/a&gt;, sliders call &lt;code&gt;update&lt;/code&gt; on all alerts at once — handy for finding settings you like.&lt;/p&gt;




&lt;h2&gt;
  
  
  9. Tuning and common issues
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Problem&lt;/th&gt;
&lt;th&gt;Fix&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Alerts overlap&lt;/td&gt;
&lt;td&gt;Add &lt;code&gt;liquid-alerts-integration.css&lt;/code&gt; and set &lt;code&gt;--la-stack-gap&lt;/code&gt; (section 6).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Alert too narrow&lt;/td&gt;
&lt;td&gt;In integration CSS: &lt;code&gt;.liquid-border-wrapper { width: 100% }&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Content hugs the waves&lt;/td&gt;
&lt;td&gt;Increase &lt;code&gt;contentPadding&lt;/code&gt; (e.g. 12–16).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Waves overpower content&lt;/td&gt;
&lt;td&gt;Lower &lt;code&gt;amplitude&lt;/code&gt; or &lt;code&gt;organicIntensity&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Too much motion on mobile&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;horizontalOnly: true&lt;/code&gt;, lower &lt;code&gt;speed&lt;/code&gt;, or &lt;code&gt;pause&lt;/code&gt; when &lt;code&gt;prefers-reduced-motion&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Empty wrapper after close&lt;/td&gt;
&lt;td&gt;Call &lt;code&gt;destroy&lt;/code&gt; before &lt;code&gt;remove&lt;/code&gt; (section 7).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Layout stacks vertically (icon / text / close)&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;display: grid&lt;/code&gt; on &lt;code&gt;.liquid-border-target&lt;/code&gt; in integration CSS.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Close button flush to the right edge&lt;/td&gt;
&lt;td&gt;Small &lt;code&gt;margin-right&lt;/code&gt; on &lt;code&gt;.wow-alert__close&lt;/code&gt; in integration CSS.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  10. Summary
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Download &lt;strong&gt;WOW Alerts&lt;/strong&gt; and &lt;strong&gt;Liquid Border&lt;/strong&gt; (links in section 1).&lt;/li&gt;
&lt;li&gt;Link both stylesheets, &lt;code&gt;liquid-alerts-integration.css&lt;/code&gt;, jQuery, and &lt;code&gt;jquery.liquidBorder.js&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Paste WOW Alerts markup with the right theme and variant.&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;.liquidBorder()&lt;/code&gt; on each &lt;code&gt;.wow-alert&lt;/code&gt; with &lt;code&gt;horizontalOnly&lt;/code&gt; and &lt;code&gt;contentPadding&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Set &lt;code&gt;--la-stack-gap&lt;/code&gt; after init (integration CSS + JS).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Liquid edge plus WOW interior (gradient fill, shine, drifting orb) feels more kinetic than CSS alone — without giving up simple markup and accessibility (&lt;code&gt;role="alert"&lt;/code&gt;, button labels).&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Try it:&lt;/strong&gt; &lt;a href="https://pawelnosko.com/demos/liquid_alerts/" rel="noopener noreferrer"&gt;Liquid Alerts demo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>javascript</category>
      <category>design</category>
      <category>ux</category>
    </item>
    <item>
      <title>I rebuilt a Joomla image gallery I used for years (because nothing replaced it)</title>
      <dc:creator>Paweł Nosko</dc:creator>
      <pubDate>Wed, 25 Mar 2026 14:37:19 +0000</pubDate>
      <link>https://dev.to/pawel_nosko/i-rebuilt-a-joomla-image-gallery-i-used-for-years-because-nothing-replaced-it-k6a</link>
      <guid>https://dev.to/pawel_nosko/i-rebuilt-a-joomla-image-gallery-i-used-for-years-because-nothing-replaced-it-k6a</guid>
      <description>&lt;p&gt;Years ago, I relied heavily on an extension called JoomlaWorks Simple Image Gallery.&lt;/p&gt;

&lt;p&gt;It was one of those rare tools that just worked:&lt;/p&gt;

&lt;p&gt;simple&lt;br&gt;
fast&lt;br&gt;
reusable&lt;br&gt;
no unnecessary complexity&lt;/p&gt;

&lt;p&gt;The best part?&lt;/p&gt;

&lt;p&gt;👉 You just pointed it to a folder with images — and the gallery was ready.&lt;/p&gt;

&lt;p&gt;No manual selection. No configuration hell.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;Over time, that extension was abandoned.&lt;/p&gt;

&lt;p&gt;And surprisingly, I couldn’t find a modern alternative that offered the same workflow:&lt;/p&gt;

&lt;p&gt;most galleries were tied to page builders&lt;br&gt;
many were too heavy&lt;br&gt;
others required manual image selection every time&lt;/p&gt;

&lt;p&gt;For real-world projects, especially when you work with multiple websites, this becomes inefficient very quickly.&lt;/p&gt;

&lt;h2&gt;
  
  
  The idea: bring back simplicity (but modernized)
&lt;/h2&gt;

&lt;p&gt;So I decided to build my own solution.&lt;/p&gt;

&lt;p&gt;Not a complex gallery system.&lt;/p&gt;

&lt;p&gt;👉 Just something practical that works in real projects.&lt;/p&gt;

&lt;p&gt;The core idea stayed the same:&lt;/p&gt;

&lt;p&gt;provide a folder → generate a gallery automatically&lt;/p&gt;

&lt;h2&gt;
  
  
  Folder-based approach (why it matters)
&lt;/h2&gt;

&lt;p&gt;Instead of selecting images manually:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you define a directory&lt;/li&gt;
&lt;li&gt;the module loads all images&lt;/li&gt;
&lt;li&gt;and builds the gallery dynamically&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This approach is extremely useful when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you manage large sets of images&lt;/li&gt;
&lt;li&gt;you reuse structures across projects&lt;/li&gt;
&lt;li&gt;you want fast deployment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 it removes friction completely&lt;/p&gt;

&lt;h2&gt;
  
  
  Display modes (real use cases)
&lt;/h2&gt;

&lt;p&gt;Instead of separate modules, I built one flexible system with multiple modes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Grid mode
&lt;/h3&gt;

&lt;p&gt;A classic layout for structured content.&lt;/p&gt;

&lt;p&gt;Best for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;portfolios&lt;/li&gt;
&lt;li&gt;product previews&lt;/li&gt;
&lt;li&gt;simple galleries&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 clean and predictable&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wewcq2x7sfaol64utgw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wewcq2x7sfaol64utgw.png" alt=" " width="800" height="526"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Masonry mode
&lt;/h3&gt;

&lt;p&gt;Handles images with different proportions.&lt;/p&gt;

&lt;p&gt;Best for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;blogs&lt;/li&gt;
&lt;li&gt;creative content&lt;/li&gt;
&lt;li&gt;mixed image sets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 no empty gaps, more dynamic layout&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzqhkbjs16anxbgr4kdc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzqhkbjs16anxbgr4kdc.png" alt=" " width="800" height="633"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Slider mode
&lt;/h3&gt;

&lt;p&gt;Focused, one-by-one presentation.&lt;/p&gt;

&lt;p&gt;Best for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;hero sections&lt;/li&gt;
&lt;li&gt;featured content&lt;/li&gt;
&lt;li&gt;storytelling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 full control over user flow&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh0u0je2fts9tbx26derp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh0u0je2fts9tbx26derp.png" alt=" " width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Carousel mode
&lt;/h3&gt;

&lt;p&gt;Compact horizontal layout.&lt;/p&gt;

&lt;p&gt;Best for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;product sections&lt;/li&gt;
&lt;li&gt;showcasing multiple items&lt;/li&gt;
&lt;li&gt;saving vertical space&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3loix04zku01t2wh7s3q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3loix04zku01t2wh7s3q.png" alt=" " width="800" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;...and more :)&lt;/p&gt;

&lt;h2&gt;
  
  
  Multiple instances (important detail)
&lt;/h2&gt;

&lt;p&gt;The module supports multiple galleries on the same page.&lt;/p&gt;

&lt;p&gt;Each instance:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;works independently&lt;/li&gt;
&lt;li&gt;doesn’t conflict with others&lt;/li&gt;
&lt;li&gt;keeps scripts isolated&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 this is critical in real projects&lt;/p&gt;

&lt;h2&gt;
  
  
  Tech behind it
&lt;/h2&gt;

&lt;p&gt;Instead of reinventing everything:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Swiper → sliders / carousel&lt;/li&gt;
&lt;li&gt;GLightbox → lightbox&lt;/li&gt;
&lt;li&gt;Masonry → layout&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal wasn’t to build new libraries.&lt;/p&gt;

&lt;p&gt;👉 The goal was to integrate them cleanly and efficiently.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I didn’t use page builders
&lt;/h2&gt;

&lt;p&gt;In many real-world projects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;page builders add weight&lt;/li&gt;
&lt;li&gt;reduce reusability&lt;/li&gt;
&lt;li&gt;complicate maintenance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This module avoids that entirely.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-world usage
&lt;/h2&gt;

&lt;p&gt;This isn’t a demo project.&lt;/p&gt;

&lt;p&gt;It’s based on actual needs from multiple implementations where I needed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;speed&lt;/li&gt;
&lt;li&gt;simplicity&lt;/li&gt;
&lt;li&gt;repeatability&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo &amp;amp; download
&lt;/h2&gt;

&lt;p&gt;If you want to try it:&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://www.designcart.pl/laboratorium/306-galeria-obrazow-dla-joomla-z-wieloma-trybami-wyswietlania-darmowy-plugin.html" rel="noopener noreferrer"&gt;https://www.designcart.pl/laboratorium/306-galeria-obrazow-dla-joomla-z-wieloma-trybami-wyswietlania-darmowy-plugin.html&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback
&lt;/h2&gt;

&lt;p&gt;If you’ve worked with Joomla galleries before:&lt;/p&gt;

&lt;p&gt;👉 what’s the biggest pain point for you?&lt;/p&gt;

&lt;p&gt;I’m actively improving this, so feedback is welcome.``&lt;/p&gt;

</description>
      <category>gallery</category>
      <category>joomla</category>
      <category>simpleimagegalery</category>
      <category>designcart</category>
    </item>
    <item>
      <title>Google Core Update December 2025 – a report from the eye of the storm</title>
      <dc:creator>Paweł Nosko</dc:creator>
      <pubDate>Tue, 23 Dec 2025 09:47:45 +0000</pubDate>
      <link>https://dev.to/pawel_nosko/google-core-update-december-2025-a-report-from-the-eye-of-the-storm-c19</link>
      <guid>https://dev.to/pawel_nosko/google-core-update-december-2025-a-report-from-the-eye-of-the-storm-c19</guid>
      <description>&lt;p&gt;On December 11th, Google officially announced another Google Core Update. The mere fact that the update appeared in December was not obvious at all — the break from the previous core update was record-breakingly long, which had been sparking speculation in the industry for weeks. This time, Google again confirmed a certain regularity: Wednesdays and Thursdays are their favorite days to launch the biggest changes in the algorithm.&lt;/p&gt;

&lt;p&gt;However, such a long "window of silence" between updates is hard to explain by holidays or seasonality. Everything indicates that Google deliberately delayed, refining the mechanisms that evaluate websites on a holistic level. The longer the break, the higher the expectations — and the larger the reshuffling we are observing in the search results today.&lt;/p&gt;

&lt;p&gt;From the first day of the rollout, I have been following user reports on Reddit, the WebmasterWorld forum, as well as analyses published on Barry Schwartz’s blog — especially the comments under the posts, because that is where real emotions and the first symptoms of change are most often visible. Simultaneously, I am analyzing data from dozens of my own websites, covering various business models and content types.&lt;/p&gt;

&lt;p&gt;Thanks to this, I can look at this Core Update not only from the perspective of an observer, but also a practitioner. In the further part of the article, I will share the conclusions that emerge from the eye of this storm — without simplifications, without SEO myths, and without promising quick recipes.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Google Core Update and why does Google release it
&lt;/h2&gt;

&lt;p&gt;Before we move further, it is worth pausing for a moment and answering the basic question: why does Google release core updates at all? These are not minor tweaks or reactions to single abuses. A Core Update is the moment in which Google reviews and updates the way it evaluates the entire internet — in bulk, systemically, and without exceptions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Changes in ranking mechanisms
&lt;/h3&gt;

&lt;p&gt;A Core Update is not about "punishing" specific pages or turning on one new ranking factor. Google modifies the mechanisms that are responsible for evaluating:&lt;br&gt;
    • content relevance,&lt;br&gt;
    • its quality,&lt;br&gt;
    • usefulness for the user,&lt;br&gt;
    • credibility on the scale of the entire website.&lt;br&gt;
In practice, this means a change in the weights of signals, rather than a simple answer like: "from today, X matters." This is exactly why during a core update, some pages can suddenly gain and others fall — even though technically "nothing has changed on them." The way the algorithm interprets them has changed.&lt;/p&gt;

&lt;h3&gt;
  
  
  Site Quality Score update
&lt;/h3&gt;

&lt;p&gt;Site Quality Score (SQS) is an informal, unconfirmed by Google website quality indicator that the SEO industry has been talking about for years. Its existence is suggested by, among others, analyses published by Barry Schwartz, but also repeatable patterns visible in data from subsequent core updates.&lt;/p&gt;

&lt;p&gt;From our analyses at Design Cart, it clearly follows: Site Quality Score updates exclusively during a Core Update. That is when a massive recalculation of the holistic value of the website takes place — not only of the domain as a whole, but also of individual subpages. Importantly, between core updates, this "quality score" remains practically frozen.&lt;/p&gt;

&lt;p&gt;Over the last year, on many of our clients' online stores, we implemented elements that tangibly raised the level of E-E-A-T: hard evidence, video materials, expert content, and extensive information sections. The effect? For months — silence. Subpages did not react, visibility stood still, even though objectively the quality was growing.&lt;/p&gt;

&lt;p&gt;This very mechanism is the source of frustration and disorientation for many webmasters. They do "everything right," invest time and resources, and Google seems not to notice it. Only the update of the Site Quality Score during a Core Update makes these changes actually taken into account and rewarded — often in leaps, rather than gradually.&lt;/p&gt;

&lt;p&gt;That is why Core Updates are so turbulent. This is not a day-by-day evolution. This is the moment when Google defrosts the quality evaluation and recalculates it from scratch.&lt;/p&gt;

&lt;h2&gt;
  
  
  How a core update works "under the hood"
&lt;/h2&gt;

&lt;p&gt;At this point, we enter an area that Google does not officially describe. What you read below is not algorithm documentation, but a set of observations based on data, repeatability from previous Core Updates, and real tests on live websites. It must be clearly stated: this is still a theory — but a theory that proves true surprisingly often.&lt;/p&gt;

&lt;p&gt;From my point of view, a Core Update can be logically divided into three distinct phases that follow one another.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase I: defrosting of search results
&lt;/h3&gt;

&lt;p&gt;This is the first phase, which can be observed at the moment of the Core Update announcement or shortly after. Search results begin to behave as if they have been "defrosted" — they become significantly more fluid and susceptible to change. Positions can jump from day to day, and sometimes even from hour to hour. In practice, this looks like a total SERP dance.&lt;/p&gt;

&lt;p&gt;In this phase, new ranking rules also begin to apply, though still without a final "verdict." This is the moment of greatest chaos and, simultaneously, the greatest stress for webmasters.&lt;/p&gt;

&lt;p&gt;During this phase, I noticed a very characteristic correlation: on all sites where we had removed fluff content before the Core Update, drops appeared. Regardless of the quality of the remaining content. It looked as if:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the new content was not yet being taken into account,&lt;/li&gt;
&lt;li&gt;and the removal of the old content temporarily cut off the &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;site’s existing power or created a "gap" in its power.&lt;br&gt;
We observed the same patterns during the June Core Update 2025. Importantly — in that case, the sites that fell during Phase I returned to higher positions than before after the update ended. The larger and more aggressive the changes in content (especially mass removal), the deeper the drop in Phase I.&lt;/p&gt;

&lt;p&gt;This is one of the reasons why "cleanup" actions during the rollout can be very risky.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase II: recalculating Site Quality Score
&lt;/h3&gt;

&lt;p&gt;After a period of violent fluctuations, a deceptive calm usually follows. Visibility stabilizes, changes are smaller, and many webmasters get the impression that "the worst is over." In practice, this is the quietest, but simultaneously the most computationally heavy phase of the Core Update.&lt;/p&gt;

&lt;p&gt;Everything indicates that this is exactly when the Site Quality Score recalculation occurs. If we assume that Google uses advanced AI models (often working-titled in the industry as MUVERA) for page quality analysis, the scale of the operation is enormous. These are not single pages — these are millions of subpages of large websites being analyzed anew.&lt;br&gt;
This stage could explain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the relative calm in the SERPs,&lt;/li&gt;
&lt;li&gt;delays and instabilities in Google Search Console,&lt;/li&gt;
&lt;li&gt;periodic problems with PageSpeed Insights and other Google tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;From the outside, it looks like the calm before the storm, but in the background, a massive recalculation of the holistic value of websites is underway.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase III: ranking with the new Site Quality Score
&lt;/h3&gt;

&lt;p&gt;This is the phase everyone is waiting for — and the one that decides the "winners" and "losers" of this Core Update. After the Site Quality Score recalculation is finished, Google begins to actually rank pages according to the new quality assessment.&lt;br&gt;
Precisely at this moment:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;sites into which good, consistent work has been put for months or years begin to go up,&lt;/li&gt;
&lt;li&gt;websites based on apparent quality, mass production of content, or lack of real experience — lose visibility.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;During the June Core Update 2025, this effect was particularly visible a few days before the official announcement of the update's conclusion and a few days after it. That was when the largest increases and most severe drops appeared — no longer chaotic, but permanent.&lt;/p&gt;

&lt;p&gt;Only after Phase III can one speak of the real picture of the situation. Everything that happens earlier is the process of the algorithm reaching a new equilibrium.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Google pays attention to in a Core Update (what wins most often)
&lt;/h2&gt;

&lt;p&gt;Instead of trying to break the algorithm down into hundreds of signals, it is better to look at the Core Update through several thinking filters that Google applies today to evaluate websites. These are not individual ranking factors, but a way of interpreting the quality of content and the service as a whole.&lt;/p&gt;

&lt;h3&gt;
  
  
  Relevance and user satisfaction (content + intent + Helpful Content)
&lt;/h3&gt;

&lt;p&gt;The first and most important question of the algorithm today sounds very simple: Does this page really answer the user's question better than the other results? It is not about whether the content contains all the keywords, but:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;whether it closes the topic,&lt;/li&gt;
&lt;li&gt;whether it takes context into account,&lt;/li&gt;
&lt;li&gt;whether it answers real doubts that arise after asking a question. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The influence of the Helpful Content Update is very clearly visible here. "Correct" content, written just for the sake of having something there, is no longer enough. Google is getting better at recognizing whether the user feels served after entering the page, or if they have to return to the results and keep searching.&lt;/p&gt;

&lt;h3&gt;
  
  
  Substantive quality and credibility (E-E-A-T in practice)
&lt;/h3&gt;

&lt;p&gt;At this stage, the algorithm looks not only at what is written, but who is writing it and from what perspective. What counts is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;author's experience,&lt;/li&gt;
&lt;li&gt;real expertise,&lt;/li&gt;
&lt;li&gt;evidence (examples, data, own materials),&lt;/li&gt;
&lt;li&gt;freshness of content,&lt;/li&gt;
&lt;li&gt;thematic consistency of the entire website.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is the moment when empty declarations stop working. The mere information "expert with 10 years of experience" means nothing if the content does not show this experience in practice. Google is getting better and better at distinguishing knowledge from the repetition of knowledge.&lt;/p&gt;

&lt;h3&gt;
  
  
  "Site-wide" and the quality of the entire service
&lt;/h3&gt;

&lt;p&gt;A Core Update very clearly operates at the level of the entire service, not just individual subpages. If a domain is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;full of thin content,&lt;/li&gt;
&lt;li&gt;glued together from random topics,&lt;/li&gt;
&lt;li&gt;based on mass "SEO content," then even good subpages may have problems with rankings.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is exactly where we can talk about the end of the SEO fluff era. For years, such content worked because it increased the semantic reach of the site. Today, it increasingly acts as ballast that drags the domain down. Google looks at the service holistically: does this place really deserve visibility in a given topic.&lt;/p&gt;

&lt;h3&gt;
  
  
  UX and technicals as an "amplifier," not a magic button
&lt;/h3&gt;

&lt;p&gt;Page speed, mobile, ads, or pop-ups are rarely the direct cause of large drops. However, they very often worsen the overall user satisfaction rating. Advertising clutter, aggressive windows, mobile chaos, or slow loading make even good content:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;consumed less effectively,&lt;/li&gt;
&lt;li&gt;abandoned faster,&lt;/li&gt;
&lt;li&gt;recommended further less often (directly or indirectly).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Technicals do not "save" weak content, but they can amplify or weaken the effect of a Core Update.&lt;/p&gt;

&lt;h3&gt;
  
  
  Originality and uniqueness
&lt;/h3&gt;

&lt;p&gt;At a certain point, all the above filters cease to be enough. If several pages meet high quality standards, Google must ask another question: How does this content differ from the rest? In many analyses published by SEO experts, the conclusion appears that originality and uniqueness are becoming the decisive ammunition in the fight against equally well-prepared competition. Algorithms based on AI models (often working-titled in the industry as MUVERA) have an increasing ability to detect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;repetitive patterns,&lt;/li&gt;
&lt;li&gt;generic narratives,&lt;/li&gt;
&lt;li&gt;content that "brings nothing new."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Therefore, pages that win more and more often are those that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;show their own experience,&lt;/li&gt;
&lt;li&gt;have unique examples,&lt;/li&gt;
&lt;li&gt;present real conclusions instead of compilations of others'.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And this is probably one of the key reasons why in this Core Update some pages skyrocket, while others — despite being correct — stand still.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who usually gains and who loses (hypotheses from observations + examples)
&lt;/h2&gt;

&lt;p&gt;Every Core Update very quickly divides the internet into two groups: those who gain and those who wonder what went wrong. Based on observations from the current rollout — my own data, industry reports, and discussions on Reddit, among others — fairly repetitive patterns are beginning to emerge.&lt;/p&gt;

&lt;h3&gt;
  
  
  The most common profiles of winners
&lt;/h3&gt;

&lt;p&gt;The services that handle it best are those that bring something real, rather than just correctly formatted text.&lt;br&gt;
The first group consists of sites based on unique experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;own tests,&lt;/li&gt;
&lt;li&gt;case studies,&lt;/li&gt;
&lt;li&gt;comparisons based on real data,&lt;/li&gt;
&lt;li&gt;original conclusions and observations.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is content that cannot be copied or mass-generated — because it results from practice, not research.&lt;/p&gt;

&lt;p&gt;The second group includes pages that close the topic. They don't stop at answering "what is it," but lead the user further:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;they expand on doubts,&lt;/li&gt;
&lt;li&gt;they answer questions like "what to choose and why,"&lt;/li&gt;
&lt;li&gt;they contain sensible FAQs,&lt;/li&gt;
&lt;li&gt;they help make a decision rather than just describing it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In both cases, the common denominator is high user satisfaction — not because the content is long, but because it is complete.&lt;/p&gt;

&lt;h3&gt;
  
  
  The most common profiles of losers
&lt;/h3&gt;

&lt;p&gt;On the other side are services that functioned correctly for years but today are beginning to be rated increasingly worse.&lt;/p&gt;

&lt;p&gt;The first group is mass-generated content without added value. Linguistically correct, SEO-optimized, but bringing nothing new. For a long time, such content was "enough." Now, it is increasingly becoming invisible.&lt;/p&gt;

&lt;p&gt;The second group consists of sites with a broad thematic mix, without a clear identity. Services that "write about everything," hoping something will stick. In Core Updates, it is increasingly clear that a lack of authority in a specific field weighs down the entire domain.&lt;/p&gt;

&lt;p&gt;The third group is aggregation without original input — rewriting the internet, summarizing others' content, compilations without experience. The algorithm is getting better at recognizing that such pages are not a source of knowledge, but its echo.&lt;/p&gt;

&lt;h3&gt;
  
  
  The end of the copywriter era
&lt;/h3&gt;

&lt;p&gt;Between 2022 and 2025, classic copywriting was doing quite well. Why? Because for a long time, algorithms rewarded:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;correct language,&lt;/li&gt;
&lt;li&gt;logical structure,&lt;/li&gt;
&lt;li&gt;"nice text mush" that looked expert.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This was enough, even if the author had no real experience in a given subject. Current Core Updates are hitting this model more and more clearly. A copywriter — understood as a person who can write well but is not an expert — is ceasing to be sufficient. Not because the text is weak. Because it lacks experience, evidence, and its own perspective.&lt;/p&gt;

&lt;h3&gt;
  
  
  The hunt for pseudo-experts
&lt;/h3&gt;

&lt;p&gt;At the same time, we see an increasingly sharp fight against pseudo-experts. The internet is full of pages whose authors write that they do this and that, have 120 years of experience, graduated from Harvard, and happen to know Prince Charles personally.&lt;/p&gt;

&lt;p&gt;The problem begins the moment we enter such "experts'" blogs and see 100% AI-slop — content without examples, without evidence, without a practical background. There are no case studies, own observations, photos, data, or anything that would confirm the declared expertise.&lt;/p&gt;

&lt;p&gt;According to the opinion of many industry experts, the current Core Update may be Google's first such clear step toward verifying evidence rather than declarations. It is no longer enough to write that one is an expert. Increasingly, it must be shown in reality — through experience, original materials, and unique conclusions.&lt;/p&gt;

&lt;h2&gt;
  
  
  “Testimonies from the battlefield” – what people are saying (Reddit, WebmasterWorld)
&lt;/h2&gt;

&lt;p&gt;During an ongoing Core Update, one of the most valuable sources of insight is reports from the front line. Not official announcements, not tool charts, but the voices of people who live off organic traffic every day. However, to avoid turning this chapter into a collection of rumors and emotions, it’s worth clearly defining the method.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reddit – the most common themes in user statements
&lt;/h3&gt;

&lt;p&gt;On Reddit, the dominant posts are very “fresh” accounts — emotional, yet surprisingly consistent in terms of themes.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Data delays and chaos (GSC lag)&lt;br&gt;
“On my end the GSC is pretty slow, last updated basically 48 hours ago. But compared to a few days ago… it def dropped a lot in impressions and clicks.”&lt;br&gt;
Many users point out massive delays in Google Search Console, which makes analyzing drops “live” practically impossible. This suggests that part of the panic may stem from a lack of up-to-date data, not solely from real losses.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Impact on entire domains, not individual pages&lt;br&gt;
“Core update December hitted whole website.”&lt;br&gt;
This is a very common motif — the update doesn’t work in a granular way. Instead, it looks more like a recalibration of trust toward the entire domain, which perfectly aligns with observations about site-wide quality.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Chaos in Organic vs Direct (GA4)&lt;br&gt;
“GA4 looks to have flipped Organic vs Direct Traffic.”&lt;br&gt;
Some of the reported “drops” may be caused by traffic attribution issues in Google Analytics 4. During a Core Update, the boundary between organic and direct traffic can become heavily blurred.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Sudden day-to-day drops&lt;br&gt;
“Lost rankings overnight after the update. Anyone else seeing this?”&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These reports fit perfectly with the picture of high volatility in the early phases of an update. Ranking swings every 24–48 hours are currently the norm, not the exception.&lt;/p&gt;

&lt;h3&gt;
  
  
  WebmasterWorld – tone and observations
&lt;/h3&gt;

&lt;p&gt;Discussions on WebmasterWorld have a completely different character. Less emotion, more long-term frustration and attempts to understand “where this is all heading.”&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;AI and the feeling of being “used”&lt;br&gt;
“It’s as if Google is simply saying: ‘Oh, we have your content for our AI. We don’t need you anymore.’” — Micha&lt;br&gt;
This is one of the strongest threads: a sense that content from small and medium-sized sites has been “absorbed,” and traffic is no longer flowing back to the authors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The “organic compost” theory&lt;br&gt;
“Organic results at the bottom of the page which Google treats as compost…” — BigKat&lt;br&gt;
According to some users, classic organic results are losing significance, and the effort put into ranking is no longer paying off in its previous form.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Impact on small sites&lt;br&gt;
“What we’re seeing right now affects almost exclusively small websites.” — Micha&lt;br&gt;
This is a very frequent observation: the Core Update looks less like an algorithm tweak and more like a quality filter that ruthlessly weeds out weaker domains.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rising importance of alternative search engines&lt;br&gt;
“90% is now from other SEs. Ranking well on Bing and DuckDuckGo.” — seokees&lt;br&gt;
“Google traffic has dropped significantly, while traffic from Bing has risen a bit.” — Chris&lt;br&gt;
An interesting signal: some sites are seeing traffic diversification, which may be the result of both algorithmic changes and shifts in user behavior.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A plague of bots and vulnerability scans&lt;br&gt;
“90+% WP probes, just hundreds to thousands of page requests per day.” — jmccormac / RedBar&lt;br&gt;
In the background of the Core Update, many webmasters are noticing increased bot activity, which further complicates the analysis of real traffic.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  What does this all mean?
&lt;/h3&gt;

&lt;p&gt;Reports from Reddit and WebmasterWorld show one thing very clearly:&lt;br&gt;
this is not a “normal” Core Update. The scale of changes, data chaos, and strong site-wide effects make many people feel a loss of control.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to do monitoring during an update (so you don't go crazy)
&lt;/h2&gt;

&lt;p&gt;A Core Update is the moment when it is easiest to make mistakes resulting not from a lack of knowledge, but from emotions. Fluctuations are natural, data is delayed, and charts can look dramatic. Therefore, monitoring during the rollout should be simple, repeatable, and as objective as possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  What to check daily (15 minutes)
&lt;/h3&gt;

&lt;p&gt;It's not about staring at charts for hours, but about a short, consistent routine.&lt;/p&gt;

&lt;p&gt;The first step is Google Search Console. Focus exclusively on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;pages and queries with the largest change,&lt;/li&gt;
&lt;li&gt;separating brand vs. non-brand traffic.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This allows you to quickly distinguish visibility problems from changes in user behavior.&lt;/p&gt;

&lt;p&gt;The second step is segmentation, without which the data is useless:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;mobile vs. desktop,&lt;/li&gt;
&lt;li&gt;country / language,&lt;/li&gt;
&lt;li&gt;page type: category, product, article.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It often turns out that a "drop" only affects one segment, while the rest of the site remains stable.&lt;/p&gt;

&lt;p&gt;The third element is time-stamped notes. Instead of trying to remember, write down:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;day 1,&lt;/li&gt;
&lt;li&gt;day 4,&lt;/li&gt;
&lt;li&gt;day 9 of the rollout.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After the Core Update ends, these notes create a coherent reporting narrative that allows you to understand what was a temporary fluctuation and what was a real trend change.&lt;/p&gt;

&lt;h3&gt;
  
  
  What NOT to do during the rollout
&lt;/h3&gt;

&lt;p&gt;The greatest losses during Core Updates do not result from the algorithm, but from hasty decisions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do not make a revolution in the structure of the entire site.&lt;/strong&gt; Overhauls, migrations, and mass changes to internal linking during the rollout can effectively distort the picture of the situation and make it difficult to assess what was actually an effect of the update.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do not mass-delete content "in a panic" without an audit.&lt;/strong&gt; As previous observations have shown, aggressive content purging during a Core Update often deepens drops instead of fixing them. Decisions about deleting or merging content should be made after the update ends, based on full data.&lt;/p&gt;

&lt;p&gt;During a Core Update, the best strategy is controlled observation, not a nervous reaction. It is precisely calm and consistency that allow you to draw conclusions that will pay off only a few weeks later.&lt;/p&gt;

&lt;h2&gt;
  
  
  My prediction (from the eye of the storm)
&lt;/h2&gt;

&lt;p&gt;Looking at the scale of the changes, the pace of the rollout, and the signals coming from various niches, everything indicates that the most susceptible to further reshuffling will be services based exclusively on generic content — especially affiliation, "SEO how-to blogs," and sites that have grown for years thanks to mass production of text. Google will most likely continue to tighten the screw where it is difficult to point to the author's real experience or the unique value of the service.&lt;/p&gt;

&lt;p&gt;Large fluctuations may also affect news and Discover, where the algorithm is increasingly aggressively filtering sources for quality and credibility, not just freshness. On the other hand, specialized services with a clear thematic identity, which have consistently built E-E-A-T over a long period, should behave more stably.&lt;/p&gt;

&lt;p&gt;It is still too early for full conclusions — we will see the real picture a few days after the official end of the Core Update. Until that moment, everything we observe is part of the algorithm's process of reaching a new equilibrium, and not its final verdict.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;We know that the December Core Update is not a cosmetic adjustment, but a deep recalculation of page quality on the scale of the entire internet. We clearly see that Google is increasingly rewarding real experience, thematic consistency, and content that actually solves users' problems rather than just describing them. We do not know, however, exactly what weights the individual signals have and which elements will prove decisive after the rollout is completed.&lt;/p&gt;

&lt;p&gt;Changes should be read with distance — short-term drops and increases during the update are rarely final and are very easy to misinterpret. The most sensible strategy is calm monitoring, segment analysis, and postponing radical decisions until the moment the algorithm reaches a new equilibrium. What is worth doing right now is consistently building quality: experience, evidence, uniqueness, and trust.&lt;/p&gt;

&lt;p&gt;A Core Update is not a punishment, but a selection mechanism. For some, it means a loss; for others — confirmation that the chosen direction was right. In the long run, the winners are not those who react to every chart, but those who understand why Google introduces these changes in the first place.&lt;/p&gt;

</description>
      <category>google</category>
      <category>update</category>
      <category>seo</category>
    </item>
  </channel>
</rss>
