Merge pull request #909 from cristycarpenter/STENCIL-2455

STENCIL-2455: Prevents carousel images from being cut off on large sc…
bigcommerce · Feb 8, 2017 · 8a83d60 · 8a83d60
2 parents 8044fa8 + 7a1efdc
commit 8a83d60
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Draft
+- Added a setting to theme editor schema to show/hide the homepage carousel [#909](https://github.com/bigcommerce/stencil/pull/909)
+- Prevent carousel images from being cut off on large screens by adding a new setting to theme editor schema [#909](https://github.com/bigcommerce/stencil/pull/909)
+
 ## 1.5.1 (2017-02-07)
 - Fix an issue with a horizontal scroll bar showing in theme editor [#915](https://github.com/bigcommerce/stencil/pull/915)
 - Hide Gift Certificates when the setting is disabled in the control panel [#914](https://github.com/bigcommerce/stencil/pull/914) & [#916](https://github.com/bigcommerce/stencil/pull/916)

diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -15,6 +15,9 @@
 // 3. Visually overrides the top margin for '.body' defined in _body.scss.
 //    The '.body' top margin creates space between the header and page content.
 //    However, on the homepage, we want the carousel to be flush with the header.
+//
+// 4. Allows image to scale on large screens while preventing the top and bottom
+//    from becoming cut off.
 // -----------------------------------------------------------------------------
 
 .heroCarousel {
@@ -74,7 +77,6 @@
             @include carouselOpaqueBackgrounds($slick-dot-bgColor);
         }
     }
-
 }
 
 .heroCarousel-slide {
@@ -88,6 +90,12 @@
     }
 }
 
+.heroCarousel-slide--stretch {
+    @include breakpoint("large") { // 4
+        background-size: 100% 100%;
+    }
+}
+
 .heroCarousel-image {
     @include breakpoint("medium") { // 1
         visibility: hidden;

diff --git a/config.json b/config.json
@@ -41,6 +41,7 @@
     "homepage_featured_products_count": 8,
     "homepage_top_products_count": 8,
     "homepage_show_carousel": true,
+    "homepage_stretch_carousel_images": false,
     "homepage_new_products_column_count": 4,
     "homepage_featured_products_column_count": 4,
     "homepage_top_products_column_count": 4,

diff --git a/schema.json b/schema.json
@@ -744,6 +744,18 @@
   {
     "name": "Carousel",
     "settings": [
+      {
+        "type": "checkbox",
+        "label": "Show Carousel",
+        "force_reload": true,
+        "id": "homepage_show_carousel"
+      },
+      {
+        "type": "checkbox",
+        "label": "Allows image to stretch on large screens",
+        "force_reload": true,
+        "id": "homepage_stretch_carousel_images"
+      },
       {
         "type": "color",
         "label": "Background color",
@@ -827,11 +839,11 @@
       {
         "type": "heading",
         "content": "Placement"
-      },   
+      },
       {
         "type": "checkbox",
         "label": "Top Right (Toggle On/Off)",
-        "force_reload": true,  
+        "force_reload": true,
         "id": "social_icon_placement_top"
       },
       {
@@ -1237,7 +1249,7 @@
         "label": "Product Swatch Image Sizes",
         "type": "imageDimension",
         "id": "swatch_option_size",
-        "force_reload": true, 
+        "force_reload": true,
         "options": [
           {
             "value": "22x22",
@@ -1246,7 +1258,7 @@
           {
             "value": "custom",
             "label": "Specify dimensions"
-         }        
+         }
         ]
       },
       {
@@ -2190,10 +2202,10 @@
         "force_reload": true,
         "id": "show_powered_by"
       },
-      {  
+      {
         "type": "checkbox",
         "label": "Show brands in footer",
-        "force_reload": true,  
+        "force_reload": true,
         "id": "shop_by_brand_show_footer"
       },
       {

diff --git a/templates/components/carousel.html b/templates/components/carousel.html
@@ -6,10 +6,10 @@
         "slidesToScroll": 1,
         "autoplay": true,
         "autoplaySpeed": {{carousel.swap_frequency}}
-    }'
->
+    }'>
     {{#each carousel.slides}}
-    <div class="heroCarousel-slide" style="background-image: url({{image}})">
+    <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}heroCarousel-slide--stretch{{/if}}"
+        style="background-image: url({{image}})">
         <a href="{{url}}">
             <img class="heroCarousel-image" src="{{image}}" alt="{{alt_text}}" title="{{alt_text}}"/>
             {{#if heading}}