Enhancement For Banner Module

Enhancement to apply video banner

Directory

File	Folder Link
M - Banner.php	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\app\models
V - all files	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\app\views\banner
C - BannerController.php	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\app\controllers
backend.php	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\app\layouts
Backend CSS: style.css	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\admin\themes\black_and_white
Backend Javascript	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\wolf\admin\javascript
Fronted CSS: default.css	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\public\themes\rckuc\css
Fronted CSS: nivo-slider.css	\\SYNAS\Allan\DOCUMENTATION\Component\Enhancement For Banner Module\rckuc\public\themes\rckuc\css\banner

Step 1

Update: Files (code compare and update)
File: views -> banner -> index.php

I have added some new function like:

dataTable
Duplicate
Bulk action
Sweetalert
ect...

File: views -> banner -> sidebar.php

I have remove the popup for upload banner and moved into form.php

File: views -> banner -> view.php change to form.php

Add/Edit form here

File: BannerController.php

Added funtion for image and video upload

File: models -> Banner.php

Step 2

Update: style.css
Insert:

#banner_image,
#banner_video {
  display: none;
}

#banner_image,
#banner_video {
  display: none;
}

Step 3

Update: backend.php

Insert script files in <head> section,

In video_handler.js, there is a extra function to save video thumbnail as banner image, adjust the width and height according to your banner size in function -> resizePreviewVideo():

canvas.width = 1900;
canvas.height = 550;

<head>
...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/banner.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/img_handler.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/video_handler.js"></script>
...
</head>

<head>
...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/banner.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/img_handler.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/video_handler.js"></script>
...
</head>

Step 4

Update Database: wolf_banner

I have removed 'filename' and added:

media_type
banner_image
banner_video

ALTER TABLE wolf_banner
ADD COLUMN `media_type` varchar(100) CHARACTER SET utf8 DEFAULT NULL AFTER `redirection`,
ADD COLUMN `banner_image` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL AFTER `media_type`,
ADD COLUMN `banner_video` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL AFTER `banner_image`;

ALTER TABLE wolf_banner
ADD COLUMN `media_type` varchar(100) CHARACTER SET utf8 DEFAULT NULL AFTER `redirection`,
ADD COLUMN `banner_image` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL AFTER `media_type`,
ADD COLUMN `banner_video` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL AFTER `banner_image`;

Step 5

Update Snippet: main-banner (code compare and update)

<div class="slider-wrapper theme-thumb">
    <div id="slider" class="nivoSlider">
        <?php
          $oBanner = new Banner();
          $banners = $oBanner->findAllFrom("Banner","type='home' AND status=1 order by sequence,id desc");
          foreach($banners as $banner){
             if ($banner->media_type == 'image' && !empty($banner->banner_image)) {
                echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" width="100%" />';
            } else {
                echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" title="#video'.$banner->id.'"/>';
            }
          }       
        ?>   
    </div>
    </div>
        <?php
            foreach($banners as $banner){
                if ($banner->media_type == 'video' && !empty($banner->banner_video)) {
                    echo '<div id="video'.$banner->id.'" class="nivo-html-caption" style="display:none;">';
                    echo '<video src="'.URL_PUBLIC.'public/banner/banner_video/'.$banner->id.'/'.$banner->banner_video.'" autoplay muted loop playsinline width="100%"></video>';
                    echo '</div>';
                }
            }
        ?>
    <div style="clear:both;"></div>

<div class="slider-wrapper theme-thumb">
    <div id="slider" class="nivoSlider">
        <?php
          $oBanner = new Banner();
          $banners = $oBanner->findAllFrom("Banner","type='home' AND status=1 order by sequence,id desc");
          foreach($banners as $banner){
             if ($banner->media_type == 'image' && !empty($banner->banner_image)) {
                echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" width="100%" />';
            } else {
                echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" title="#video'.$banner->id.'"/>';
            }
          }       
        ?>   
    </div>
    </div>
        <?php
            foreach($banners as $banner){
                if ($banner->media_type == 'video' && !empty($banner->banner_video)) {
                    echo '<div id="video'.$banner->id.'" class="nivo-html-caption" style="display:none;">';
                    echo '<video src="'.URL_PUBLIC.'public/banner/banner_video/'.$banner->id.'/'.$banner->banner_video.'" autoplay muted loop playsinline width="100%"></video>';
                    echo '</div>';
                }
            }
        ?>
    <div style="clear:both;"></div>

Step 6

Update Snippet: inner-banner (code compare and update)

    <?php
    $oBanner = new Banner();
    $banners = $oBanner->findAllFrom("Banner","type='inner' AND status=1 AND page_id=".$this->id." order by sequence,id");
    $count = count($banners);
          
    if ($count == 0){
        // load inner page's default banner
	    $banners = $oBanner->findAllFrom("Banner","type='inner' AND page_id IS NULL AND status=1 order by sequence,id");
        $count = count($banners);
		
		if ($count == 0) {
			$banners = $oBanner->findAllFrom("Banner","type='home' AND status=1 order by sequence,id");
			$count = count($banners);
		}
    }
	if ($count > 0) { ?> 
    <div class="slider-wrapper theme-thumb">
            <div id="slider" class="nivoSlider">
            <?php
                foreach($banners as $banner){
                    if ($banner->media_type == 'image' && !empty($banner->banner_image)) {
                        echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" width="100%" />';
                    } else {
                        echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" title="#video'.$banner->id.'"/>';
                    }
                }       
            ?>    
            </div>
            </div>
            <?php
                foreach($banners as $banner){
                    if ($banner->media_type == 'video' && !empty($banner->banner_video)) {
                        echo '<div id="video'.$banner->id.'" class="nivo-html-caption" style="display:none;">';
                        echo '<video src="'.URL_PUBLIC.'public/banner/banner_video/'.$banner->id.'/'.$banner->banner_video.'" autoplay muted loop playsinline width="100%"></video>';
                        echo '</div>';
                    }
                }
            ?>
<?php } 
?>

    <?php
    $oBanner = new Banner();
    $banners = $oBanner->findAllFrom("Banner","type='inner' AND status=1 AND page_id=".$this->id." order by sequence,id");
    $count = count($banners);
          
    if ($count == 0){
        // load inner page's default banner
	    $banners = $oBanner->findAllFrom("Banner","type='inner' AND page_id IS NULL AND status=1 order by sequence,id");
        $count = count($banners);
		
		if ($count == 0) {
			$banners = $oBanner->findAllFrom("Banner","type='home' AND status=1 order by sequence,id");
			$count = count($banners);
		}
    }
	if ($count > 0) { ?> 
    <div class="slider-wrapper theme-thumb">
            <div id="slider" class="nivoSlider">
            <?php
                foreach($banners as $banner){
                    if ($banner->media_type == 'image' && !empty($banner->banner_image)) {
                        echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" width="100%" />';
                    } else {
                        echo '<img src="'.URL_PUBLIC.'public/banner/banner_image/'.$banner->id.'/'.$banner->banner_image.'" title="#video'.$banner->id.'"/>';
                    }
                }       
            ?>    
            </div>
            </div>
            <?php
                foreach($banners as $banner){
                    if ($banner->media_type == 'video' && !empty($banner->banner_video)) {
                        echo '<div id="video'.$banner->id.'" class="nivo-html-caption" style="display:none;">';
                        echo '<video src="'.URL_PUBLIC.'public/banner/banner_video/'.$banner->id.'/'.$banner->banner_video.'" autoplay muted loop playsinline width="100%"></video>';
                        echo '</div>';
                    }
                }
            ?>
<?php } 
?>

Step 7

Update: default.css

Insert:

/* Banner Video */
#slider > img,
#slider > a,
.nivo-slice {
	z-index: -1 !important;
}

.nivo-caption {
	padding: 0 !important;
}

/* Banner Video */
#slider > img,
#slider > a,
.nivo-slice {
	z-index: -1 !important;
}

.nivo-caption {
	padding: 0 !important;
}

Step 8

Update: nivo-slider.css
Command out these 2 line to make video visible

/* body.inner .nivoSlider { position: relative !important; }
body.inner .nivo-main-image { position: relative !important; } */

/* body.inner .nivoSlider { position: relative !important; }
body.inner .nivo-main-image { position: relative !important; } */

Step 9

Copy and past all files to your project folder

Component

Module