Last active
June 6, 2018 13:34
-
-
Save IvanZugec/71af4faeea34db7e99bf to your computer and use it in GitHub Desktop.
Code examples from the "Display Paragraphs Edge-to-edge using Bootstrap in Drupal 8" tutorial (http://www.webwash.net/node/262) on http://www.webwash.net.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @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. | |
* - logo: The url of the logo image, as defined in theme settings. | |
* - site_name: The name of the site. This is empty when displaying the site | |
* name has been disabled in the theme settings. | |
* - site_slogan: The slogan of the site. This is empty when displaying the site | |
* slogan has been disabled in theme settings. | |
* | |
* 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.primary_menu: Items for the primary menu region. | |
* - page.secondary_menu: Items for the secondary menu 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. | |
* | |
* @see template_preprocess_page() | |
* @see html.html.twig | |
* | |
* @ingroup templates | |
*/ | |
#} | |
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %} | |
{# Navbar #} | |
{% if page.navigation %} | |
{% 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 : container, | |
] | |
%} | |
<header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner"> | |
<div class="navbar-header"> | |
{{ page.navigation }} | |
{# .btn-navbar is used as the toggle for collapsed navbar content #} | |
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
<span class="sr-only">{{ 'Toggle navigation'|t }}</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
</div> | |
{# Navigation (collapsible) #} | |
{% if page.navigation_collapsible %} | |
<div class="navbar-collapse collapse"> | |
{{ page.navigation_collapsible }} | |
</div> | |
{% endif %} | |
</header> | |
{% endblock %} | |
{% endif %} | |
{# Main #} | |
<div role="main" class="main-container js-quickedit-main-content"> | |
<div class="container"> | |
<div class="row"> | |
{# Header #} | |
{% if page.header %} | |
{% block header %} | |
<div class="col-sm-12" role="heading"> | |
{{ page.header }} | |
</div> | |
{% endblock %} | |
{% endif %} | |
{# Highlighted #} | |
{% if page.highlighted %} | |
{% block highlighted %} | |
<div class="highlighted">{{ page.highlighted }}</div> | |
{% endblock %} | |
{% endif %} | |
{# Breadcrumbs #} | |
{% if breadcrumb %} | |
{% block breadcrumb %} | |
{{ breadcrumb }} | |
{% endblock %} | |
{% endif %} | |
{# Action Links #} | |
{% if action_links %} | |
{% block action_links %} | |
<ul class="action-links">{{ action_links }}</ul> | |
{% endblock %} | |
{% endif %} | |
{# Help #} | |
{% if page.help %} | |
{% block help %} | |
{{ page.help }} | |
{% endblock %} | |
{% endif %} | |
</div> | |
</div> | |
{# Content #} | |
<section> | |
{# Content #} | |
{% block content %} | |
<a id="main-content"></a> | |
{{ page.content }} | |
{% endblock %} | |
</section> | |
</div> | |
{% if page.footer %} | |
{% block footer %} | |
<footer class="footer {{ container }}" role="contentinfo"> | |
{{ page.footer }} | |
</footer> | |
{% endblock %} | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @file | |
* Default theme implementation to display a paragraph. | |
* | |
* Available variables: | |
* - paragraph: Full paragraph entity. | |
* - id: The paragraph ID. | |
* - bundle: The type of the paragraph, for example, "image" or "text". | |
* - authorid: The user ID of the paragraph author. | |
* - createdtime: Formatted creation date. Preprocess functions can | |
* reformat it by calling format_date() with the desired parameters on | |
* $variables['paragraph']->getCreatedTime(). | |
* - 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 = [ | |
'paragraph', | |
'paragraph--type--' ~ paragraph.bundle|clean_class, | |
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, | |
'container', | |
] | |
%} | |
<div{{ attributes.addClass(classes) }}> | |
{{ content }} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment