Znane problemy

Porady i znane problemy

Poniżej znajdują się różne wątki dotyczące kluczowych porad odnośnie używania tego silnika jak i znane problemy, na które można się natkąć chociażby wynikające z różnic wersji PHP, bibliotek na różnych serwerach.

Używanie składni HEREDOC

  
 
$footer_html .= <<<HTML
    <div class="
    page-layout   
    page-layout-size-$settings_maxwidth_out_footer     
    page-layout--pos-relative 
    ">
        <div class="
        page-layout   
        page-layout-size-$settings_maxwidth_footer
        ">
            jakiś tekst
    </div>
HTML;

Absolutnie KLUCZOWYM warunkiem to stosowanie '$footer_html .= <<<HTML oraz HTML; w taki sposób, aby nigdy nie miały przed sobą żadnego pustego znaku. Czyli przykład na górze jest poprawny, na dole jest NIEPOPRAWNY. Oczywiście w tym przypadku $footer_html .= <<<HTML , zmienna może być nazwana dowolnie np. $html = <<<HTML .

Pamiętaj że początek wstawiania do zmiennej musi się zaczynać od $html = <<<HTML, a jeżeli kod jest podzielony na fragmenty, to ciąg dalszy dodajemy z użyciem kropki np. $html .= <<<HTML. To tak na wszelki wypadek.

  
 
$footer_html .= <<<HTML
    <div class="
    page-layout   
    page-layout-size-$settings_maxwidth_out_footer     
    page-layout--pos-relative 
    ">
        <div class="
        page-layout   
        page-layout-size-$settings_maxwidth_footer
        ">
            jakiś tekst
    </div>
        HTML;

Slider standard - przykładowy kod dla DEV

To są bardziej informacje dla Sebastian.

  
 if($module->list): 
 

// ------------------------------------------------------
// PRZY SLIDERZE EDYTUJEMY:
// --> "not_lazy_loading"                  => 1,
// --> "images"                            => array(
    // --> "img_src_size_width_default"    => $settingsData_img_src_size_width_default,
    // --> "img_sizes_matrix"              => $settingsData_img_sizes_matrix,
    // --> "img_aspect_ratios_matrix"      => $settingsData_img_aspect_ratios_matrix
// --> ),
// --> "layout_items_qty"
// --> "layout_slider_options"

// --> pozostałe są bo są:
// ------------------------------------------------------

$settingsData_img_src_size_width_default    = 1240;
$settingsData_img_sizes_matrix              = [
    1280 => [1280, 2560],
    768 => [1300, 2600],
    480 => [768, 1536],
    0   => [480] // Domyślnie stosowany najmniejszy
];
// $settingsData_img_aspect_ratios_matrix      = [
//     1280 => [16, 7],
//     768 => [16, 7],
//     480 => [4, 3],
//     0   => [1, 1] // Domyślne proporcje - aspect ratio
// ];
$settingsData_img_aspect_ratios_matrix      = [
    1280 => [16, 7],
    768 => [16, 7],
    480 => [16, 7],
    0   => [16, 7] // Domyślne proporcje - aspect ratio
];

$settingsDataMap = array(
    "not_lazy_loading"                  => 1,
    "images"                            => array(
        "img_src_size_width_default"    => $settingsData_img_src_size_width_default,
        "img_sizes_matrix"              => $settingsData_img_sizes_matrix,
        "img_aspect_ratios_matrix"      => $settingsData_img_aspect_ratios_matrix
    ),
    "layout"                            => array(
        "layout_items_qty"              => 5,
            // clasy animowane:  (pamiętaj że nie każda animacja wygląda dobrze w każdym typie slidera)
            // --> slider-swiper--slide-anim--lb-rt
            // --> slider-swiper--slide-anim--lb-lt 
            // --> slider-swiper--slide-anim--zoom
            // --> slider-swiper--slide-anim--zoom-inverse
        "layout_slider_anim_css"        => 'slider-swiper--slide-anim--lb-rt',     // Animacje CSS
        "layout_slider_date"            => false,     // DATA - widoczna - true, niewidoczna - false
        "layout_slider_date_icon"       => false,     // DATA IKONA - widoczna - true, niewidoczna - false - to jest paramtetr na kiedyś (w skrajnych przypadkach)
        "layout_slider_category"        => false,     // KATEGORIA - widoczna - true, niewidoczna - false
        "layout_slider_content"         => false,     // CONTENT - OPIS - widoczna - true, niewidoczna - false
        "layout_slider_btn"             => false,     // BUTTON - widoczna - true, niewidoczna - false
        "layout_slider_progress_line"   => true,
        "layout_slider_overflow"        => false,      // TRUE - hidden
        "layout_slider_paggination"     => false, 
        "layout_slider_btns_lr_on"      => true,      // czy włączone przyciski - LEFT - RIGHT --> wtedy w kodzie PHP je usuwamy jeżeli tutaj jest na FALSE
        "layout_slider_duration_time"   => 5, 
        "layout_slider_options"         => '{
                                                "slidesPerView":1,
                                                "spaceBetween":16,
                                                "direction":"horizontal",
                                                "zoom":true,
                                                "grabCursor":true,
                                                "lazy":true,
                                                "autoplay":{
                                                    "delay":9000,
                                                    "disableOnInteraction":false
                                                },
                                                
                                                "centeredSlides":false,
                                                

            "effect":"cards",
            "cardsEffect":{
                "perSlideOffset":8,
                "perSlideRotate":2,
                "rotate":true,
                "slideShadows":true
            },

                                                "breakpoints":{
                                                    "768":{
                                                        "spaceBetween":32
                                                    }
                                                }
                                            }'
                                            //"autoplay": false,
    )
);

$slides_qty = 1;
foreach($module->list as $v){
    $slides_qty++;
}
if ($slides_qty > 0){
    // --------------------------------------------------------------------------------
    // BANNER - SLIDER - MEDIUM - PROGRESS - standard
    // najlepiej używać go w umiarkowanej szerokości, np. szerokości kontentu
    // --------------------------------------------------------------------------------
    // plik CSS:    ui-cmp-slider-swiper--v-standard-1.css
    // plik JS:     scripts-slider-swiper-init-univ.js
    echo RenderTemplateSliderSwiperModule_NELAA_Banners_v6($module, $source_type, $settingsDataMap);

    // UWAGA!
    // NELAA - znaczy skrót od News, Events, Locals, Announcements (ogłoszenia), Archive... dodatkowo Gallery
    // NELAA_Banners - znaczy że to działa jak NELAA ale jest typowo dla modułu Banery
}

 endif; 


 
/*
--------------------------------------------
FLIP Y - SUPER

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [180, 0, 0]
                },
                "next": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [-180, 0, 0]
                }
            },
            
--------------------------------------------          
CARDS

            "effect":"cards",
            "cardsEffect":{
                "perSlideOffset":8,
                "perSlideRotate":2,
                "rotate":true,
                "slideShadows":true
            },

--------------------------------------------    

*/

    // POMOC
    // --------------------------------------------------------------------
    // USTAWIENIA "layout_slider_options"         => '{
    /*

            "slidesPerView": 1,
            "centeredSlides":true,
            "slidesPerView": "auto",
            "spaceBetween": 30,
            "speed": 1000,
            "loop": true,
            "autoplay": {
                "delay": 5000,
                "disableOnInteraction": false
            },
            "direction": "horizontal",
            "zoom": true,
            "autoHeight": true,
            "grabCursor": true,
            "lazy": true,
            
            //----------------------------

            "effect":"coverflow",
            "coverflowEffect":{
                "rotate":30,
                "stretch":0,
                "scale":1,
                "depth":100,
                "modifier":1,
                "slideShadows":true
            },

            //----------------------------

            "effect":"cards",
            "cardsEffect":{
                "perSlideOffset":8,
                "perSlideRotate":2,
                "rotate":true,
                "slideShadows":true
            },

            //----------------------------
            // "effect":"flip", --->  tutaj jest pewien problem na niektórych sliderach z z-indexem osobnych slidów 
            //----------------------------

            "effect":"flip",
            "flipEffect":{
                "limitRotation":true,
                "slideShadows":false
            },
            
            //----------------------------

            "effect": "fade",
            "fadeEffect": {
                "crossFade": true
            },
            
            //----------------------------

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": [0, 0, -400]
                },
                "next": {
                    "translate": ["100%", 0, 0]
                }
            },

            // https://codesandbox.io/p/sandbox/6nhcfr?file=%2Findex.html%3A255%2C1-268%2C9
            // https://codesandbox.io/p/sandbox/6nhcfr?file=%2Findex.html%3A255%2C1-268%2C9
            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-120%", 0, -500]
                },
                "next": {
                    "shadow": true,
                    "translate": ["120%", 0, -500]
                }
            },

            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-20%", 0, -1]
                },
                "next": {
                    "translate": ["100%", 0, 0]
                }
            },

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [180, 0, 0]
                },
                "next": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [-180, 0, 0]
                }
            },

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-125%", 0, -800],
                    "rotate": [0, 0, -90]
                },
                "next": {
                    "shadow": true,
                    "translate": ["125%", 0, -800],
                    "rotate": [0, 0, 90]
                }
            },

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "origin": "left center",
                    "translate": ["-5%", 0, -200],
                    "rotate": [0, 100, 0]
                },
                "next": {
                    "origin": "right center",
                    "translate": ["5%", 0, -200],
                    "rotate": [0, -100, 0]
                }
            },






            //----------------------------

            "centeredSlides: true,
            "slidesPerView: "auto",
            "effect: "coverflow",
            "coverflowEffect: {
                "rotate": 50,
                "stretch": 0,
                "scale": 1,
                "depth": 100,
                "modifier": 1,
                "slideShadows": true
            },

            //----------------------------

            "effect": "cube",
            "cubeEffect": {
                "shadow": true,
                "slideShadows": true,
                "shadowOffset": 20,
                "shadowScale": 0.94
            },

            //----------------------------

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": [0, 0, -400]
                },
                "next": {
                    "translate": ["100%", 0, 0]
                }
            },


            //----------------------------

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-100%", 0, -200]
                },
                "next": {
                    "shadow": true,
                    "translate": ["100%", 0, -200]
                }
            },

            //----------------------------

            "effect": "creative",
            "creativeEffect":{
                "prev": {
                    "shadow": false,
                    "translate": ["-100%", 0, -200]
                },
                "next": {
                    "shadow": false,
                    "translate": ["100%", 0, -200]
                }
            },

            //----------------------------

            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-20%", 0, -1]
                },
                "next": {
                    "shadow": true,
                    "translate": ["40%", 0, 0]
                }
            },

            //----------------------------
            // ROTACJA w osi Y - bardzo płynna - z uwzględniemniem osi Z

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [180, 0, 0]
                },
                "next": {
                    "shadow": true,
                    "translate": [0, 0, -800],
                    "rotate": [-180, 0, 0]
                }
            },

            //----------------------------
            // ROTACJA w osi Y - bardzo płynna -

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "translate": ["-125%", 0, -800],
                    "rotate": [0, 0, -90]
                },
                "next": {
                    "shadow": true,
                    "translate": ["125%", 0, -800],
                    "rotate": [0, 0, 90]
                }
            },

            //----------------------------
            // PRZEKŁADANIE z przekształceniem z uwzględniemniem osi Z

            "effect": "creative",
            "creativeEffect": {
                "prev": {
                    "shadow": true,
                    "origin": "left center",
                    "translate": ["-5%", 0, -200],
                    "rotate": [0, 100, 0]
                },
                "next": {
                    "origin": "right center",
                    "translate": ["5%", 0, -200],
                    "rotate": [0, -100, 0]
                }
            },

            //----------------------------
            //----------------------------

            "zoom": {
                "maxRatio": 15
            },

            //----------------------------

            "thumbs": {
                "swiper": "thumbsSwiper"
            },
            
            //----------------------------

            "breakpoints":{
                "768":{
                    "spaceBetween":32
                }
            }





            "breakpoints": {
                // when window width is >= 320px
                "320": {
                    "slidesPerView": 2,
                    "spaceBetween": 20
                },
                // when window width is >= 480px
                "480": {
                    "slidesPerView": 3,
                    "spaceBetween": 30
                },
                // when window width is >= 640px
                "640": {
                    "slidesPerView": 4,
                    "spaceBetween": 40
                }
            }

            using "ratio" endpoints
            "breakpoints": {
                "@0.75": {
                    "slidesPerView": 2,
                    "spaceBetween": 20
                },
                "@1.00": {
                    "slidesPerView": 3,
                    "spaceBetween": 40
                },
                "@1.50": {
                    "slidesPerView": 4,
                    "spaceBetween": 50
                },
            }
    */

Menu

Znane problemy

Porady i znane problemy

Używanie składni HEREDOC

Slider standard - przykładowy kod dla DEV