home page carousel: promote releases, grants, community meeting, instead of the gallery

[veroandreo]

I was playing around with the carousel in the home page and got this so far:

Screencast from 2024-03-21 11-17-58.webm

The motivation behind this change is to showing things like new releases, community meetings, student grants and such, as well as calling for financial support. This is a call for help as I did not manage to put the links over the picture in a box, instead of below... some css magic needed perhaps?

What do you think?

[MauroPaccioretti]

Hi! A css trick could be: 1 - In each div.container add a new position-relative class 2 - In each div.row.justify-content-center add the classes position-absolute and w-100. 3 - With inline styles or in styles.css add bottom: 0;.

I also removed a margin, added some background color, and set a little more data-interval.

Hope this helps!!

--- a/themes/grass/layouts/index.html
+++ b/themes/grass/layouts/index.html
@@ -47,30 +47,30 @@
     <div class="row">
         <div class="col-lg-6">
             <div class="bg-white" id="slides">
-                <div class="carousel slide" data-interval="1500" data-ride="carousel" id="carouselUI">
+                <div class="carousel slide" data-interval="2500" data-ride="carousel" id="carouselUI">
                     <div class="carousel-inner">
-                        <div class="carousel-item active">     
-                            <div class="container">
-                            <img alt="GRASS GIS team" class="d-block w-100" src="{{.Site.BaseURL}}/images/other/grass_team_prague_2023_hike.jpg">
-                            <div class="row justify-content-center"><a href="https://grasswiki.osgeo.org/wiki/GRASS_Community_Meeting_Prague_2024" target="_blank">Join the GRASS GIS Community Meeting 2024</a></div>
+                        <div class="carousel-item active">
+                            <div class="container position-relative">
+                            <img alt="GRASS GIS team" class="d-block w-100 m-0" src="{{.Site.BaseURL}}/images/other/grass_team_prague_2023_hike.jpg">
+                            <div class="row justify-content-center position-absolute w-100"><a href="https://grasswiki.osgeo.org/wiki/GRASS_Community_Meeting_Prague_2024" target="_blank">Join the GRASS GIS Community Meeting 2024</a></div>
                             </div>
                         </div>
                         <div class="carousel-item">
-                            <div class="container">
-                            <img alt="GRASS GIS mentoring program" class="d-block w-100" src="{{.Site.BaseURL}}/images/other/grass_gis_mentoring.jpg">
-                            <div class="row justify-content-center"><a href="https://grasswiki.osgeo.org/wiki/Mentoring_Program" target="_blank">Join the GRASS GIS Mentoring program</a></div>
+                            <div class="container position-relative">
+                            <img alt="GRASS GIS mentoring program" class="d-block w-100 m-0" src="{{.Site.BaseURL}}/images/other/grass_gis_mentoring.jpg">
+                            <div class="row justify-content-center position-absolute w-100"><a href="https://grasswiki.osgeo.org/wiki/Mentoring_Program" target="_blank">Join the GRASS GIS Mentoring program</a></div>
                             </div>
                         </div>
                         <div class="carousel-item">
-                            <div class="container">
-                            <img alt="GRASS GIS student grants" class="d-block w-100" src="{{.Site.BaseURL}}/images/other/grass_gis_student_grants.jpg">
-                            <div class="row justify-content-center"><a href="https://grasswiki.osgeo.org/wiki/Student_Grants" target="_blank">Apply for a GRASS GIS Student grant</a></div>
+                            <div class="container position-relative">
+                            <img alt="GRASS GIS student grants" class="d-block w-100 m-0" src="{{.Site.BaseURL}}/images/other/grass_gis_student_grants.jpg">
+                            <div class="row justify-content-center position-absolute w-100"><a href="https://grasswiki.osgeo.org/wiki/Student_Grants" target="_blank">Apply for a GRASS GIS Student grant</a></div>
                             </div>
                         </div>
                         <div class="carousel-item">
-                            <div class="container">
-                            <img alt="GRASS GIS latest release" class="d-block w-100" src="{{.Site.BaseURL}}/images/other/grass_splash_edited.png">
-                            <div class="row justify-content-center"><a href="https://github.com/OSGeo/grass/releases" target="_blank">Check the latest GRASS GIS release</a></div>
+                            <div class="container position-relative">
+                            <img alt="GRASS GIS latest release" class="d-block w-100 m-0" src="{{.Site.BaseURL}}/images/other/grass_splash_edited.png">
+                            <div class="row justify-content-center position-absolute w-100"><a href="https://github.com/OSGeo/grass/releases" target="_blank">Check the latest GRASS GIS release</a></div>
                             </div>
                         </div>
                     </div>

--- a/themes/grass/assets/css/style.css
+++ b/themes/grass/assets/css/style.css
@@ -1276,6 +1276,11 @@ code{
     margin-top: 95px;
 }

+#carouselUI .carousel-inner .carousel-item .container.position-relative .row.justify-content-center {
+  bottom: 0;
+  background: var(--grass-color-light);
+  background: radial-gradient(circle, var(--grass-color-light) 65%, transparent 90%);
+}

 @media (max-width: 576px) {

[veroandreo]

How it looks after the last commit: Screencast from 2024-03-26 16-17-42.webm

Thanks @MauroPaccioretti :)

ps: I'll rework the img for releases. IMO it should be something kinda generic so we do not need to recreate with every release. Feedback and suggestions welcome :)

[lucadelu]

@veroandreo if the video runs at 1x speed, I suggest to rotate slower the images right now it is not possible to read

[veroandreo]

@veroandreo if the video runs at 1x speed, I suggest to rotate slower the images right now it is not possible to read

Right! I increased the velocity when testing and then forgot to slow it down again. Thanks for pointing that :)

[veroandreo]

New release img, slower velocity, and padding tweaks so carousel is properly aligned with news box. Reviews welcome :)

Screencast from 2024-03-27 10-57-22.webm

[lucadelu]

New release img, slower velocity, and padding tweaks so carousel is properly aligned with news box. Reviews welcome :) Screencast.from.2024-03-27.10-57-22.webm

I suggest to slow down a little bit more