Browse Source

article templates

dependabot/npm_and_yarn/acorn-5.7.4
Rob Drew 6 years ago
parent
commit
f8f6982275
  1. 20
      lmmi_journal.theme
  2. 33
      templates/article_pages/article--hero.html.twig
  3. 156
      templates/article_pages/node--journal-article.html.twig
  4. 144
      templates/article_pages/node--journal-article.html.twig.xx
  5. 46
      templates/article_pages/page--journal-article.html.twig
  6. 65
      templates/field--entity-reference.html.twig
  7. 29
      templates/media--image--hero.html.twig
  8. 1
      templates/menu--author_tasks.html.twig

20
lmmi_journal.theme

@ -7,3 +7,23 @@ function lmmi_journal_theme_suggestions_page_alter(array &$suggestions, array $v
$suggestions[] = 'page__' . $node->bundle(); $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());
}
}
}

33
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>

156
templates/article_pages/node--journal-article.html.twig

@ -1,74 +1,8 @@
{# {#{{ dump() }}#}
/**
* @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) }}#} {#{{ kint(node) }}#}
{% set toc = drupal_entity('block', 'tableofcontents', check_access=false) %}
{% set tabs = drupal_block('local_tasks_block') %}
{% {%
set classes = [ set classes = [
'node', 'node',
@ -84,61 +18,45 @@
{{ attach_library('magazineplus/node') }} {{ 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#} <article{{ attributes.addClass(classes) }}>
<header class="article-title-banner node__header paragraph-responsive-typography-enabled article-header"> {#admin tabs#}
<div class="bg-image"> <div class="node__container">
{{ content.field_article_highlight_image}} {% block node_side %}
</div> {% endblock %}
<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> {{ toc }}
{#start of article #}
<div{{ content_attributes.addClass( 'node__main-content', 'clearfix') }}>
{{ tabs }}
{% block header_top %}
{% endblock %}
{#admin tabs#}
{{ drupal_block('local_tasks_block') }}
{#toc#} {#main content#}
{{ drupal_region('hidden_blocks_collection') }} {% block content %}
{#main content#} {{ content|without( 'field_article_highlight_image' )}}
{% block content %} {% endblock %}
{{ content|without( 'field_article_highlight_image' )}} {% block content_bottom %}
{% endblock %} {% endblock %}
{% block content_bottom %} </div>
{% endblock %} </div>
</article>
</div>
</div> </div>
</div> </div>
</article> </div>

144
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>

46
templates/article_pages/page--journal-article.html.twig

@ -74,7 +74,7 @@
* @see html.html.twig * @see html.html.twig
*/ */
#} #}
{{dump()}} {#{{dump()}}#}
{% if page.slideout %} {% if page.slideout %}
{# slideout #} {# slideout #}
<div class="clearfix slideout {{ slideout_background_color }}{{ (slideout_blocks_paddings) ? ' region--no-block-paddings' : '' }}{{ (slideout_region_paddings) ? ' region--no-paddings' : '' }}"> <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 #} {# page-start #}
<div id="page-start" class="clearfix page-start"></div> <div id="page-start" class="clearfix page-start"></div>
{% if page.system_messages %} {#{% if page.system_messages %}#}
<div class="system-messages clearfix"> {#<div class="system-messages clearfix">#}
<div class="container"> {#<div class="container">#}
<div class="row"> {#<div class="row">#}
<div class="col-md-12"> {#<div class="col-md-12">#}
{{ page.system_messages }} {#{{ page.system_messages }}#}
</div> {#</div>#}
</div> {#</div>#}
</div> {#</div>#}
</div> {#</div>#}
{% endif %} {#{% endif %}#}
{% if page.highlighted_top %} {% if page.highlighted_top %}
{# highlighted-top #} {# highlighted-top #}
@ -419,10 +419,17 @@
{# main-content #} {# main-content #}
<div class="clearfix main-content region--dark-typography region--white-background {{ main_content_separator }}"> <div class="clearfix main-content region--dark-typography region--white-background {{ main_content_separator }}">
<div class="container"> {#<div class="container">#}
<div class="clearfix main-content__container"> {#<div class="clearfix main-content__container">#}
<div class="row"> {#<div class="row">#}
<section class="{{ main_grid_class }}"> {#<section class="{{ main_grid_class }}">#}
<div >
<div>
<div>
<section>
{# main #} {# 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' : '' }}" <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" %} {% if main_content_animations == "enabled" %}
@ -434,6 +441,10 @@
</div> </div>
{# EOF:main #} {# EOF:main #}
</section> </section>
{#sidebars#}
{% if page.sidebar_first %} {% if page.sidebar_first %}
<aside class="{{ sidebar_first_grid_class }}"> <aside class="{{ sidebar_first_grid_class }}">
{# sidebar-first #} {# sidebar-first #}
@ -458,6 +469,9 @@
{# EOF:sidebar-second #} {# EOF:sidebar-second #}
</aside> </aside>
{% endif %} {% endif %}
{#end of sidebars#}
</div> </div>
</div> </div>
</div> </div>

65
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 %}

29
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>

1
templates/menu--author_tasks.html.twig

@ -18,7 +18,6 @@
* - in_active_trail: TRUE if the link is in the active trail. * - in_active_trail: TRUE if the link is in the active trail.
*/ */
#} #}
{{ dump() }}
{% import _self as menus %} {% import _self as menus %}
{# {#

Loading…
Cancel
Save