Merge 'aashish:IntroImageDisplayOptions' into 'master' with fixes

Squashed commit of the following: commit 7c784397eb5ffca5b4899cf603d5431512cabf2e Author: Jason Cox <[email protected]> Date: Tue May 26 23:10:11 2020 -0400 Make intro image styling actually work and present square as an option commit 3c9c97e Author: Aashish Vasudevan <[email protected]> Date: Sun May 10 15:26:29 2020 +0530 Changed rem rotation to percentage for platform compatibility commit 29fc86f Merge: 111f5d0 402121f Author: Aashish Vasudevan <[email protected]> Date: Wed Feb 12 09:43:15 2020 +0530 Merge remote-tracking branch 'upstream/master' into IntroImageDisplayOptions commit 111f5d0 Author: Aashish Vasudevan <[email protected]> Date: Mon Jan 20 18:59:12 2020 +0530 Moved image shape inside existing selector and changed the px measurement to rem commit a6d9901 Merge: 20f775f c48dd05 Author: Aashish Vasudevan <[email protected]> Date: Mon Jan 20 18:49:56 2020 +0530 Merge remote-tracking branch 'origin/IntroImageDisplayOptions' into IntroImageDisplayOptions commit 20f775f Author: Aashish Vasudevan <[email protected]> Date: Mon Jan 20 18:49:46 2020 +0530 Made verbage changes to intro image selection commit c48dd05 Author: Aashish Vasudevan <[email protected]> Date: Mon Jan 20 18:48:11 2020 +0530 Updated name of default image shape option Co-Authored-By: Jason Cox <[email protected]> commit 7c4c592 Author: Aashish Vasudevan <[email protected]> Date: Mon Nov 25 11:23:42 2019 +0530 Added a way to change image styling through blueprint and css
jasonccox · May 27, 2020 · 309f766 · 309f766
1 parent 0da0878
commit 309f766
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/blueprints/modular/intro.yaml b/blueprints/modular/intro.yaml
@@ -59,6 +59,16 @@ form:
                   validate:
                     type: textarea
 
+                header.img_style:
+                  type: select
+                  label: Image Style
+                  description: Choose the shape of the intro image.
+                  size: medium
+                  options:
+                    square: Square
+                    circle: Circle
+                    rounded: Rounded Corners
+
                 header.center_content:
                   type: toggle
                   label: Center Content

diff --git a/scss/intro.scss b/scss/intro.scss
@@ -9,6 +9,14 @@
 .intro__img {
 	flex: 0 100%;
 	width: 50%;
+
+	&.rounded {
+		border-radius: 15%;
+	}
+
+	&.circle {
+		border-radius: 50%;
+	}
 }
 
 .intro__content {

diff --git a/templates/modular/intro.html.twig b/templates/modular/intro.html.twig
@@ -5,7 +5,7 @@
 {% block module_content %}
     <div class="intro">
         {% if image %}
-            {{ image.html('', page.header.img_alt, 'intro__img')|raw }}
+            {{ image.html('', page.header.img_alt, 'intro__img ' ~ page.header.img_style)|raw }}
         {% endif %}
 
         <div class="intro__content {% if image %} with-img {% endif %} {% if page.header.center_content %} center-text {% endif %}">