WordPress.org
Get WordPress

Plugin Directory

Changeset 2597622


Ignore:
Timestamp:
09/12/2021 05:31:10 PM (5 years ago)
Author:
jweathe
Message:

NBIS 1.7.0 default eager loaded image, lazy load option.

Location:
no-bs-image-slider/trunk
Files:
1 deleted
3 edited

Legend:

Unmodified
Added
Removed

  • no-bs-image-slider/trunk/plugin.php

    r2522382 r2597622  
    55Plugin URI: https://planetjon.ca/projects/no-bs-image-slider/
    66Description: For displaying a light-weight image slider
    7 Version: 1.6.1
     7Version: 1.7.0
    88Requires at least: 4.7
    9 Tested up to: 5.7
     9Tested up to: 5.8.1
    1010Requires PHP: 5.4
    1111Author: Jonathan Weatherhead
    … …  
    2626    $sliderName = $args['name'] ?? '';
    2727    $sliderDescription = $args['description'] ?? '';
    28     $slideDuration = $args['slideDuration'] ?: default_slide_duration;
    2928    $slideCount = count( $slides );
    3029    $showCounter = filter_var( $args['showCounter'], FILTER_VALIDATE_BOOLEAN );
     30    $slideDuration = filter_var( $args['slideDuration'], FILTER_VALIDATE_INT, [
     31        'options' => [ 'default' => default_slide_duration, 'min_range' => 1 ]
     32    ] );
    3133
    3234    $sliderKeyframes = '';
    … …  
    6466    }
    6567
    66     $sliderAria = [ 'aria-role="region"', 'aria-roledescription="carousel"' ];
     68    $sliderAria = ['aria-role="region"', 'aria-roledescription="carousel"'];
    6769    if( $sliderDescription ) {
    6870        $sliderAria []= sprintf( 'aria-label="%s"', $sliderDescription );
    … …  
    8688        $aria = [
    8789            'role="group"',
    88             'aria-roledescription="slide"',
    89             sprintf( 'aria-label="%d of %d"', $counter,$slideCount )
     90            'aria-roledescription="slide"',
     91            sprintf( 'aria-label="%d of %d"', $counter,$slideCount )
    9092        ];
    9193
    … …  
    102104        'slider' => '',
    103105        'duration' => default_slide_duration,
    104         'showcounter' => 'no'
     106        'showcounter' => 'no',
     107        'lazy' => 'no'
    105108    ] );
    106109
    … …  
    110113    $slideDuration = $params['duration'];
    111114    $showCounter = $params['showcounter'];
     115    $loadingAttribute = filter_var( $params['lazy'], FILTER_VALIDATE_BOOLEAN ) ? 'lazy' : false;
    112116
    113117    $sliderInfo = get_term_by( 'slug', $slider, 'no_bs_image_slider' );
    … …  
    138142
    139143    $slideDeck = [];
     144    $imgAttributes = [ 'loading' => $loadingAttribute ];
    140145    foreach( $slides as $idx => $slide ) {
    141146        $slideDeck []= [
    142147            'id' => $slide->ID,
    143             'img' => get_the_post_thumbnail( $slide, 'full' ),
     148            'img' => get_the_post_thumbnail( $slide, 'full', $imgAttributes ),
    144149            'url' => get_post_meta( $slide->ID, 'nbisl', true ),
    145150            'title' => get_the_title( $slide->ID ),
    … …  
    149154
    150155    wp_enqueue_style( 'no-bs-image-slider', plugins_url( 'no-bs-image-slider/style.css' ), [], null );
    151     renderSLider(
     156    renderSlider(
    152157        $slider,
    153158        $slideDeck,
    … …  
    158163            'stylesCallback' => function( $slider ) {
    159164                do_action( 'nbis_additional_styles', $slider );
     165                do_action( 'nbis_additional_styles_' . $slider, $slider );
    160166            }
    161167        ]
    … …  
    184190        echo $args['before_widget'];
    185191
    186         if ( $instance['title'] ) {
    187             echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
    188         }
    189 
    190192        $slider = $instance['nbis'];
    191193        $slideDuration = $instance['nbisd'];
    192194        $showCounter = $instance['nbisc'];
     195        $lazyImages = $instance['nbisl'];
    193196
    194197        showSlider( [
    195             "slider" => $slider,
    196             "duration" => $slideDuration,
    197             "showcounter" => $showCounter
     198            'slider' => $slider,
     199            'duration' => $slideDuration,
     200            'showcounter' => $showCounter,
     201            'lazy' => $lazyImages
    198202        ] );
    199203
    … …  
    210214        $slideDuration = $instance['nbisd'] ?: default_slide_duration;
    211215        $showCounter = $instance['nbisc'];
     216        $lazyImages = $instance['nbisl'];
    212217
    213218        printf(
    … …  
    247252            checked( $showCounter, 'yes', false ),
    248253        );
     254
     255        printf(
     256            '<p><label>%s <input type="checkbox" id="%s" name="%s" value="%s" %s /></label></p>',
     257            __( 'Lazy load images?', 'no-bs-image-slider' ),
     258            esc_attr( $this->get_field_id( 'nbisl' ) ),
     259            esc_attr( $this->get_field_name( 'nbisl' ) ),
     260            'yes',
     261            checked( $lazyImages, 'yes', false ),
     262        );
    249263    }
    250264
    251265    public function update( $new, $old ) {
    252266        $instance = [
    253             'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : '',
    254             'nbisd' => !empty( $new['nbisd'] ) && $new['nbisd'] >= 1 ? sanitize_text_field( $new['nbisd'] ) : $old['nbisd'],
    255             'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : $old['nbisc']
     267            'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : false,
     268            'nbisd' => !empty( $new['nbisd'] ) ? sanitize_text_field( $new['nbisd'] ) : false,
     269            'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : false,
     270            'nbisl' => !empty( $new['nbisl'] ) ? sanitize_text_field( $new['nbisl'] ) : false
    256271        ];
    257272
    … …  
    261276
    262277function createSlidesType() {
    263     register_post_type( 'no_bs_image_slide',
    264         [
    265             'labels' => [
    266                 'name' => __( 'Image Slides' ),
    267                 'singular_name' => __( 'Image Slide' )
    268             ],
    269             'public' => false,
    270             'show_ui' => true,
    271             'supports' => ['title', 'thumbnail', 'excerpt'],
    272             'register_meta_box_cb' => function( WP_Post $post ) {
    273                 add_meta_box(
    274                     'image_slide_meta',
    275                     'Image Slider Meta',
    276                     function( WP_Post $post, Array $metabox ) {
    277                         $title_field = get_post_meta( $post->ID, 'nbisl', true );
    278                         $outline = sprintf('<label>%s <input type="url" name="nbisl" value="%s"/></label>', esc_html__( 'Link', 'no-bs-image-slider' ), esc_attr( $title_field ) );
    279 
    280                         echo $outline;
    281                     }
    282                 );
    283             }
    284         ]
    285     );
     278    $slideType = [
     279        'labels' => [
     280            'name' => __( 'Image Slides' ),
     281            'singular_name' => __( 'Image Slide' )
     282        ],
     283        'public' => false,
     284        'show_ui' => true,
     285        'supports' => ['title', 'thumbnail', 'excerpt'],
     286        'register_meta_box_cb' => function( WP_Post $post ) {
     287            add_meta_box(
     288                'image_slide_meta',
     289                'Image Slider Meta',
     290                function( WP_Post $post, Array $metabox ) {
     291                    $title_field = get_post_meta( $post->ID, 'nbisl', true );
     292                    $outline = sprintf('<label>%s <input type="url" name="nbisl" value="%s"/></label>', esc_html__( 'Link', 'no-bs-image-slider' ), esc_attr( $title_field ) );
     293
     294                    echo $outline;
     295                }
     296            );
     297        }
     298    ];
     299
     300    register_post_type( 'no_bs_image_slide', $slideType );
    286301}
    287302
    … …  
    299314
    300315function createSliderTaxonomy() {
    301     register_taxonomy(
    302         'no_bs_image_slider',
    303         null,
    304         [
    305             'public' => false,
    306             'show_ui' => true,
    307             'labels' => [
    308                 'name' => __( 'Image Sliders' ),
    309                 'singular_name' => __( 'Image Slider' )
    310             ]
     316    $sliderTaxonomy = [
     317        'public' => false,
     318        'show_ui' => true,
     319        'labels' => [
     320            'name' => __( 'Image Sliders' ),
     321            'singular_name' => __( 'Image Slider' )
    311322        ]
    312     );
    313 
     323    ];
     324
     325    register_taxonomy( 'no_bs_image_slider', null, $sliderTaxonomy );
    314326    register_taxonomy_for_object_type( 'no_bs_image_slider', 'no_bs_image_slide' );
    315327}

  • no-bs-image-slider/trunk/readme.txt

    r2522377 r2597622  
    44Tags: carousel, slideshow, responsive, accessible
    55Requires at least: 4.7
    6 Tested up to: 5.7
     6Tested up to: 5.8.1
    77Requires PHP: 5.4
    88Stable tag: trunk
    … …  
    29293. Use the No BS Image Slider widget to configure which slider you want displayed, and the duration of each slide.
    3030
     31A great [rundown of the plugin](https://planetjon.ca/4778/making-an-image-carousel-with-no-bs-image-slider "Making an image carousel with No BS Image Slider") is available on the Planetjon blog.
     32
     33=== Shortcode ===
     34
     35To manually insert a slider, use the shortcode [nbis].
     36You must provide at minimum the slider slug.
     37
     38
     39The shortcode attributes are
     40
     41* slider="slug"
     42* duration="number" (default 5)
     43* showcounter="yes|no" (default no)
     44* lazy="yes|no" (default no)
     45
     46=== Widget ===
     47
     48A widget that exposes all of the above options is available.
     49
    3150== Frequently Asked Questions ==
    3251
    … …  
    3756The CSS weighs in at under 2 kilobytes, blowing away all of the major slider plugins by a mile.
    3857
     58= How can I set the order of slides in a slider =
     59
     60While there are no admin options for this, it can be done by using custom CSS.
     61Sliders are ID'd with `no-bs-image-slider-<sliderId>` and slides are ID'd with `nbis-slide-<slideId>`.
     62
     63
     64An approach would be to style the slider as Flexbox, and set the order on the slides.
     65
     66    #no-bs-image-slider-123 {
     67        display: flex;
     68    }
     69
     70    #no-bs-image-slider-123 #nbis-slide-1 {
     71        order: 1;
     72    }
     73
     74    #no-bs-image-slider-123 #nbis-slide-2 {
     75        order: 0;
     76    }
     77
    3978== Changelog ==
     79
     80= 1.7.0 =
     81* Images loaded eagerly be default.
     82* Image lazy loading parameter.
    4083
    4184= 1.6.1 =

  • no-bs-image-slider/trunk/style.css

    r2522361 r2597622  
    11.no-bs-image-slider
    22{
    3     display: block;
    4     position: relative;
    5     overflow: hidden;
    6     counter-reset: nbis-slides;
     3    display: block;
     4    position: relative;
     5    overflow: hidden;
     6    counter-reset: nbis-slides;
    77}
    88
    99.no-bs-image-slider:hover::before
    1010{
    11     content: "\23F8";
    12     position: absolute;
    13     padding: 0.25em 0.5em;
    14     background-color: black;
    15     z-index: 1;
    16     color: white;
    17     font-size: 1.5em;
     11    content: "\23F8";
     12    position: absolute;
     13    padding: 0.25em 0.5em;
     14    background-color: black;
     15    z-index: 1;
     16    color: white;
     17    font-size: 1.5em;
    1818}
    1919
    2020.no-bs-image-slider .scrollpane
    2121{
    22     display: flex;
    23     animation-direction: normal;
    24     animation-timing-function: ease;
    25     animation-iteration-count: infinite;
     22    display: flex;
     23    animation-direction: normal;
     24    animation-timing-function: ease;
     25    animation-iteration-count: infinite;
    2626}
    2727
    2828.no-bs-image-slider .scrollpane:hover
    2929{
    30     animation-play-state: paused;
     30    animation-play-state: paused;
    3131}
    3232
    33 .no-bs-image-slider .nbis-slide
     33.nbis-slide
    3434{
    35     display: block;
    36     flex-shrink: 0;
    37     box-sizing: border-box;
    38     width: 100%;
    39     margin: 0;
    40     padding: 0;
    41     counter-increment: nbis-slide;
    42     counter-reset: nbis-slides var(--slide-count);
     35    display: block;
     36    flex-shrink: 0;
     37    box-sizing: border-box;
     38    width: 100%;
     39    margin: 0;
     40    padding: 0;
     41    counter-increment: nbis-slide;
     42    counter-reset: nbis-slides var(--slide-count);
    4343}
    4444
    45 .no-bs-image-slider.show-counter .nbis-slide::before
     45.show-counter .nbis-slide::before
    4646{
    4747
    48     content: counter(nbis-slide) " / " counter(nbis-slides);
    49     display: block;
    50     position: absolute;
    51     top: 0px;
    52     width: 100%;
    53     text-align: center;
     48    content: counter(nbis-slide) " / " counter(nbis-slides);
     49    display: block;
     50    position: absolute;
     51    top: 0px;
     52    width: 100%;
     53    text-align: center;
    5454}
    5555
    56 .no-bs-image-slider .nbis-slide a
     56.nbis-slide a
    5757{
    58     display: block;
    59     position: absolute;
    60     width: 100%;
    61     height: 100%;
    62     z-index: 1;
     58    display: block;
     59    position: absolute;
     60    width: 100%;
     61    height: 100%;
     62    z-index: 1;
    6363}
    6464
    65 .no-bs-image-slider .nbis-slide img
     65.nbis-slide img
    6666{
    67     width: 100%;
    68     height: auto;
     67    width: 100%;
     68    height: auto;
    6969}
    7070
    71 .no-bs-image-slider .nbis-slide figcaption
     71.nbis-slide figcaption
    7272{
    73     display: block;
    74     position: absolute;
    75     bottom: 0;
    76     width: 100%;
     73    display: block;
     74    position: absolute;
     75    bottom: 0;
     76    width: 100%;
    7777}
    7878
    79 .no-bs-image-slider .nbis-slide figcaption:empty
     79.nbis-slide figcaption:empty
    8080{
    81     display: none;
     81    display: none;
    8282}
Note: See TracChangeset for help on using the changeset viewer.