merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic Lazy Loading For Advertisement Images

This commit is contained in:
devansh bawari 2021-08-03 18:11:35 +05:30
parent e3cb36a5b4
commit 7a9b9bb2a6
3 changed files with 80 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-four.blade.php
View File

@ -1,6 +1,7 @@
@php
$isRendered = false;
$advertisementFour = null;
$isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
@endphp
@if ($velocityMetaData && $velocityMetaData->advertisement)
@ -21,27 +22,39 @@
<div class="row">
@if ( isset($advertisementFour[0]))
<a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
<img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[0]) }}" alt="" />
<img
class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[0]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementFour[0]) }}" alt="" />
</a>
@endif
<div class="col-lg-4 col-12 offers-ct-panel">
@if ( isset($advertisementFour[1]))
<a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
<img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/storage/' . $advertisementFour[1]) }}" alt="" />
<img
class="col-12 offers-ct-top {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[1]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementFour[1]) }}" alt="" />
</a>
@endif
@if ( isset($advertisementFour[2]))
<a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
<img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/storage/' . $advertisementFour[2]) }}" alt="" />
<img
class="col-12 offers-ct-bottom {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[2]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementFour[2]) }}" alt="" />
</a>
@endif
</div>
@if ( isset($advertisementFour[3]))
<a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
<img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[3]) }}" alt="" />
<img
class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementFour[3]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementFour[3]) }}" alt="" />
</a>
@endif
</div>
@ -53,23 +66,35 @@
<div class="container-fluid advertisement-four-container">
<div class="row">
<div class="col-lg-4 col-12 advertisement-container-block no-padding">
<a @if (isset($one)) href="{{ $one }}" @endif aria-label="Advertisement">
<img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" alt="" />
<a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
<img
class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" alt="" />
</a>
</div>
<div class="col-lg-4 col-12 advertisement-container-block offers-ct-panel">
<a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
<img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" alt="" />
<img
class="col-12 offers-ct-top {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" alt="" />
</a>
<a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
<img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" alt="" />
<img
class="col-12 offers-ct-bottom {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" alt="" />
</a>
</div>
<div class="col-lg-4 col-12 advertisement-container-block no-padding">
<a @if (isset($four)) href="{{ $four }}" @endif aria-label="Advertisement">
<img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" alt="" />
<a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
<img
class="col-12 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" alt="" />
</a>
</div>
</div>

31
packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-three.blade.php
View File

@ -1,6 +1,7 @@
@php
$isRendered = false;
$advertisementThree = null;
$isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
@endphp
@if ($velocityMetaData && $velocityMetaData->advertisement)
@ -21,19 +22,28 @@
<div class="row">
@if ( isset($advertisementThree[0]))
<a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
<img data-src="{{ asset('/storage/' . $advertisementThree[0]) }}" class="full-width lazyload" alt="" />
<img
class="full-width {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[0]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementThree[0]) }}" alt="" />
</a>
@endif
<div class="col-lg-6 col-md-12 second-panel">
@if ( isset($advertisementThree[1]))
<a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
<img data-src="{{ asset('/storage/' . $advertisementThree[1]) }}" class="col-12 pr0 lazyload" alt="" />
<img
class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[1]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementThree[1]) }}" alt="" />
</a>
@endif
@if ( isset($advertisementThree[2]))
<a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
<img data-src="{{ asset('/storage/' . $advertisementThree[2]) }}" class="col-12 pr0 lazyload" alt="" />
<img
class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementThree[2]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementThree[2]) }}" alt="" />
</a>
@endif
</div>
@ -46,15 +56,24 @@
<div class="container-fluid advertisement-three-container">
<div class="row">
<a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
<img data-src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" class="full-width lazyload" alt="" />
<img
class="full-width {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" alt="" />
</a>
<div class="col-lg-6 col-md-12 second-panel">
<a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
<img data-src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" class="col-12 pr0 lazyload" alt="" />
<img
class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" alt="" />
</a>
<a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
<img data-src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" class="col-12 pr0 lazyload" alt="" />
<img
class="col-12 pr0 {{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" alt="" />
</a>
</div>
</div>

21
packages/Webkul/Velocity/src/Resources/views/shop/home/advertisements/advertisement-two.blade.php
View File

@ -1,6 +1,7 @@
@php
$isRendered = false;
$advertisementTwo = null;
$isLazyLoad = ! isset($lazyload) ? true : ( $lazyload ? true : false );
@endphp
@if ($velocityMetaData && $velocityMetaData->advertisement)
@ -21,13 +22,19 @@
<div class="row">
@if ( isset($advertisementTwo[0]))
<a class="col-lg-9 col-md-12 no-padding">
<img data-src="{{ asset('/storage/' . $advertisementTwo[0]) }}" class="lazyload" alt="" />
<img
class="{{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementTwo[0]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementTwo[0]) }}" alt="" />
</a>
@endif
@if ( isset($advertisementTwo[1]))
<a class="col-lg-3 col-md-12 pr0">
<img data-src="{{ asset('/storage/' . $advertisementTwo[1]) }}" class="lazyload" alt="" />
<img
class="{{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/storage/' . $advertisementTwo[1]) }}" @endif
data-src="{{ asset('/storage/' . $advertisementTwo[1]) }}" alt="" />
</a>
@endif
</div>
@ -39,11 +46,17 @@
<div class="container-fluid advertisement-two-container">
<div class="row">
<a class="col-lg-9 col-md-12 no-padding">
<img data-src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" class="lazyload" alt="" />
<img
class="{{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" alt="" />
</a>
<a class="col-lg-3 col-md-12 pr0">
<img data-src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" class="lazyload" alt="" />
<img
class="{{ $isLazyLoad ? 'lazyload' : '' }}"
@if (! $isLazyLoad) src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" @endif
data-src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" alt="" />
</a>
</div>
</div>