feat: toggle landing page slider (#10580)

Author: thelostone-mc

app/assets/v2/scss/jtbd.scss

@@ -43,7 +43,6 @@
       width: 20%;
       margin-left: 40%;
     }
-    background-image: url(static('v2/images/home/GR13_desktopBanner_bg.png'));
     background-size: 100% auto;
     background-repeat: no-repeat;
     min-height: 450px;

app/marketing/admin.py

@@ -135,7 +135,7 @@ def membership_length_in_days(self, instance):
 
 class ImageDropZoneAdmin(admin.ModelAdmin):
     ordering = ['-id']
-    list_display = ['name', 'image']
+    list_display = ['pk', 'name', 'image']
 
 
 admin.site.register(MarketingCallback, GeneralAdmin)

app/retail/templates/home/index2021.html

@@ -128,21 +128,60 @@
     <div class="header">
       {% include 'home/nav.html' %}
     </div>
+    {% if landingBanner.slides|length > 1 %}
+    <header class="grad home-carousel">
+      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators home">
+          {% for slide in landingBanner.slides %}
+            {% if forloop.first %}
+              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+            {% else %}
+              <li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}"></li>
+            {% endif %}
+          {% endfor %}
+        </ol>
+        <div class="carousel-inner">
+          {% for slide in landingBanner.slides %}
+            {% if forloop.first %}
+            <div class="carousel-item active" data-carousel-item-href="{{ slide.buttonLink }}">
+            {% else %}
+            <div class="carousel-item" data-carousel-item-href="{{ slide.buttonLink }}">
+            {% endif %}
+            <div class="grants" style="background-image: url('{{ slide.backgroundImage }}')">
+              <div class="d-flex flex-column justify-content-around container">
+                <h3 class="dates gc-font-heading">{{ slide.title }}</h3>
+                <img src="{{ slide.img }}">
+                <h5>{{ slide.subtitle }}</h5>
+                <a class="btn btn-lg btn-outline-primary" href="{{ slide.buttonLink}} ">
+                  {{ slide.buttonCTA }}
+                </a>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </header>
+
+
+
+    {% else %}
     <header class="grad">
-       <!-- This can be converted to a carousel if needed for grants rounds: https://github.com/gitcoinco/web/pull/10276 -->
       <div class="container build-slide">
         <div class="row pt-5">
           <div class="col-12 col-md-6 d-flex flex-column justify-content-around">
-            <h1 class="mt-5">Build and Fund the Open Web Together</h1>
-            <p class="font-bigger-4 text-grey-400 font-weight-300">Connect with the community developing digital public goods, creating financial freedom, and defining the future of the open web.</p>
+            <h1 class="mt-5">{{ landingBanner.slides.0.title }}</h1>
+            <p class="font-bigger-4 text-grey-400 font-weight-300">{{ landingBanner.slides.0.subtitle }}</p>
           </div>
           <div class="col-12 col-md-6 header-image">
-            <img class="mt-5" src="{% static "v2/images/home/Flying_ppl_optimized.svg" %}">
+            <img class="mt-5" src="{{ landingBanner.slides.0.img }}">
           </div>
         </div>
       </div>
     </header>
 
+    {% endif %}
+
     <section class="container my-5">
       <div class="row py-5 my-5">
         <div class="col-md-6 mb-5 mb-md-0">

app/retail/views.py

@@ -36,14 +36,14 @@
 from app.utils import get_profiles_from_text
 from cacheops import cached_view
 from dashboard.models import (
-    Activity, ActivityIndex, HackathonEvent, Profile, Tip, get_my_earnings_counter_profiles, get_my_grants,
+    Activity, HackathonEvent, Profile, Tip
 )
 from dashboard.notifications import amount_usdt_open_work, open_bounties
 from dashboard.tasks import grant_update_email_task
 from economy.models import Token
 from marketing.mails import mention_email, new_funding_limit_increase_request, new_token_request, wall_post_email
-from marketing.models import EmailInventory
-from perftools.models import JSONStore
+from marketing.models import EmailInventory, ImageDropZone
+from perftools.models import JSONStore, StaticJsonEnv
 from ratelimit.decorators import ratelimit
 from retail.helpers import get_ip
 from townsquare.tasks import increment_view_counts
@@ -94,6 +94,42 @@ def index(request):
         }
     context.update(data_results)
 
+    try:
+        landingBanner = StaticJsonEnv.objects.get(key='landingBanner').data
+        slides = landingBanner['slides']
+
+        for index, slide in enumerate(slides):
+            slides[index]['img'] = ImageDropZone.objects.get(pk=slide['img']).image.url
+            if slide['backgroundImage']:
+                slides[index]['backgroundImage'] = ImageDropZone.objects.get(pk=slide['backgroundImage']).image.url
+
+
+        if len(slides) == 0:
+            landingBanner = {
+                'slides': [
+                    {
+                        'img': static('v2/images/home/Flying_ppl_optimized.svg'),
+                        'title': 'Build and Fund the Open Web Together',
+                        'subtitle': 'Connect with the community developing digital public goods, creating financial freedom, and defining the future of the open web.',
+                    }
+                ]
+            }
+
+        landingBanner['slides'] = slides
+
+    except:
+        landingBanner = {
+            'slides': [
+                {
+                    'img': static('v2/images/home/Flying_ppl_optimized.svg'),
+                    'title': 'Build and Fund the Open Web Together',
+                    'subtitle': 'Connect with the community developing digital public goods, creating financial freedom, and defining the future of the open web.',
+                }
+            ]
+        }
+
+    context.update({'landingBanner': landingBanner})
+
     return TemplateResponse(request, 'home/index2021.html', context)
 
 def index_old(request):