Non minified version?

for example in the front end, the data will be structured with short tags, and the php backend will render the html
this would allow more flexibility when rendering the HTML, using global defaults etc.

[swiper]
?? [src, caption, aspect-ratio,object-fit,object-position]
?? [src, caption, aspect-ratio,object-fit,object-position]
?? ....
[/swiper]

for this to work need to modify the non monified UI js

• This reply was modified 1 year, 1 month ago by krasi1.
• This reply was modified 1 year, 1 month ago by krasi1.

just to make sure I understand correctly, you would like to have an ability to create sliders with the help of shortcodes?

yes, to allow more structure and render as much as possible in php

in other words to put only the structured data in the post and to render the html in php

this would allow easier refactoring, setting global defaults etc.

Already have a working version, but the minified version of the editor gui makes the job more difficult

<!-- wp:da/wp-swiper-slides {"tabActive":"slide-2","tabsData":[{"slug":"slide-1"},{"slug":"slide-2"}]} -->
<!-- wp:da/wp-swiper-slide {"slug":"slide-1"} -->
<div class="slide-1"><!-- wp:image {"id":1012,"aspectRatio":"1","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://thesearch.life/staging/wp-content/uploads/posts/kenya-pangolini/IMG-20210928-WA0000-1024x768.jpg" alt="When Pangolins curl up, they look like dragon eggs." class="wp-image-1012" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:da/wp-swiper-slide -->

function render_gutenberg_sliders($attributes, $content) {

    // no swiper when less than 2
    $swiper_id = uniqid('swiper-wrapper-', true);
    
    if(count($attributes['tabsData']) <= 1) {
        return '<div class="single-image swiper-wrapper" id="'.$swiper_id.'">'.$content.'</div>';
    } else if(count($attributes['tabsData']) <= 2) {
        return '<div class="two-images swiper-wrapper" id="'.$swiper_id.'">'.$content.'</div>';
    }
    
    $swiperconfig = array(
        'data-slidesperview'=> 1,
        'data-spacebetween'=> 0,
        'data-navigation'=> "true",
        'data-pagination'=> "true",
        'data-autoplay'=> "false",
        'data-delay'=> 3000,
        'data-speed'=> 500,
        'data-loop'=> "false",
        'data-effect'=> 'fade',
        'data-direction'=> 'horizontal',
        'data-autoheight'=> "true",
        'data-paginationtype'=> 'bullets',
        'data-clickablepagination'=> "true",
    );
    
    $html = '';
    $html .= '<div class="wp-swiper">';
    $html .= '<div class="wp-swiper__wrapper">';
    $html .= '<div class="swiper-container swiper swiper-fade swiper-horizontal swiper-autoheight swiper-watch-progress swiper-backface-hidden" 
    data-swiperconfig="'.htmlspecialchars(json_encode($swiperconfig)).'" ';
    foreach ($swiperconfig as $key=>$item) {
        // dataset
        $html .= $key.'="'.htmlspecialchars($item).'"';
    }
    $html .= '>';
    $html .= '<div class="swiper-wrapper" id="'.$swiper_id.'">';
    $html .= $content;
    $html .= '</div>';
    $html .= '</div>';
    $html .= '<div class="swiper-button-prev"></div>';
    $html .= '<div class="swiper-button-next"></div>';
    $html .= '<div class="swiper-pagination"></div>';
    $html .= '</div>';
    $html .= '</div>';

    return $html; 
}

// each slider render
function render_gutenberg_slider($attributes, $content) {

    // Create a new DOMDocument
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML($content);
    libxml_use_internal_errors(false);

    // Get all the image elements
    $imageElements = $dom->getElementsByTagName('img');

    $image_captions = '';
    $image_bg = '';

    foreach ($imageElements as $img) {
        $alt = $img->getAttribute('alt');
        if (!empty($alt)) {
            $image_captions = '<div class="wp-swiper-caption">' . esc_html($alt) . '</div>';
        }

        $src = $img->getAttribute('src');
        if (!empty($src)) {
            $image_bg = '--bg-image:url(' . esc_html($src) . ')';
        }
    }
    
    $content = $dom->saveHTML();
    
    $html = '';
    
    $html .= '<div class="wp-swiper__slide swiper-slide swiper-slide-visible swiper-slide-active" 
    data-tab="'.$attributes['slug'].'" style="'.$image_bg.'">';
    $html .= '<div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div>';
    $html .= '<div class="wp-swiper__slide-content">';
    $html .= $content;
    $html .= $image_captions;
    $html .= '</div>';
    $html .= '</div>';

    return $html;
}

added some special handling depending on the number of images and also will add lightbox

but this is the idea

gentle reminder

I dont think this feature is possible at the moment. The main reason is this plugin being a gutenberg block. All of the html is generated by JS.

We already refactored it, but working on the non minified version is more challenging.

Is there a reason why you don’t have the non minified version in the repo?