From c62ab4c94a75bd4f80ab66aa554efa0140241e6d Mon Sep 17 00:00:00 2001 From: Stephen Mulvihill Date: Mon, 11 Nov 2024 12:03:09 -0800 Subject: [PATCH 1/2] Add theming needed for Topic page implementation --- css/style.css | 46 ++++ sass/_overrides.scss | 1 + sass/component/_contributors.scss | 53 +++++ .../field--field-social-media-block.html.twig | 57 +++++ .../field--field-social-media-link.html.twig | 44 ++++ ...field--node--field-byline--topic.html.twig | 52 +++++ ...ode--field-most-requested--topic.html.twig | 60 +++++ ...--paragraph--field-link--feature.html.twig | 48 ++++ templates/node/node--topic.html.twig | 118 ++++++++++ templates/page/page--topic--gcweb.html.twig | 210 ++++++++++++++++++ .../paragraph/paragraph--feature.html.twig | 65 ++++++ .../paragraph--social-media-link.html.twig | 49 ++++ .../system/page-title--topic--gcweb.html.twig | 35 +++ wxt_bootstrap.theme | 70 +++++- 14 files changed, 903 insertions(+), 5 deletions(-) create mode 100644 sass/component/_contributors.scss create mode 100644 templates/field/field--field-social-media-block.html.twig create mode 100644 templates/field/field--field-social-media-link.html.twig create mode 100644 templates/field/field--node--field-byline--topic.html.twig create mode 100644 templates/field/field--node--field-most-requested--topic.html.twig create mode 100644 templates/field/field--paragraph--field-link--feature.html.twig create mode 100644 templates/node/node--topic.html.twig create mode 100644 templates/page/page--topic--gcweb.html.twig create mode 100644 templates/paragraph/paragraph--feature.html.twig create mode 100644 templates/paragraph/paragraph--social-media-link.html.twig create mode 100644 templates/system/page-title--topic--gcweb.html.twig diff --git a/css/style.css b/css/style.css index df205e2..384feaa 100644 --- a/css/style.css +++ b/css/style.css @@ -348,6 +348,52 @@ section.gc-nav h1 { float: left; } } +/** + * Contributirs (byline). + */ +.gc-contributors { + margin-top: 38px; +} + +.gc-contributors h2,.gc-contributors ul { + font-size: 87%; + margin-top: 0; +} + +.gc-contributors ul { + -webkit-padding-start: 20px; + padding-inline-start:20px; +} + +.gc-contributors ul li { + font-weight: 700; +} + +@media screen and (min-width: 992px) { + .gc-contributors { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + .gc-contributors h2 { + line-height: 1.8em; + } + .gc-contributors ul { + -webkit-padding-start: 5px; + padding-inline-start:5px; + } + .gc-contributors ul li { + display: inline-block; + margin-right: .5em; + } + .gc-contributors ul li::after { + content: "\2022"; + margin-left: .7em; + } + .gc-contributors ul li:last-child::after { + content: none; + } +} /** * $file * Visual styles for fields. diff --git a/sass/_overrides.scss b/sass/_overrides.scss index 3c5cb5f..0a813fc 100644 --- a/sass/_overrides.scss +++ b/sass/_overrides.scss @@ -3,6 +3,7 @@ @import "component/alert"; @import "component/ajax"; @import "component/book"; +@import "component/contributors"; @import "component/field"; @import "component/file"; @import "component/filter"; diff --git a/sass/component/_contributors.scss b/sass/component/_contributors.scss new file mode 100644 index 0000000..5090f5b --- /dev/null +++ b/sass/component/_contributors.scss @@ -0,0 +1,53 @@ +/** + * Contributirs (byline). + */ + +.gc-contributors { + margin-top: 38px + + h2, + ul { + font-size: 87%; + margin-top: 0; + } + + ul { + -webkit-padding-start: 20px; + padding-inline-start:20px; + + li { + font-weight: 700; + } + } +} + +@media screen and (min-width: 992px) { + .gc-contributors { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + h2 { + line-height: 1.8em; + } + + ul { + -webkit-padding-start: 5px; + padding-inline-start:5px; + + li { + display: inline-block; + margin-right: .5em; + + &:after { + content: "\2022"; + margin-left: .7em; + } + + &:last-child::after { + content: none + } + } + } + } +} diff --git a/templates/field/field--field-social-media-block.html.twig b/templates/field/field--field-social-media-block.html.twig new file mode 100644 index 0000000..bd776b6 --- /dev/null +++ b/templates/field/field--field-social-media-block.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * 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 title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - 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. + * + * @ingroup templates + * + * @see template_preprocess_field() + */ +#} + +
+

+ {{ label }} +

+ + {% if is_horizontal %} +
diff --git a/templates/field/field--field-social-media-link.html.twig b/templates/field/field--field-social-media-link.html.twig new file mode 100644 index 0000000..700c351 --- /dev/null +++ b/templates/field/field--field-social-media-link.html.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * 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 title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - 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. + * + * @ingroup templates + * + * @see template_preprocess_field() + */ +#} + +{% for item in items %} + {{ item.content }} +{% endfor %} diff --git a/templates/field/field--node--field-byline--topic.html.twig b/templates/field/field--node--field-byline--topic.html.twig new file mode 100644 index 0000000..e57b63f --- /dev/null +++ b/templates/field/field--node--field-byline--topic.html.twig @@ -0,0 +1,52 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * 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 title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - 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. + * + * @ingroup templates + * + * @see template_preprocess_field() + */ +#} + +
+

{{ label }}:

+ + +
diff --git a/templates/field/field--node--field-most-requested--topic.html.twig b/templates/field/field--node--field-most-requested--topic.html.twig new file mode 100644 index 0000000..7966f7b --- /dev/null +++ b/templates/field/field--node--field-most-requested--topic.html.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * 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 title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - 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. + * + * @ingroup templates + * + * @see template_preprocess_field() + */ +#} + +
+
+
+
+

{{ label }}

+
+ +
+
    + {% for item in items %} +
  • + {{ item.content }} +
    • + {% endfor %} +
+
+
+
+
diff --git a/templates/field/field--paragraph--field-link--feature.html.twig b/templates/field/field--paragraph--field-link--feature.html.twig new file mode 100644 index 0000000..cc5ce70 --- /dev/null +++ b/templates/field/field--paragraph--field-link--feature.html.twig @@ -0,0 +1,48 @@ +{# +/** + * @file + * Theme override for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * 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 title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - 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. + * + * @ingroup templates + * + * @see template_preprocess_field() + */ +#} + +{% for item in items %} +

+ + {{ item.content['#title'] }} + +

+{% endfor %} diff --git a/templates/node/node--topic.html.twig b/templates/node/node--topic.html.twig new file mode 100644 index 0000000..50a242a --- /dev/null +++ b/templates/node/node--topic.html.twig @@ -0,0 +1,118 @@ +{# +/** + * @file + * Theme override to display a node. + * + * Available variables: + * - node: The node entity with limited access to object properties and methods. + Only "getter" methods (method names starting with "get", "has", or "is") + and a few common methods such as "id" and "label" are available. Calling + other methods (such as node.delete) will result in an exception. + * - label: (optional) 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: (optional) Themed creation date field. + * - author_name: (optional) 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. + * + * @ingroup templates + * + * @see template_preprocess_node() + * + * @todo Remove the id attribute (or make it a class), because if that gets + * rendered twice on a page this is invalid CSS for example: two lists + * in different view modes. + */ +#} +{% + set classes = [ + node.bundle|clean_class, + node.isPromoted() ? 'is-promoted', + node.isSticky() ? 'is-sticky', + not node.isPublished() ? 'is-unpublished', + view_mode ? view_mode|clean_class, + 'clearfix', + ] +%} + + + {{ title_prefix }} + {% if label and not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %} + {{ metadata }} + +
+ {% endif %} + + {% if content.field_most_requested %} + {{ content.field_most_requested }} + {% endif %} + +
+ {{ content|without('field_most_requested', 'field_featured', 'field_social_media_block', 'field_byline') }} + +
+
+ {{ content.field_featured }} +
+ +
+ {{ content.field_social_media_block }} +
+
+ + {{ content.field_byline }} +
+ + diff --git a/templates/page/page--topic--gcweb.html.twig b/templates/page/page--topic--gcweb.html.twig new file mode 100644 index 0000000..874c978 --- /dev/null +++ b/templates/page/page--topic--gcweb.html.twig @@ -0,0 +1,210 @@ +{# +/** + * @file + * Default theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template in this directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Navigation: + * - breadcrumb: The breadcrumb trail for the current page. + * + * Page content (in order of occurrence in the default page.html.twig): + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title: The page title, for use in the actual content. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - messages: Status and error messages. Should be displayed prominently. + * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the + * view and edit tabs when displaying a node). + * - action_links: Actions local to the page, such as "Add menu" on the menu + * administration interface. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.navigation: Items for the navigation region. + * - page.navigation_collapsible: Items for the navigation (collapsible) region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.footer: Items for the footer region. + * + * @ingroup templates + * + * @see template_preprocess_page() + * @see html.html.twig + */ +#} +{% set container = 'container-fluid' %} + +{# Navbar #} +{% if page.navigation or page.navigation_collapsible %} + {% block navbar %} + + {% + set navbar_classes = [ + 'navbar', + theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default', + theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : '', + ] + %} + +
+
+
+

{{ 'Language selection'|t }}

+ {{ page.language_toggle }} +
+ {{ page.banner }} + {% if menu_type == 'horizontal' %} + + {% endif %} + {{ page.search }} +
+
+ {% if menu_type == 'default' %} + + {% elseif menu_type == 'horizontal' %} + + {% endif %} + {{ page.breadcrumb }} + + {% endblock %} +{% endif %} + +{# Main #} +{% block main %} + + {# Highlighted #} + {% if page.highlighted %} + {% block highlighted %} +
{{ page.highlighted }}
+ {% endblock %} + {% endif %} + + {# Content #} + +
+ + {# Header #} + {% if page.header %} + {% block header %} +
+ {{ page.header }} +
+ {% endblock %} + {% endif %} + +
+ + {# Breadcrumbs #} + {% if breadcrumb %} + {% block breadcrumb %} + {{ breadcrumb }} + {% endblock %} + {% endif %} + + {# Action Links #} + {% if action_links %} + {% block action_links %} +
    {{ action_links }}
+ {% endblock %} + {% endif %} + + {# Help #} + {% if page.help %} + {% block help %} + {{ page.help }} + {% endblock %} + {% endif %} + + {# Content #} + {% block content %} + + {{ page.content }} +
+ {{ page.content_footer|set_attribute('class', 'container') }} +
+ {% endblock %} +
+ +
+ +{% endblock %} + + +{% if page.footer %} + {% if gcweb_cdn_footer_enable %} +
+
+
+ {% else %} + {% block footer %} +
+

{{ 'About this site'|t }}

+
+ {{ page.footer }} +
+
+
+
+ {{ page.branding }} +
+ {{ 'Top of Page'|t }} +
+
+ {{ +
+
+
+
+
+ {% endblock %} + {% endif %} +{% endif %} diff --git a/templates/paragraph/paragraph--feature.html.twig b/templates/paragraph/paragraph--feature.html.twig new file mode 100644 index 0000000..848979e --- /dev/null +++ b/templates/paragraph/paragraph--feature.html.twig @@ -0,0 +1,65 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph 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. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - 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_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'mrgn-bttm-xl', + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished' + ] +%} +{% block paragraph %} + +
+
+
+ {{ content.field_image }} +
+
+ +
+ {{ content.field_link }} + {{ content.field_description }} +
+
+ +{% endblock paragraph %} diff --git a/templates/paragraph/paragraph--social-media-link.html.twig b/templates/paragraph/paragraph--social-media-link.html.twig new file mode 100644 index 0000000..bdba2f1 --- /dev/null +++ b/templates/paragraph/paragraph--social-media-link.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph 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. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - 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_paragraph() + * + * @ingroup themeable + */ +#} + +{% block paragraph %} +
  • + + {{ content.field_link.0['#title'] }} + {{ ' on'|t }} {{ link_provider_label }} + +
    • +{% endblock paragraph %} diff --git a/templates/system/page-title--topic--gcweb.html.twig b/templates/system/page-title--topic--gcweb.html.twig new file mode 100644 index 0000000..490972d --- /dev/null +++ b/templates/system/page-title--topic--gcweb.html.twig @@ -0,0 +1,35 @@ +{# +/** + * @file + * Default theme implementation for page titles. + * + * Available variables: + * - title_attributes: HTML attributes for the page title element. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title: The page title, for use in the actual content. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - is_book: TRUE if current page is part of a book + * + * @ingroup templates + * + * @see template_preprocess_page_title() + */ +#} + +
    + +
    +

    {{ title }}

    +

    {{ intro[0].value }}

    +
    + + {% if topic_image_url %} +
    +

    + +

    +
    + {% endif %} +
    diff --git a/wxt_bootstrap.theme b/wxt_bootstrap.theme index a4f0cf7..88a0cae 100644 --- a/wxt_bootstrap.theme +++ b/wxt_bootstrap.theme @@ -25,6 +25,7 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\file\Entity\File; +use Drupal\image\Entity\ImageStyle; use Drupal\node\NodeInterface; /** @@ -182,15 +183,20 @@ function wxt_bootstrap_preprocess_input__button(&$vars) { /** * Implements hook_preprocess_image(). */ -function wxt_bootstrap_preprocess_image(&$vars) { +function wxt_bootstrap_preprocess_image(&$variables) { $route_name = \Drupal::routeMatch()->getRouteName(); if ($route_name == 'page_manager.page_view_blog_blog-panels_variant-0') { - if ($vars['style_name'] == 'blog_spotlight') { - unset($vars['attributes']['width']); - unset($vars['attributes']['height']); - $vars['attributes']['class'] = 'mrgn-bttm-md thumbnail'; + if ($variables['style_name'] == 'blog_spotlight') { + unset($variables['attributes']['width']); + unset($variables['attributes']['height']); + $variables['attributes']['class'] = 'mrgn-bttm-md thumbnail'; } } + + // Optionally, add a class based on image style. + if (!empty($variables['style_name']) && $variables['style_name'] == 'featured') { + $variables['attributes']['class'][] = 'full-width'; + } } /** @@ -258,6 +264,19 @@ function wxt_bootstrap_preprocess_field(&$variables) { $variables['video_uri'] = \Drupal::service('file_url_generator')->generateString($video_uri); $variables['video_title'] = $media->getName(); } + + if ($variables['element']['#field_name'] === 'field_social_media_block') { + // Access each referenced block content entity. + foreach ($variables['items'] as $delta => $item) { + if (isset($item['content']['#block_content']) && $item['content']['#block_content']->hasField('field_display_horizontal')) { + // Retrieve the boolean value of 'field_display_horizontal'. + $is_horizontal = $item['content']['#block_content']->get('field_display_horizontal')->value; + + // Set a variable that can be used in the template. + $variables['is_horizontal'] = $is_horizontal; + } + } + } } /** @@ -277,4 +296,45 @@ function wxt_bootstrap_preprocess_page_title(&$variables) { if ($node instanceof NodeInterface && $node->hasField($checkFieldName) && !$node->get($checkFieldName)->isEmpty()) { $variables['lead_title'] = $node->get($checkFieldName)->first()->getString(); } + + // Check if the current page is displaying a node. + if ($node instanceof NodeInterface) { + // Check if the node is of type "topic". + if ($node->bundle() === 'topic' && $node->hasField('field_featured_image') && !$node->get('field_featured_image')->isEmpty()) { + $variables['intro'] = $node->get('field_introduction')->getValue(); + + // Load the media entity from the featured image field. + $media = $node->get('field_featured_image')->entity; + + // Check if the media entity has an image file. + if ($media && $media->hasField('field_media_image') && !$media->get('field_media_image')->isEmpty()) { + // Get the image file entity. + $file = $media->get('field_media_image')->entity; + + if ($file) { + // Generate the URL with the specified image style. + $image_url = $file->getFileUri(); + $variables['topic_image_url'] = ImageStyle::load('topic_image')->buildUrl($image_url); + } + } + } + } +} + +/** + * Implements hook_preprocess_paragraph(). + */ +function wxt_bootstrap_preprocess_paragraph(&$variables) { + // Check if this is a 'social_media_link' paragraph type. + if ($variables['paragraph']->bundle() === 'social_media_link') { + // Retrieve the key of the field_link_provider. + $key = $variables['paragraph']->get('field_link_provider')->value; + + // Load the field definition to get allowed values. + $field_definition = $variables['paragraph']->getFieldDefinition('field_link_provider'); + $allowed_values = $field_definition->getSetting('allowed_values'); + + // Get the label for the key. + $variables['link_provider_label'] = $allowed_values[$key] ?? $key; + } } From 8f788a284cb4ca5677c10463ff56cacf9f0e08a8 Mon Sep 17 00:00:00 2001 From: Stephen Mulvihill Date: Tue, 12 Nov 2024 14:08:27 -0800 Subject: [PATCH 2/2] 3400277 - Add byline support --- config/optional/block.block.sidebar.yml | 48 ------------------- config/optional/block.block.sidebar_fr.yml | 44 ----------------- css/style.css | 8 +++- sass/component/_contributors.scss | 16 +++++-- ...tml.twig => field--field-byline.html.twig} | 2 +- wxt_bootstrap.theme | 1 + 6 files changed, 21 insertions(+), 98 deletions(-) delete mode 100644 config/optional/block.block.sidebar.yml delete mode 100644 config/optional/block.block.sidebar_fr.yml rename templates/field/{field--node--field-byline--topic.html.twig => field--field-byline.html.twig} (98%) diff --git a/config/optional/block.block.sidebar.yml b/config/optional/block.block.sidebar.yml deleted file mode 100644 index a5d681e..0000000 --- a/config/optional/block.block.sidebar.yml +++ /dev/null @@ -1,48 +0,0 @@ -langcode: en -status: true -dependencies: - config: - - system.menu.sidebar - module: - - language - - menu_block - - node - theme: - - wxt_bootstrap -id: sidebar -theme: wxt_bootstrap -region: sidebar_first -weight: 0 -provider: null -plugin: 'menu_block:sidebar' -settings: - id: 'menu_block:sidebar' - label: Sidebar - provider: menu_block - label_display: visible - follow: false - follow_parent: child - level: 1 - depth: 0 - expand: true - parent: 'sidebar:' - suggestion: sidebar - custom_level: '1' - hide_children: 0 - expand_only_active_trails: 1 - render_parent: false -visibility: - node_type: - id: 'entity_bundle:node' - bundles: - page: page - negate: false - context_mapping: - node: '@node.node_route_context:node' - language: - id: language - langcodes: - en: en - negate: false - context_mapping: - language: '@language.current_language_context:language_interface' diff --git a/config/optional/block.block.sidebar_fr.yml b/config/optional/block.block.sidebar_fr.yml deleted file mode 100644 index aa53165..0000000 --- a/config/optional/block.block.sidebar_fr.yml +++ /dev/null @@ -1,44 +0,0 @@ -langcode: en -status: true -dependencies: - config: - - system.menu.sidebar_fr - module: - - language - - menu_block - - node - theme: - - wxt_bootstrap -id: sidebar_fr -theme: wxt_bootstrap -region: sidebar_first -weight: 0 -provider: null -plugin: 'menu_block:sidebar_fr' -settings: - id: 'menu_block:sidebar_fr' - label: 'Barre latérale' - provider: menu_block - label_display: visible - follow: false - follow_parent: child - level: 1 - depth: 0 - expand: true - parent: 'sidebar_fr:' - suggestion: sidebar_fr -visibility: - node_type: - id: 'entity_bundle:node' - bundles: - page: page - negate: false - context_mapping: - node: '@node.node_route_context:node' - language: - id: language - langcodes: - fr: fr - negate: false - context_mapping: - language: '@language.current_language_context:language_interface' diff --git a/css/style.css b/css/style.css index 384feaa..87b6826 100644 --- a/css/style.css +++ b/css/style.css @@ -351,12 +351,16 @@ section.gc-nav h1 { /** * Contributirs (byline). */ -.gc-contributors { +.page-node-type-topic .gc-contributors { margin-top: 38px; } +.page-node-type-page .gc-contributors { + margin-bottom: 30px; +} + .gc-contributors h2,.gc-contributors ul { - font-size: 87%; + font-size: 1em; margin-top: 0; } diff --git a/sass/component/_contributors.scss b/sass/component/_contributors.scss index 5090f5b..e4bfc64 100644 --- a/sass/component/_contributors.scss +++ b/sass/component/_contributors.scss @@ -2,12 +2,22 @@ * Contributirs (byline). */ -.gc-contributors { - margin-top: 38px +.page-node-type-topic { + .gc-contributors { + margin-top: 38px; + } +} +.page-node-type-page { + .gc-contributors { + margin-bottom: 30px; + } +} + +.gc-contributors { h2, ul { - font-size: 87%; + font-size: 1em; margin-top: 0; } diff --git a/templates/field/field--node--field-byline--topic.html.twig b/templates/field/field--field-byline.html.twig similarity index 98% rename from templates/field/field--node--field-byline--topic.html.twig rename to templates/field/field--field-byline.html.twig index e57b63f..f0bae14 100644 --- a/templates/field/field--node--field-byline--topic.html.twig +++ b/templates/field/field--field-byline.html.twig @@ -40,7 +40,7 @@ #}
    -

    {{ label }}:

    +

    {{ 'From:'|t }}

      {% for item in items %} diff --git a/wxt_bootstrap.theme b/wxt_bootstrap.theme index 88a0cae..2a87209 100644 --- a/wxt_bootstrap.theme +++ b/wxt_bootstrap.theme @@ -27,6 +27,7 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\file\Entity\File; use Drupal\image\Entity\ImageStyle; use Drupal\node\NodeInterface; +use Drupal\taxonomy\Entity\Term; /** * Implements hook_form_alter().