Merge pull request 'Optimize screenshots on the main page' (#201) from nevfy/selfprivacy.org:opt-img-scr into master
Reviewed-on: https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org/pulls/201 Reviewed-by: Inex Code <inex.code@selfprivacy.org>
Inex Code
|
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 741 KiB |
|
Before Width: | Height: | Size: 359 KiB After Width: | Height: | Size: 359 KiB |
|
Before Width: | Height: | Size: 743 KiB After Width: | Height: | Size: 743 KiB |
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
|
Before Width: | Height: | Size: 642 KiB After Width: | Height: | Size: 642 KiB |
|
Before Width: | Height: | Size: 583 KiB After Width: | Height: | Size: 583 KiB |
|
Before Width: | Height: | Size: 261 KiB After Width: | Height: | Size: 261 KiB |
|
Before Width: | Height: | Size: 330 KiB After Width: | Height: | Size: 330 KiB |
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 207 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 287 KiB After Width: | Height: | Size: 287 KiB |
|
Before Width: | Height: | Size: 339 KiB After Width: | Height: | Size: 339 KiB |
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 141 KiB |
|
|
@ -5,53 +5,12 @@ linkTitle = "SelfPrivacy"
|
|||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section" >}}
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/2-en.png" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="/images/screenshots/3-en.png" alt="Third slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/4-en.png" alt="Fourth slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/5-en.png" alt="Fifth slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/6-en.png" alt="Sixth slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< responsive-carousel >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
<div class="container my-4">
|
||||
<h1>
|
||||
|
|
@ -62,7 +21,7 @@ linkTitle = "SelfPrivacy"
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /blocks/section >}}
|
||||
|
||||
<section class="px-5">
|
||||
|
|
|
|||
|
|
@ -4,52 +4,11 @@ linkTitle = "SelfPrivacy"
|
|||
|
||||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section">}}
|
||||
{{< blocks/section color="dark" type="section" >}}
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/1-ru.png" alt="Первый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/2-ru.png" alt="Второй слайд">
|
||||
</div>
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="/images/screenshots/3-ru.png" alt="Третий слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/4-ru.png" alt="Четвёртый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/5-ru.png" alt="Пятый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/6-ru.png" alt="Шестой слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/7-ru.png" alt="Седьмой слайд">
|
||||
</div>
|
||||
</div>
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></li>
|
||||
</ol>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Назад</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Далее</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< responsive-carousel >}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
|
|
@ -64,13 +23,13 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /blocks/section>}}
|
||||
{{< /blocks/section>}}
|
||||
|
||||
<section class="px-5">
|
||||
<div class="w-100">
|
||||
<h2 class="mx-auto text-center font-weight-bolder">Ваши личные сервисы</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sp-service-container">
|
||||
<div class="w-100 mb-3">
|
||||
<h3 class="mx-auto text-center">Для серьезных дел</h3>
|
||||
|
|
|
|||
51
layouts/shortcodes/responsive-carousel.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
{{ $lang := .Page.Lang }}
|
||||
{{ $srcFiles := (resources.Match (printf "images/screenshots/%s/*" $lang)) }}
|
||||
|
||||
{{ $tinyw := default "500" }}
|
||||
{{ $smallw := default "800" }}
|
||||
{{ $mediumw := default "1200" }}
|
||||
{{ $largew := default "2400" }}
|
||||
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="false">
|
||||
<div class="carousel-indicators">
|
||||
{{ range $i, $src := $srcFiles }}
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="{{ $i }}" {{ if eq $i 0 }} class="active" aria-current="true" {{ end }}></button>
|
||||
{{ end }}
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
<div class="carousel-inner rounded">
|
||||
{{ range $i, $src := $srcFiles }}
|
||||
|
||||
{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
|
||||
{{ $small := $src.Resize (printf "%sx" $smallw) }}
|
||||
{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
|
||||
{{ $large := $src.Resize (printf "%sx" $largew) }}
|
||||
|
||||
<div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
|
||||
<img
|
||||
class = "d-block w-100"
|
||||
srcset='
|
||||
{{ with $tiny.RelPermalink }} {{.}} {{(printf "%sw" $tinyw)}} {{ end }},
|
||||
{{ with $small.RelPermalink }} {{.}} {{(printf "%sw" $smallw)}} {{ end }},
|
||||
{{ with $medium.RelPermalink }} {{.}} {{(printf "%sw" $mediumw)}} {{ end }},
|
||||
{{ with $large.RelPermalink }} {{.}} {{(printf "%sw" $largew)}} {{ end }}
|
||||
'
|
||||
sizes='
|
||||
(max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
|
||||
(max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
|
||||
(max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
|
||||
(max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
|
||||
100%
|
||||
'
|
||||
>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
30
layouts/shortcodes/responsive-img.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{ $src := ( resources.Get ( .Get 0 ) ) }}
|
||||
|
||||
{{ $tinyw := default "500" }}
|
||||
{{ $smallw := default "800" }}
|
||||
{{ $mediumw := default "1200" }}
|
||||
{{ $largew := default "2400" }}
|
||||
|
||||
{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
|
||||
{{ $small := $src.Resize (printf "%sx" $smallw) }}
|
||||
{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
|
||||
{{ $large := $src.Resize (printf "%sx" $largew) }}
|
||||
|
||||
<img
|
||||
{{ with ( .Get 1 ) }}
|
||||
class = "{{ . }}"
|
||||
{{ end }}
|
||||
srcset='
|
||||
{{ with $tiny.RelPermalink }} {{.}} {{(printf "%sw" $tinyw)}} {{ end }},
|
||||
{{ with $small.RelPermalink }} {{.}} {{(printf "%sw" $smallw)}} {{ end }},
|
||||
{{ with $medium.RelPermalink }} {{.}} {{(printf "%sw" $mediumw)}} {{ end }},
|
||||
{{ with $large.RelPermalink }} {{.}} {{(printf "%sw" $largew)}} {{ end }}
|
||||
'
|
||||
sizes='
|
||||
(max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
|
||||
(max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
|
||||
(max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
|
||||
(max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
|
||||
100%
|
||||
'
|
||||
>
|
||||