Banner property new action for tablet devices

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Banner option on tablet devices
+
 ## [2.11.5] - 2019-12-18
 
 ### Added

messages/context.json

@@ -20,5 +20,6 @@
   "admin/editor.carousel.banner.description.title": "admin/editor.carousel.banner.description.title",
   "admin/editor.carousel.banner.externalRoute.title": "admin/editor.carousel.banner.externalRoute.title",
   "admin/editor.carousel.banner.image.title": "admin/editor.carousel.banner.image.title",
-  "admin/editor.carousel.banner.mobileImage.title": "admin/editor.carousel.banner.mobileImage.title"
+  "admin/editor.carousel.banner.mobileImage.title": "admin/editor.carousel.banner.mobileImage.title",
+  "admin/editor.carousel.banner.tabletImage.title": "admin/editor.carousel.banner.tabletImage.title"
 }

messages/en.json

@@ -20,5 +20,8 @@
   "admin/editor.carousel.banner.description.title": "Banner description",
   "admin/editor.carousel.banner.externalRoute.title": "External route",
   "admin/editor.carousel.banner.image.title": "Banner image",
-  "admin/editor.carousel.banner.mobileImage.title": "Banner mobile image"
+  "admin/editor.carousel.banner.mobileImage.title": "Banner mobile image",
+  "admin/editor.carousel.banner.tabletImage.title": "Bbanner tablet image"
+
+
 }

messages/es.json

@@ -20,5 +20,6 @@
   "admin/editor.carousel.banner.description.title": "Descripción del banner",
   "admin/editor.carousel.banner.externalRoute.title": "Ruta externa",
   "admin/editor.carousel.banner.image.title": "Imagen del banner",
-  "admin/editor.carousel.banner.mobileImage.title": "Imagen del banner en el móvil"
+  "admin/editor.carousel.banner.mobileImage.title": "Imagen del banner en el móvil",
+  "admin/editor.carousel.banner.tabletImage.title": "Imagen del banner en tablet"
 }

messages/pt.json

@@ -20,5 +20,6 @@
   "admin/editor.carousel.banner.description.title": "Descrição do banner",
   "admin/editor.carousel.banner.externalRoute.title": "Rota externa",
   "admin/editor.carousel.banner.image.title": "Imagem do banner",
-  "admin/editor.carousel.banner.mobileImage.title": "Imagem do banner no mobile"
+  "admin/editor.carousel.banner.mobileImage.title": "Imagem do banner no mobile",
+  "admin/editor.carousel.banner.tabletImage.title": "Imagem de banner para tablet"
 }

react/Banner.tsx

@@ -27,7 +27,9 @@ export interface Props {
   /** The url where the image is pointing to, in case of internal route (optional) */
   customInternalURL: string
   /** Runtime injected deps */
-  runtime: any
+  runtime: any,
+  /** Link for the tablet image of the banner */
+  tabletImage: string
 }
 
 function getParams(params: string) {
@@ -50,13 +52,14 @@ const Banner = (props: Props) => {
     image,
     params,
     mobileImage,
+    tabletImage,
     height = 420,
     externalRoute,
     description = '',
     customInternalURL,
   } = props
 
-  const { isMobile } = useDevice()
+  const { isMobile, device } = useDevice()
   const handles = useCssHandles(CSS_HANDLES)
 
   const content = (
@@ -70,7 +73,7 @@ const Banner = (props: Props) => {
       >
         <img
           className={classnames(handles.img, 'w-100 h-100')}
-          src={isMobile && mobileImage ? mobileImage : image}
+          src={device === "tablet" ? tabletImage || image : isMobile && mobileImage ? mobileImage : image}
           alt={description}
         />
       </div>

react/Carousel.tsx

@@ -234,6 +234,14 @@ Carousel.getSchema = () => {
                 'ui:widget': 'image-uploader',
               },
             },
+            tabletImage: {
+              default: '',
+              title: 'admin/editor.carousel.banner.tabletImage.title',
+              type: 'string',
+              widget: {
+                'ui:widget': 'image-uploader',
+              },
+            },
             description: {
               default: '',
               title: 'admin/editor.carousel.banner.description.title',