You are here

paragraph--hero--default.html.twig in Open Social 8.4

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.

File

modules/social_features/social_landing_page/templates/paragraph--hero--default.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a paragraph.
  5. *
  6. * Available variables:
  7. * - paragraph: Full paragraph entity.
  8. * Only method names starting with "get", "has", or "is" and a few common
  9. * methods such as "id", "label", and "bundle" are available. For example:
  10. * - paragraph.getCreatedTime() will return the paragraph creation timestamp.
  11. * - paragraph.id(): The paragraph ID.
  12. * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
  13. * - paragraph.getOwnerId(): The user ID of the paragraph author.
  14. * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
  15. * and methods for the paragraph object.
  16. * - content: All paragraph items. Use {{ content }} to print them all,
  17. * or print a subset such as {{ content.field_example }}. Use
  18. * {{ content|without('field_example') }} to temporarily suppress the printing
  19. * of a given child element.
  20. * - attributes: HTML attributes for the containing element.
  21. * The attributes.class element may contain one or more of the following
  22. * classes:
  23. * - paragraphs: The current template type (also known as a "theming hook").
  24. * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
  25. * "Image" it would result in "paragraphs--type--image". Note that the machine
  26. * name will often be in a short form of the human readable label.
  27. * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
  28. * preview would result in: "paragraphs--view-mode--preview", and
  29. * default: "paragraphs--view-mode--default".
  30. * - view_mode: View mode; for example, "preview" or "full".
  31. * - logged_in: Flag for authenticated user status. Will be true when the
  32. * current user is a logged-in member.
  33. * - is_admin: Flag for admin user status. Will be true when the current user
  34. * is an administrator.
  35. *
  36. * @see template_preprocess_paragraph()
  37. *
  38. * @ingroup themeable
  39. */
  40. #}
  41. {{ attach_library('socialbase/hero')}}
  42. {{ attach_library('social_landing_page/section.hero')}}
  43. {%
  44. set cover_classes = [
  45. 'paragraph--' ~ paragraph.bundle|clean_class,
  46. 'cover',
  47. 'brand-bg-primary',
  48. 'cover--landing',
  49. 'hero',
  50. hero_styled_image_url ? 'cover-img cover-img-gradient',
  51. ]
  52. %}
  53. <div{{ attributes.addClass(cover_classes) }} {% if hero_styled_image_url %} style="background-image: url('{{ hero_styled_image_url }}');" {% endif %}>
  54. <div class="hero__bgimage-overlay"></div>
  55. {% if node_edit_url %}
  56. <div class="hero-action-button">
  57. <a href="{{ node_edit_url }}" title="Edit content" class="btn btn-default btn-floating waves-effect waves-circle">
  58. <svg class="icon-gray icon-medium">
  59. <use xlink:href="#icon-edit"></use>
  60. </svg>
  61. </a>
  62. </div>
  63. {% endif %}
  64. <div class="cover-wrap container">
  65. <div class="cover-small">
  66. <h1 class="page-title">{{ content.field_hero_title }}</h1>
  67. <h3 class="page-subtitle">{{ content.field_hero_subtitle }}</h3>
  68. <footer class="hero-footer">
  69. {{ content.field_hero_buttons }}
  70. </footer>
  71. </div>
  72. </div> {# cover-wrap #}
  73. </div> {# cover #}