krasi1

https://www.joomunited.com/wordpress-products/wp-media-folder
it stored the images into phisical folders


Any pointers on where to look for fixing this in the plugin?

confirmed, the issue was with the media folder plugin, can close it

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?

yes that makes sense.

I will install another the heic support plugin to add this functionality.

Thanks for the prompt answers

I am willing to fund the addition of this functionality

• This reply was modified 1 year ago by krasi1.

I see

direct support of heic is not important rather just to allow uploading heic images.
Converting them to jpeg and applying the original logic would work perfectly fine

to allow uploading heic images which are auto-converted to webp

gentle reminder

<!-- 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

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

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.

thanks will test soon.

for the actual swiper image slide

I don’t know when it happens, these are lines from the error file