WordPress.org
Get WordPress

Plugin Directory

Changeset 3480346


Ignore:
Timestamp:
03/11/2026 04:08:57 PM (3 weeks ago)
Author:
domclic
Message:

make columns works correctly

Location:
effortless-carousel-with-gallery/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • effortless-carousel-with-gallery/trunk/assets/css/carousel.css

    r3480321 r3480346  
    44    width: 100%;
    55    margin: 0 auto;
    6     overflow: hidden;
    7 }
    8 
    9 /* Gallery base styles: respect WordPress width */
     6    overflow: hidden; /* clips slides outside viewport horizontally */
     7}
     8
     9/* Gallery base styles: override WordPress flex gallery layout */
    1010.wp-block-gallery.elcwg_carousel_active {
    11     width: 100%;
    12     margin: 0;
    13     padding: 0;
    14     display: block;
     11    display: block !important; /* override WordPress has-nested-images flex */
     12    width: 100% !important;
     13    margin: 0 !important;
     14    padding: 0 !important;
    1515    box-sizing: border-box;
    16     gap: 0 !important; /* override WordPress default gallery gap */
     16    gap: 0 !important;
     17    position: relative; /* positioning context for nav arrows */
    1718}
    1819
    … …  
    2829/* Slide styles: dynamic width based on --slides-per-view */
    2930.elcwg-carousel-inner .wp-block-image {
    30     flex: 0 0 calc(100% / var(--slides-per-view, 1));
    31     width: calc(100% / var(--slides-per-view, 1));
     31    flex: 0 0 calc(100% / var(--slides-per-view, 1)) !important;
     32    width: calc(100% / var(--slides-per-view, 1)) !important;
     33    max-width: calc(100% / var(--slides-per-view, 1)) !important;
    3234    padding: 0 var(--elcwg-card-gap, 8px);
    3335    box-sizing: border-box;
    34     display: flex;
     36    display: flex !important;
    3537    align-items: center;
    3638    justify-content: center;
    3739    box-shadow: none !important;
    38     position: relative; /* Important pour le positionnement du caption */
    39     container-type: inline-size; /* Active les container queries */
    40 }
    41 
    42 /* Image styles: respect WordPress-defined sizes */
     40    position: relative;
     41    container-type: inline-size;
     42    margin: 0 !important; /* override WordPress figure margin */
     43}
     44
     45/* Image styles: fill the column slot, maintain aspect ratio */
    4346.elcwg-carousel-inner .wp-block-image img {
    44     width: 100%;
    45     height: auto;
     47    width: 100% !important;
     48    height: auto !important;
    4649    display: block;
    4750    box-shadow: none !important;
    … …  
    163166}
    164167
    165 /* Responsive adjustments (#13: scoped to gallery, not :root) */
    166 @media (max-width: 768px) {
    167     .wp-block-gallery.elcwg_carousel_active {
    168         --slides-per-view: 2;
    169     }
    170 }
    171 
     168/* Mobile: force 1 column (JS mirrors this via getEffectiveColumns) */
    172169@media (max-width: 480px) {
    173170    .wp-block-gallery.elcwg_carousel_active {

  • effortless-carousel-with-gallery/trunk/assets/js/frontend.js

    r3480298 r3480346  
    4747        // Returns the number of visible slides for the current viewport width.
    4848        const getEffectiveColumns = () => {
    49             const w = window.innerWidth;
    50             if (w < 480) return 1;
    51             if (w < 768) return Math.min(2, baseColumns);
    52             return Math.min(baseColumns, Math.floor(w / 200));
     49            return window.innerWidth < 480 ? 1 : baseColumns;
    5350        };
    5451
    … …  
    104101        nextButton.setAttribute('aria-label', 'Next slide');
    105102
    106         wrapper.appendChild(prevButton);
    107         wrapper.appendChild(nextButton);
     103        gallery.appendChild(prevButton);
     104        gallery.appendChild(nextButton);
    108105
    109106        // Navigation dots.

  • effortless-carousel-with-gallery/trunk/effortless-carousel-with-gallery.php

    r3480321 r3480346  
    33 * Plugin Name: Effortless Carousel with Gallery
    44 * Description: Adds responsive carousel with animation functionality to WordPress galleries.
    5  * Version:           1.1.4
     5 * Version:           1.1.8
    66 * Requires at least: 5.5
    77 * Requires PHP:      7.2
    … …  
    2121
    2222/** Plugin version constant. */
    23 define( 'ELCWG_VERSION', '1.1.4' );
     23define( 'ELCWG_VERSION', '1.1.8' );
    2424
    2525/**

  • effortless-carousel-with-gallery/trunk/readme.txt

    r3480321 r3480346  
    44Requires at least: 5.5
    55Tested up to: 6.9
    6 Stable tag: 1.1.4
     6Stable tag: 1.1.8
    77Requires PHP: 7.2
    88License: GPLv2 or later
    … …  
    6565
    6666== Changelog ==
     67
     68= 1.1.8 =
     69* Fixed: Added !important overrides to counter WordPress has-nested-images gallery CSS that was fighting plugin layout rules, causing columns and images to appear off-center or wrong size.
     70
     71= 1.1.7 =
     72* Fixed: Navigation arrows are now always vertically centered relative to the image area only, not the full wrapper (which included the dots below).
     73
     74= 1.1.6 =
     75* Improved: Images now display at their natural size (never stretched), centered within their column slot. Nothing is ever cropped. Previously images were forced to 100% slot width which distorted portrait images.
     76
     77= 1.1.5 =
     78* Improved: Carousel now always shows exactly the number of columns selected in the gallery block. On mobile (< 480px) it forces 1 column. Removed intermediate breakpoint that was capping columns at 2 on tablets.
    6779
    6880= 1.1.4 =
Note: See TracChangeset for help on using the changeset viewer.