From f8f6982275a3720df52814f8837387ce1afb3b3e Mon Sep 17 00:00:00 2001
From: Rob Drew <rdrew@upei.ca>
Date: Fri, 19 Oct 2018 11:51:19 -0300
Subject: [PATCH] article templates

---
 lmmi_journal.theme                            |  20 +++
 .../article_pages/article--hero.html.twig     |  33 ++++
 .../node--journal-article.html.twig           | 158 +++++-------------
 .../node--journal-article.html.twig.xx        | 144 ++++++++++++++++
 .../page--journal-article.html.twig           |  46 +++--
 templates/field--entity-reference.html.twig   |  65 +++++++
 templates/media--image--hero.html.twig        |  29 ++++
 templates/menu--author_tasks.html.twig        |   1 -
 8 files changed, 359 insertions(+), 137 deletions(-)
 create mode 100644 templates/article_pages/article--hero.html.twig
 create mode 100644 templates/article_pages/node--journal-article.html.twig.xx
 create mode 100644 templates/field--entity-reference.html.twig
 create mode 100644 templates/media--image--hero.html.twig

diff --git a/lmmi_journal.theme b/lmmi_journal.theme
index a21da4d..cc2c186 100644
--- a/lmmi_journal.theme
+++ b/lmmi_journal.theme
@@ -7,3 +7,23 @@ function lmmi_journal_theme_suggestions_page_alter(array &$suggestions, array $v
     $suggestions[] = 'page__' . $node->bundle();
   }
 }
+
+
+/**
+ * Implements hook_preprocess_node().
+ * @param $variables
+ */
+function lmmi_journal_preprocess_node(&$variables) {
+  $node = $variables['elements']['#node'];
+  $bundle = $node->bundle();
+
+  if ($bundle == 'journal_article' && $variables['elements']['#view_mode'] == 'hero') {
+    $hero_image = $node->get('field_article_highlight_image')->getValue();
+
+    if (!empty($hero_image)) {
+      $entity = Media::load($hero_image[0]['target_id']);
+      $variables['hero_image'] = ImageStyle::load('article_hero')->buildUrl($entity->field_image->entity->getFileUri());
+    }
+  }
+}
+
diff --git a/templates/article_pages/article--hero.html.twig b/templates/article_pages/article--hero.html.twig
new file mode 100644
index 0000000..e2d5c66
--- /dev/null
+++ b/templates/article_pages/article--hero.html.twig
@@ -0,0 +1,33 @@
+<header class="article-title-banner node__header paragraph-responsive-typography-enabled article-header">
+  <div class="bg-image">
+{{  content.field_article_highlight_image}}
+  </div>
+  <div class="container article-info--wrapper">
+  
+        {% block title_area %}
+          {{ title_prefix }}
+            <h1{{ title_attributes.addClass('article--title title') }}>
+              {{ label }}
+            </h1>
+            <h1{{ title_attributes.addClass('article--title title sr-only') }}>
+              {{ label }}
+            </h1>
+          {{ title_suffix }}
+        {% endblock %}
+  <section class="article-header--metadata">
+    <div class="left">
+      <div class="article--contributor">
+        Robert N. Drew
+      </div>
+      <div class="article--contributor__affiliation">University of Prince Edward Island</div>
+    </div>
+    <div class="right">
+      <div class="article--type">Article</div>
+      <div class="article--date-published">
+     Published September 20, 2018 
+      </div>
+    </div>
+  </section>
+  </div>
+
+</header>
diff --git a/templates/article_pages/node--journal-article.html.twig b/templates/article_pages/node--journal-article.html.twig
index 9a65c01..3a0c92d 100644
--- a/templates/article_pages/node--journal-article.html.twig
+++ b/templates/article_pages/node--journal-article.html.twig
@@ -1,74 +1,8 @@
-{#
-/**
- * @file
- * Magazine+'s theme implementation to display a node.
- *
- * Available variables:
- * - node: The node entity with limited access to object properties and methods.
- *   Only method names starting with "get", "has", or "is" and a few common
- *   methods such as "id", "label", and "bundle" are available. For example:
- *   - node.getCreatedTime() will return the node creation timestamp.
- *   - node.hasField('field_example') returns TRUE if the node bundle includes
- *     field_example. (This does not indicate the presence of a value in this
- *     field.)
- *   - node.isPublished() will return whether the node is published or not.
- *   Calling other methods, such as node.delete(), will result in an exception.
- *   See \Drupal\node\Entity\Node for a full list of public properties and
- *   methods for the node object.
- * - label: The title of the node.
- * - content: All node items. Use {{ content }} to print them all,
- *   or print a subset such as {{ content.field_example }}. Use
- *   {{ content|without('field_example') }} to temporarily suppress the printing
- *   of a given child element.
- * - author_picture: The node author user entity, rendered using the "compact"
- *   view mode.
- * - metadata: Metadata for this node.
- * - date: Themed creation date field.
- * - author_name: Themed author name field.
- * - url: Direct URL of the current node.
- * - display_submitted: Whether submission information should be displayed.
- * - attributes: HTML attributes for the containing element.
- *   The attributes.class element may contain one or more of the following
- *   classes:
- *   - node: The current template type (also known as a "theming hook").
- *   - node--type-[type]: The current node type. For example, if the node is an
- *     "Article" it would result in "node--type-article". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
- *     teaser would result in: "node--view-mode-teaser", and
- *     full: "node--view-mode-full".
- *   The following are controlled through the node publishing options.
- *   - node--promoted: Appears on nodes promoted to the front page.
- *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
- *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
- *     admins.
- * - title_attributes: Same as attributes, except applied to the main title
- *   tag that appears in the template.
- * - content_attributes: Same as attributes, except applied to the main
- *   content tag that appears in the template.
- * - author_attributes: Same as attributes, except applied to the author of
- *   the node tag that appears in the template.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
- * - view_mode: View mode; for example, "teaser" or "full".
- * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
- * - page: Flag for the full page state. Will be true if view_mode is 'full'.
- * - readmore: Flag for more state. Will be true if the teaser content of the
- *   node cannot hold the main body content.
- * - logged_in: Flag for authenticated user status. Will be true when the
- *   current user is a logged-in member.
- * - is_admin: Flag for admin user status. Will be true when the current user
- *   is an administrator.
- *
- * @see template_preprocess_node()
- */
-#}
-{{ dump() }}
+{#{{ dump() }}#}
 
 {#{{ kint(node) }}#}
+{% set toc = drupal_entity('block', 'tableofcontents', check_access=false) %}
+{% set tabs = drupal_block('local_tasks_block') %}
 {%
   set classes = [
     'node',
@@ -84,61 +18,45 @@
 {{ attach_library('magazineplus/node') }}
 
 
+            {#main banner#}
+            {% include '@lmmi_journal/article_pages/article--hero.html.twig' %}
+<div class="container">
+  <div class="clearfix">
+    <div class="row">
+      <div class="col-md-12">
 
-<article{{ attributes.addClass(classes) }}>
-  <div class="node__container">
-    {% block node_side %}
-    {% endblock %}
-    <div{{ content_attributes.addClass('node__main-content', 'clearfix') }}>
-      {% block header_top %}
-      {% endblock %}
 
-{#main banner#}
-<header class="article-title-banner node__header paragraph-responsive-typography-enabled article-header">
-  <div class="bg-image">
-{{  content.field_article_highlight_image}}
-  </div>
-  <div class="article-info--wrapper">
-  
-        {% block title_area %}
-          {{ title_prefix }}
-            <h1{{ title_attributes.addClass('article--title title') }}>
-              {{ label }}
-            </h1>
-            <h1{{ title_attributes.addClass('article--title title sr-only') }}>
-              {{ label }}
-            </h1>
-          {{ title_suffix }}
-        {% endblock %}
-  <section class="article-header--metadata">
-    <div class="left">
-      <div class="article--contributor">
-        Robert N. Drew
-      </div>
-      <div class="article--contributor__affiliation">University of Prince Edward Island</div>
-    </div>
-    <div class="right">
-      <div class="article--type">Article</div>
-      <div class="article--date-published">
-     Published September 20, 2018 
+        <article{{ attributes.addClass(classes) }}>
+          {#admin tabs#}
+          <div class="node__container">
+            {% block node_side %}
+            {% endblock %}
+
+
+
+            {{ toc }}
+            {#start of article #}
+            <div{{ content_attributes.addClass( 'node__main-content', 'clearfix') }}>
+
+            {{ tabs }}
+              {% block header_top %}
+              {% endblock %}
+
+
+
+              {#main content#}
+              {% block content %}
+              {{  content|without( 'field_article_highlight_image' )}}
+              {% endblock %}
+              {% block content_bottom %}
+              {% endblock %}
+            </div>
+          </div>
+        </article>
+
       </div>
     </div>
-  </section>
   </div>
+</div>
 
-</header>
 
-      
-{#admin tabs#}
-{{ drupal_block('local_tasks_block') }}
-{#toc#}
-{{ drupal_region('hidden_blocks_collection') }}
-{#main content#}
-      {% block content %}
-{{  content|without( 'field_article_highlight_image' )}}
-      {% endblock %}
-      {% block content_bottom %}
-      {% endblock %}
-    </div>
-  </div>
-</article>
diff --git a/templates/article_pages/node--journal-article.html.twig.xx b/templates/article_pages/node--journal-article.html.twig.xx
new file mode 100644
index 0000000..9a65c01
--- /dev/null
+++ b/templates/article_pages/node--journal-article.html.twig.xx
@@ -0,0 +1,144 @@
+{#
+/**
+ * @file
+ * Magazine+'s theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ */
+#}
+{{ dump() }}
+
+{#{{ kint(node) }}#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'clearfix',
+  ]
+%}
+{{ attach_library('classy/node') }}
+{{ attach_library('magazineplus/node') }}
+
+
+
+<article{{ attributes.addClass(classes) }}>
+  <div class="node__container">
+    {% block node_side %}
+    {% endblock %}
+    <div{{ content_attributes.addClass('node__main-content', 'clearfix') }}>
+      {% block header_top %}
+      {% endblock %}
+
+{#main banner#}
+<header class="article-title-banner node__header paragraph-responsive-typography-enabled article-header">
+  <div class="bg-image">
+{{  content.field_article_highlight_image}}
+  </div>
+  <div class="article-info--wrapper">
+  
+        {% block title_area %}
+          {{ title_prefix }}
+            <h1{{ title_attributes.addClass('article--title title') }}>
+              {{ label }}
+            </h1>
+            <h1{{ title_attributes.addClass('article--title title sr-only') }}>
+              {{ label }}
+            </h1>
+          {{ title_suffix }}
+        {% endblock %}
+  <section class="article-header--metadata">
+    <div class="left">
+      <div class="article--contributor">
+        Robert N. Drew
+      </div>
+      <div class="article--contributor__affiliation">University of Prince Edward Island</div>
+    </div>
+    <div class="right">
+      <div class="article--type">Article</div>
+      <div class="article--date-published">
+     Published September 20, 2018 
+      </div>
+    </div>
+  </section>
+  </div>
+
+</header>
+
+      
+{#admin tabs#}
+{{ drupal_block('local_tasks_block') }}
+{#toc#}
+{{ drupal_region('hidden_blocks_collection') }}
+{#main content#}
+      {% block content %}
+{{  content|without( 'field_article_highlight_image' )}}
+      {% endblock %}
+      {% block content_bottom %}
+      {% endblock %}
+    </div>
+  </div>
+</article>
diff --git a/templates/article_pages/page--journal-article.html.twig b/templates/article_pages/page--journal-article.html.twig
index 8cebb66..39fd6d1 100644
--- a/templates/article_pages/page--journal-article.html.twig
+++ b/templates/article_pages/page--journal-article.html.twig
@@ -74,7 +74,7 @@
  * @see html.html.twig
  */
 #}
-{{dump()}}
+{#{{dump()}}#}
 {% if page.slideout %}
   {# slideout #}
   <div class="clearfix slideout {{ slideout_background_color }}{{ (slideout_blocks_paddings) ? ' region--no-block-paddings' : '' }}{{ (slideout_region_paddings) ? ' region--no-paddings' : '' }}">
@@ -277,17 +277,17 @@
   {# page-start #}
   <div id="page-start" class="clearfix page-start"></div>
 
-  {% if page.system_messages %}
-    <div class="system-messages clearfix">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            {{ page.system_messages }}
-          </div>
-        </div>
-      </div>
-    </div>
-  {% endif %}
+  {#{% if page.system_messages %}#}
+    {#<div class="system-messages clearfix">#}
+      {#<div class="container">#}
+        {#<div class="row">#}
+          {#<div class="col-md-12">#}
+            {#{{ page.system_messages }}#}
+          {#</div>#}
+        {#</div>#}
+      {#</div>#}
+    {#</div>#}
+  {#{% endif %}#}
 
   {% if page.highlighted_top %}
     {# highlighted-top #}
@@ -419,10 +419,17 @@
 
   {# main-content #}
   <div class="clearfix main-content region--dark-typography region--white-background  {{ main_content_separator }}">
-    <div class="container">
-      <div class="clearfix main-content__container">
-        <div class="row">
-          <section class="{{ main_grid_class }}">
+    {#<div class="container">#}
+      {#<div class="clearfix main-content__container">#}
+        {#<div class="row">#}
+          {#<section class="{{ main_grid_class }}">#}
+            
+    <div >
+      <div>
+        <div>
+          <section>
+
+
             {# main #}
             <div class="clearfix main-content__section{{ (main_content_animations == "enabled") ? ' fade' : '' }}{{ (main_content_blocks_paddings) ? ' region--no-block-paddings' : '' }}{{ (main_content_region_paddings) ? ' region--no-paddings' : '' }}"
               {% if main_content_animations == "enabled" %}
@@ -434,6 +441,10 @@
             </div>
             {# EOF:main #}
           </section>
+
+
+
+{#sidebars#}
           {% if page.sidebar_first %}
             <aside class="{{ sidebar_first_grid_class }}">
               {# sidebar-first #}
@@ -458,6 +469,9 @@
               {# EOF:sidebar-second #}
             </aside>
           {% endif %}
+{#end of sidebars#}
+
+          
         </div>
       </div>
     </div>
diff --git a/templates/field--entity-reference.html.twig b/templates/field--entity-reference.html.twig
new file mode 100644
index 0000000..b227589
--- /dev/null
+++ b/templates/field--entity-reference.html.twig
@@ -0,0 +1,65 @@
+{#
+/**
+ * @file
+ * Magazine+'s theme override for taxonomy term fields.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the label.
+ * - label: The label for the field.
+ * - content_attributes: HTML attributes for the content.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ * @see bartik_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    'field--entity-reference-target-type-' ~ entity_reference_target_type|clean_class,
+    'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'inline' ? 'inline',
+  ]
+%}
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/media--image--hero.html.twig b/templates/media--image--hero.html.twig
new file mode 100644
index 0000000..0e45077
--- /dev/null
+++ b/templates/media--image--hero.html.twig
@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item.
+ *
+ * Available variables:
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'media',
+    'media--type-' ~ media.bundle()|clean_class,
+    not media.isPublished() ? 'media--unpublished',
+    view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+<article{{ attributes.addClass(classes) }}>
+  {{ title_suffix.contextual_links }}
+  {% if content %}
+    {{ content }}
+  {% endif %}
+</article>
diff --git a/templates/menu--author_tasks.html.twig b/templates/menu--author_tasks.html.twig
index c745499..2cb096c 100644
--- a/templates/menu--author_tasks.html.twig
+++ b/templates/menu--author_tasks.html.twig
@@ -18,7 +18,6 @@
  *   - in_active_trail: TRUE if the link is in the active trail.
  */
 #}
-{{ dump() }}
 {% import _self as menus %}
 
 {#