feat(Components/BlockImage): add component (#182)

* feat(Components/BlockImage): added baseComponent

* docs(Components/BlockImage): changed category

* refactor(Components/BlockImage): added resized img default src

* docs(Components/BlockImage): removed howto

Components/BlockImage/README.md

@@ -0,0 +1,13 @@
+Title: Block Image
+
+----
+
+Category: Block
+
+----
+
+Tags: block, image
+
+----
+
+Text: Full width image component. Upload an image that takes full width.

Components/BlockImage/fields.json

@@ -0,0 +1,18 @@
+{
+  "layout": {
+    "name": "BlockImage",
+    "label": "Block: Image",
+    "sub_fields": [
+      {
+        "label": "Image",
+        "name": "image",
+        "type": "image",
+        "instructions": "Recommended Size: Min-Width 1440px; Min-Height: 720px; Image-Format: JPG",
+        "min_width": 1440,
+        "min_height": 720,
+        "mime_types": "jpg,jpeg",
+        "required": 1
+      }
+    ]
+  }
+}

Components/BlockImage/functions.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Flynt\Components\BlockImage;
+
+use Flynt\Features\Components\Component;
+
+add_action('wp_enqueue_scripts', function () {
+    Component::enqueueAssets('BlockImage');
+});

Components/BlockImage/index.twig

@@ -0,0 +1,12 @@
+<div is="flynt-block-image" class="flyntComponent">
+  <div class="blockImage">
+    <img class="blockImage-imageElement" srcset="
+      {{ image.src | resize(576, 288) }} 576w,
+      {{ image.src | resize(768, 384) }} 768w,
+      {{ image.src | resize(1200, 600) }} 1200w,
+      {{ image.src | resize(1440, 720) }} 1440w"
+      src="{{ image.src | resize(1200, 600) }}"
+      sizes="(min-width: 1140px) 1140px, 100vw"
+      alt="{{ image.alt }}">
+  </div>
+</div>

Components/BlockImage/style.styl

@@ -0,0 +1,22 @@
+$rupture.scale = lookup('$global-layout-scale') || (0 576px 768px 992px 1200px)
+$rupture.anti-overlap = lookup('$global-layout-overlap') || -1px
+$gutterWidth = lookup('$global-layout-gutterWidth') || 15px
+$containerMaxWidth = lookup('$global-layout-containerMaxWidth') || 1140px
+
+[is='flynt-block-image']
+  *,
+  *:before,
+  *:after
+    box-sizing: border-box
+
+  .blockImage
+    center($containerMaxWidth, $gutterWidth)
+
+    &-imageContainer
+      display: block
+      width: 100%
+
+    &-imageElement
+      display: block
+      height: auto
+      max-width: 100%

config/fieldGroups/pageComponents.json

@@ -8,6 +8,7 @@
       "type": "flexible_content",
       "button_label": "Add Component",
       "layouts": [
+        "Flynt/Components/BlockImage/Fields/Layout",
         "Flynt/Components/BlockWysiwyg/Fields/Layout",
         "Flynt/Components/SliderMedia/Fields/Layout"
       ]