New options for main image in pages. Fixed sidebar

blueprints/default.yaml

@@ -22,14 +22,47 @@ form:
                     header.subtitle:
                       type: text
                       style: vertical
+                      size: long
                       label: FUTURE.ADMIN.ITEM.ITEM_SUBTITLE
+                    image_section:
+                      type: section
+                      underline: true
+                      title: FUTURE.ADMIN.DEFAULT.IMAGE_OPTIONS
+                    header.show_pageimage:
+                      type: toggle
+                      style: vertical
+                      label: FUTURE.ADMIN.DEFAULT.SHOW_PAGEIMAGE
+                      help: FUTURE.ADMIN.DEFAULT.SHOW_PAGEIMAGE_HELP
+                      default: 1
+                      highlight: 1
+                      options:
+                        1: PLUGIN_ADMIN.ENABLED
+                        0: PLUGIN_ADMIN.DISABLED
+                      validate:
+                        type: bool
                     header.primaryImage:
                       ordering@: header.subtitle
                       style: vertical
                       size: medium
                       type: pagemediaselect
-                      label: FUTURE.ADMIN.DEFAULT.PRIMARY_IMAGE
+                      label: FUTURE.ADMIN.DEFAULT.PRIMARY_IMAGE.LABEL
                       preview_images: true
+                    header.image_width:
+                        type: number
+                        style: vertical
+                        label: FUTURE.ADMIN.DEFAULT.PRIMARY_IMAGE.WIDTH
+                        size: small
+                        default: 1038
+                    header.image_height:
+                      type: number
+                      style: vertical
+                      label: FUTURE.ADMIN.DEFAULT.PRIMARY_IMAGE.HEIGHT
+                      size: small
+                      default: 437
+                    content_section:
+                      type: section
+                      underline: true
+                      title: FUTURE.ADMIN.DEFAULT.CONTENT
         options:
           fields:
             publishing:

blueprints/modular/banner.yaml

@@ -12,8 +12,16 @@ form:
               fields:
                 header.content:
                   fields:
+                    image_section:
+                      unset@: true
                     header.primaryImage:
                       unset@: true
+                    header.show_pageimage:
+                      unset@: true
+                    header.image_width: 
+                      unset@: true
+                    header.image_height:
+                      unset@: true
         banner:
           type: tab
           title: FUTURE.ADMIN.MODULAR.BANNER.BANNER_TAB

templates/default.html.twig

@@ -1,7 +1,12 @@
 {% extends 'partials/base.html.twig' %}
-{% set show_sidebar = header_var('show_sidebar')|defined(false) %}
+
-{% set image = page.media[page.header.primaryImage] ? : page.media.images|first
+{# Define if the primary image and the attributes of width and height are shown #}
-%}
+{% set show_image = header_var('show_pageimage')|defined(true) %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.primaryImage and (v.type == 'image' or v.type == 'vector'))|first %}
+{% set img_width = header_var('image_width')|default(1038) %}
+{% set img_height = header_var('image_height')|default(437) %}
+
+{# Set title and subtitle #}
 {% set title = page.title|raw %}
 {% set subtitle = page.header.subtitle|raw %}
 
@@ -13,24 +18,21 @@
   <article class="post">
     <header>
       <div class="title">
-        <h2>
+        <h2>{{ title }}</h2>
-          {{ title }}
-        </h2>
         {% if subtitle %}
-          <p>
+          <p>{{ subtitle }}</p>
-            {{ subtitle }}
-          </p>
         {% endif %}
       </div>
     </header>
 
-    {% if image %}
+  {% if show_image and image %}
       <span class="image featured">
-        {{ image.cropZoom(1038, 437).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+        {{ image.cropZoom(img_width, img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
       </span>
-    {% endif %}
+  {% endif %}
 
     {{ page.content|raw }}
+
   </article>
 
   {% if show_sidebar == false %}
@@ -41,5 +43,7 @@
 {% endblock %}
 
 {% block sidebar %}
+{% if show_sidebar == true %}
   {% include 'partials/sidebar_left.html.twig' %}
+{% endif %}
 {% endblock %}

templates/modular.html.twig

@@ -1,6 +1,12 @@
 {% extends 'partials/base.html.twig' %}
-{% set show_sidebar = header_var('show_sidebar')|defined(false)  %}
+
-{% set image = page.media[page.header.primaryImage] ?: page.media.images|first %}
+{# Define if the primary image and the attributes of width and height are shown #}
+{% set show_image = header_var('show_pageimage')|defined(true) %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v) => (v.type == 'image' or v.type == 'vector'))|first %}
+{% set img_width = header_var('image_width')|default(1038) %}
+{% set img_height = header_var('image_height')|default(437) %}
+
+{# Set title and subtitle #}
 {% set title = page.title|raw %}
 {% set subtitle = page.header.subtitle|raw %}
 
@@ -26,9 +32,9 @@
       </div>
     </header>
 
-    {% if image %}
+    {% if show_image and image %}
     <span class="image featured">
-      {{ image.cropZoom(1038,437).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+      {{ image.cropZoom(img_width,img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
     </span>
     {% endif %}
 
@@ -40,6 +46,10 @@
   </article>
 {% endblock %}
 
+
 {% block sidebar %}
+{% if show_sidebar == true %}
     {% include 'partials/sidebar_left.html.twig' %}
+{% endif %}
 {% endblock %}
+

templates/modular/features.html.twig

@@ -1,6 +1,16 @@
-{% set image = page.media[page.header.primaryImage] ?: page.media.images|first %}
+{# Define if sidebar is shown in the page #}
+{% set show_image = header_var('show_pageimage')|defined(true) %}
+
+{# Define if the primary image and the attributes of width and height are shown #}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v) => (v.type == 'image' or v.type == 'vector'))|first %}
+{% set img_width = header_var('image_width')|default(1038) %}
+{% set img_height = header_var('image_height')|default(437) %}
+
+{# Set title and subtitle #}
 {% set title = page.title|raw %}
 {% set subtitle = page.header.subtitle|raw %}
+
+{# Set columns for features page #}
 {% set columns = page.header.layout == 'standard' ? 'col-4 col-6-medium col-12-small' : 'col-6 col-12-small'  %}
 
 <section id="features">
@@ -11,8 +21,8 @@
     {% endif %}
   </header>
   
-  {% if image %}
+  {% if show_image and image %}
-    {{ image.cropZoom(1038,437).loading('lazy').attribute('decoding','async').html(title, title, 'image featured')|raw }}
+    {{ image.cropZoom(img_width,img_height).loading('lazy').attribute('decoding','async').html(title, title, 'image featured')|raw }}
   {% endif %}
 
   {{ page.content|raw }}

templates/partials/blog_item.html.twig

@@ -10,9 +10,18 @@
     {% set author = page.taxonomy.author[0] %}
   {% endif %}
 
-  {% set title = page.title|raw %}
+{# Set avatar image and primary image #}
-  {% set avatar = page.media[page.header.avatarImage].url|e  %}
+{% set avatar = page.media[page.header.avatarImage].url|e  %}
-  {% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
+
+{# Define if the primary image and the attributes of width and height are shown #}
+{% set show_image = header_var('show_pageimage')|defined(true) %}
+{% set img_width = header_var('image_width')|default(1038) %}
+{% set img_height = header_var('image_height')|default(437) %}
+
+{# Set title and subtitle #}
+{% set title = page.title|raw %}
+{% set subtitle = page.header.subtitle|raw %}
 
   <header>
     <div class="title">
@@ -28,8 +37,8 @@
           <a href="{{ page.url }}" aria-label="{{ title }}">{{ title }}</a>
         </h2>
       {% endif %}
-      {% if page.header.subtitle %}
+      {% if subtitle %}
-        <p itemprop="alternativeHeadline">{{ page.header.subtitle|raw }}</p>
+        <p itemprop="alternativeHeadline">{{ subtitle|raw }}</p>
       {% endif %}
     </div>
     <div class="meta">
@@ -49,9 +58,9 @@
       {% endif %}
     </div>
   </header>
-  {% if image %}
+  {% if show_image and image %}
   <a class="image featured" href="{{ page.url }}" title="{{ title|raw }}" rel="nofollow">
-    {{ image.cropZoom(1038,437).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+    {{ image.cropZoom(img_width,img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
   </a>
   {% endif %}
   <div itemprop="articleBody">

templates/portfolio.html.twig

@@ -1,6 +1,11 @@
 {% extends 'partials/base.html.twig' %}
-{% set show_sidebar = header_var('show_sidebar')|defined(false)  %}
+
-{% set image = page.media[page.header.primaryImage] %}
+{# Define if the primary image and the attributes of width and height are shown #}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v) => (v.type == 'image' or v.type == 'vector'))|first %}
+{% set img_width = header_var('image_width')|default(1038) %}
+{% set img_height = header_var('image_height')|default(437) %}
+
+{# Set title and subtitle #}
 {% set title = page.title|raw %}
 {% set subtitle = page.header.subtitle|raw %}
 {% set columns = page.header.layout == 'standard' ? 'col-4 col-6-medium col-12-small' : 'col-6 col-12-small'  %}
@@ -9,9 +14,10 @@
 	{{ parent() }}
 	{% do assets.addCss('theme://assets/css/glightbox.min.css') %}
 	{% set styling %}
-	button.gclose.gbtn, button.gnext.gbtn, button.gprev.gbtn {
+		button.gclose.gbtn, button.gnext.gbtn, button.gprev.gbtn {
-			box-shadow: none !important;
+				box-shadow: none !important;
-		}
+			}
+		
 	{% endset %}
 {% do assets.addInlineCss(styling) %}
 {% endblock %}
@@ -28,19 +34,15 @@
 	<article class="post">
 		<header>
 			<div class="title">
-				<h2>
+				<h2>{{ title }}</h2>
-					{{ title }}
-				</h2>
 				{% if subtitle %}
-					<p>
+					<p>{{ subtitle }}</p>
-						{{ subtitle }}
-					</p>
 				{% endif %}
 			</div>
 		</header>
-		{% if image %}
+		{% if show_image and image %}
 			<span class="image featured">
-				{{ image.cropZoom(1038,437).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
+				{{ image.cropZoom(img_width,img_height).loading('lazy').attribute('decoding','async').html(title, title)|raw }}
 			</span>
 		{% endif %}
 
@@ -50,19 +52,19 @@
 		{% block portfolio %}
 			<section>
 				<div class="row aln-center">
-					{% for item in gallery %}
+				{% for item in gallery %}
-          {% set item_image = page.media[item.image] %}
+					{% set item_image = page.media[item.image] %}
 					{% set item_title = item.title %}
 					{% set item_desc = item.description %}
 					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).loading('lazy').attribute('decoding','async').attribute('itemprop','http://schema.org/image').html(item_title,item_title) %}
-          <div class="{{columns}} portfolio_item">
+					<div class="{{columns}} portfolio_item">
-            <a href="{{item_image.url}}" class="glightbox"data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc|raw}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
+						<a href="{{item_image.url}}" class="glightbox" data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc|raw}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
-              <span class="image fit">
+						<span class="image fit">
-                {{ thumbnail }}
+							{{ thumbnail }}
-              </span>
+						</span>
-            </a>
+						</a>
-          </div>
+					</div>
-					{% endfor %}
+				{% endfor %}
 				</div>
 			</section>
 		{% endblock %}
@@ -76,7 +78,9 @@
 {% endblock %}
 
 {% block sidebar %}
+{% if show_sidebar == true %}
 	{% include 'partials/sidebar_left.html.twig' %}
+{% endif %}
 {% endblock %}
 
 {% block javascripts %}