charlestehio/productalert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add (lqip)

Browse Source
This commit is contained in:
Charles T
2023-07-30 16:59:30 +08:00
parent 3acbf03d4e
commit 3812976c0f
22 changed files with 166 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
resources/css/app.css → resources/css/admin-app.css
View File

43
resources/css/front-app.css Normal file
View File

@@ -0,0 +1,43 @@
.lqip-loader {
position: relative;
overflow: hidden;
width: auto;
}
.lqip-loader img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.lqip-loader img,
.lqip-loader img {
display: block;
}
.lqip-loader img {
position: relative;
float: left;
display: block;
}
.lqip-frozen {
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
transform: scale(1.04);
animation: 0.2s ease-in 0.4s 1 forwards lqipFade;
width: 100%;
}
@keyframes lqipFade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

2
resources/sass/front-app.scss
View File

@@ -3,3 +3,5 @@
@import "~bootstrap/scss/bootstrap";
@import "~/bootstrap-icons/font/bootstrap-icons.css";
@import "../css/front-app.css";

18
resources/views/front/country.blade.php
View File

@@ -22,7 +22,14 @@
<a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
class="text-decoration-none">
<div class="card-img-top ratio ratio-16x9">
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->title }}">
<div class="lqip-loader">
<!-- Use the LQIP image with the appropriate URL -->
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
<!-- Use the final JPEG image with the appropriate URL -->
<img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
</div>
</div>
</a>
@@ -78,8 +85,13 @@ class="text-decoration-none">{{ $post->title }}</a>
<a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
class="text-decoration-none">
<div class="img-fluid rounded-start ratio ratio-16x9">
<img src="{{ $post->featured_image }}"
alt="Photo of {{ $post->title }}">
<div class="lqip-loader">
<!-- Use the LQIP image with the appropriate URL -->
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
<!-- Use the final JPEG image with the appropriate URL -->
<img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
</div>
</div>
</a>
</div>

12
resources/views/front/country_all.blade.php
View File

@@ -44,9 +44,15 @@
</div>
<a class="card-img-top"
href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
<img src="{{ $post->featured_image }}"
class="card-img-top rounded-bottom-2 rounded-top-0"
alt="Photo of {{ $post->title }}">
<div class="img-fluid rounded-start ratio ratio-16x9">
<div class="lqip-loader">
<!-- Use the LQIP image with the appropriate URL -->
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
<!-- Use the final JPEG image with the appropriate URL -->
<img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
</div>
</div>
</a>
</div>

12
resources/views/front/country_category.blade.php
View File

@@ -43,9 +43,15 @@
</div>
<a class="card-img-top"
href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
<img src="{{ $post->featured_image }}"
class="card-img-top rounded-bottom-2 rounded-top-0"
alt="Photo of {{ $post->title }}">
<div class="img-fluid rounded-start ratio ratio-16x9">
<div class="lqip-loader">
<!-- Use the LQIP image with the appropriate URL -->
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
<!-- Use the final JPEG image with the appropriate URL -->
<img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
</div>
</div>
</a>
</div>

10
resources/views/front/post.blade.php
View File

@@ -31,7 +31,15 @@
<h2 class="h5">{{ $post->excerpt }}</h2>
</div>
<div class="mb-3">
<img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}" class="img-fluid rounded-3">
<div class="img-fluid rounded-start ratio ratio-16x9">
<div class="lqip-loader">
<!-- Use the LQIP image with the appropriate URL -->
<img class="img-fluid rounded-2" src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
<!-- Use the final JPEG image with the appropriate URL -->
<img class="lqip-frozen img-fluid rounded-2" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
</div>
</div>
</div>
<div class="mb-3">
{!! $post->html_body !!}