Views Theming

Explanation taken from: https://redcrackle.com/blog/drupal-8/theme-views-templates

Views default templates are located under „/core/modules/views/templates/“ folder.

Each view uses minimum of two templates:

• The first template is „views-view.html.twig“. This template is used for all views and contains the layout for the view. (view content, header, footer, exposed form and attachments)
• The second template is the style template. The default used template will vary based on the applied view style (grid, table, html list or unformatted).
  • Grid: views-view-grid.html.twig
  • Table: views-view-table.html.twig
  • HTML List: views-view-list.html.twig
  • Unformatted: views-view-unformatted.html.twig
• The third template is „views-view-fields.html.twig“. This template is used only if the view row style is set to „Fields“. This template is responsible for looping through available fields and print fields wrappers, labels and markup.
• The fourth template is „views-view-field.html.twig“. This template is used only if the view row style is set to „Fields“. This is the last template and is responsible for printing each field markup.

Each type of the view templates above can be overridden with a variety of names. The template name is a concatenation of (base template name, view machine name, view display type and view display id - separated by 2 hyphens „–“).

The following are the possible template names sorted by precedence:

• [base template name]–[view machine name]–[view display id].html.twig
• [base template name]–[view machine name]–[view display type].html.twig
• [base template name]–[view display type].html.twig
• [base template name]–[view machine name].html.twig
• [base template name].html.twig

For example; If we want to override „views-view.html.twig“ template for our view, the following template names are valid:

• [base template name]–[view machine name].html.twig
• views-view–articles-accordion–page.html.twig
• views-view–page.html.twig
• views-view–articles-accordion.html.twig
• views-view.html.twig
• views-view-field–{views machine name}–{page or block machine name}–{field name}.html.twig

• https://createdbycocoon.com/knowledge/render-individual-fields-views-templates-views-view-fieldshtmltwig

• https://herchel.com/articles/views-responsive-grid-added-drupal-10-core
• https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
• https://www.drupal.org/project/responsive_views_grid/releases/8.x-1.1

views-view-grid.css

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4;
  --grid-item--min-width: 100px;
 
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

Backlinks zu dieser Seite: