Paragraphs Grid module settings ignored

drupal.stackexchange https://drupal.stackexchange.com/questions/294529

  •  25-02-2021
  •  | 
  •  

Question

I'm using the Paragraphs grid module to display multiple paragraph entities in a grid. I followed the getting-started video and created a test page (see below for the source it generated), but it seems to be ignoring the grid settings I've chosen. I started by setting my first paragraph to full-width, and the next two to "2 columns" as shown in the video.

Looking at the elements in Chrome's inspector, the only classes set on these paragraphs contain only seemingly non-grid-related types: paragraph paragraph--type--basic-paragraph paragraph--view-mode--default paragraph--id--14. The source from what I can tell contains no grid-related markup or classes.

What could be causing the module not to behave as expected?

<!DOCTYPE html>
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/  dc: http://purl.org/dc/terms/  foaf: http://xmlns.com/foaf/0.1/  og: http://ogp.me/ns#  rdfs: http://www.w3.org/2000/01/rdf-schema#  schema: http://schema.org/  sioc: http://rdfs.org/sioc/ns#  sioct: http://rdfs.org/sioc/types#  skos: http://www.w3.org/2004/02/skos/core#  xsd: http://www.w3.org/2001/XMLSchema# ">
  <head>
    <meta charset="utf-8" />
<meta name="Generator" content="Drupal 8 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="shortcut icon" href="/Logo.png" type="image/png" />
<link rel="canonical" href="https://wilmettewatch.com/test-page" />
<link rel="shortlink" href="https://wilmettewatch.com/node/10" />
<link rel="revision" href="https://wilmettewatch.com/test-page" />

    <title>Test page | Wilmette Watch</title>
    <link rel="stylesheet" media="all" href="/sites/default/files/css/css_P_uhd9uFXz_crbPUanUYUW0d_XlQPVaT82ZcQeKjcms.css" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_r6feGj8LSqa2_hg-aKcSQjNSMnct7c5IB_xVe2Y_oiQ.css" />
<link rel="stylesheet" media="all" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_gudi_owL-2YsUCuS-NBbZM4ARsPDs4DIxZH-Z_rFxFM.css" />
<link rel="stylesheet" media="print" href="/sites/default/files/css/css_Y4H_4BqmgyCtG7E7YdseTs2qvy9C34c51kBamDdgark.css" />
<link rel="stylesheet" media="all" href="//fonts.googleapis.com/css2?family=Merriweather" />
<link rel="stylesheet" media="all" href="//fonts.googleapis.com/css2?family=Poiret+One" />

    
<!--[if lte IE 8]>
<script src="/sites/default/files/js/js_VtafjXmRvoUgAzqzYTA3Wrjkx9wcWhjP0G4ZnnqRamA.js"></script>
<![endif]-->

  </head>
  <body class="layout-no-sidebars page-node-10 path-node node--type-page">
    <a href="#main-content" class="visually-hidden focusable skip-link">
      Skip to main content
    </a>
    
      <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
    <div id="page-wrapper">
  <div id="page">
    <header id="header" class="header" role="banner" aria-label="Site header">
                      <nav class="navbar navbar-expand-lg" id="navbar-main">
                              <a href="/" title="Home" rel="home" class="navbar-brand">
              <img src="/Logo90.png" alt="Home" class="img-fluid d-inline-block align-top" />
            Wilmette Watch
    </a>
    

                                          </nav>
          </header>
          <div class="highlighted">
        <aside class="container-fluid section clearfix" role="complementary">
            <div data-drupal-messages-fallback class="hidden"></div>


        </aside>
      </div>
            <div id="main-wrapper" class="layout-main-wrapper clearfix">
              <div id="main" class="container-fluid">
          
          <div class="row row-offcanvas row-offcanvas-left clearfix">
              <main class="main-content col order-last" id="content" role="main">
                <section class="section">
                  <a id="main-content" tabindex="-1"></a>
                    <div id="block-wilmettewatch-page-title" class="block block-core block-page-title-block">
  
    
      <div class="content">
      
  <h1 class="title"><span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Test page</span>
</h1>


    </div>
  </div>
<div id="block-wilmettewatch-content" class="block block-system block-system-main-block">
  
    
      <div class="content">
      

<article data-history-node-id="10" role="article" about="/test-page" typeof="schema:WebPage" class="node node--type-page node--view-mode-full clearfix">
    <div class="node__content clearfix">
    
<div class="field field--name-field-body field--type-entity-reference-revisions field--label-hidden">


  <div>
          <div class="field__item">







<div class="paragraph paragraph--type--basic-paragraph paragraph--view-mode--default paragraph--id--14">
  <div class="paragraph__column">
    
            <div class="clearfix text-formatted field field--name-field-body-text field--type-text-with-summary field--label-hidden field__item"><p>Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? </p>

<p>Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? </p>

<p>Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? Why isn't this working? Also, where's the summary? </p></div>
      
  </div>
</div>
</div>
          <div class="field__item">







<div class="paragraph paragraph--type--image paragraph--view-mode--default paragraph--id--16">
  <div class="paragraph__column">
    
            <div class="field field--name-field-image field--type-image field--label-hidden field__item">  <img src="/sites/default/files/2020-05/Logo90.png" width="90" height="90" alt="ww" typeof="foaf:Image" />

</div>
      
  </div>
</div>
</div>
          <div class="field__item">







<div class="paragraph paragraph--type--basic-paragraph paragraph--view-mode--default paragraph--id--17">
  <div class="paragraph__column">
    
            <div class="clearfix text-formatted field field--name-field-body-text field--type-text-with-summary field--label-hidden field__item"><p>More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? More text here. How does it look? </p></div>
      
  </div>
</div>
</div>
          <div class="field__item">
  <div class="paragraph paragraph--type--figure paragraph--view-mode--paragraphsgridtest landscape-photo">
          <figure class="article-figure">
        

        <figcaption> </figcaption>
      </figure>
      </div>

      </div>
      </div>

</div>



  </div>
</article>

    </div>
  </div>


                </section>
              </main>
                                  </div>
        </div>
          </div>
        <footer class="site-footer">
              <div class="container-fluid">
                            </div>
          </footer>
  </div>
</div>

  </div>

    
    <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node\/10","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"user":{"uid":0,"permissionsHash":"adf817ccf74d3c1df22405e040258050699cca41f71f33f2578ae311d9993ecb"}}</script>
<script src="/sites/default/files/js/js_ZjI08cC2AozgNCXBnZB5IuaaWKY0ilO1iDRLKNND_-E.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="/sites/default/files/js/js_qgveMN0dDH03r-aWKzJyg-TqpRxn6ZJGYKDT9jdAlpk.js"></script>

  </body>
</html>
Was it helpful?

Solution

Paragraphs won't render markup for a particular content type if you don't set the format for its Paragraphs fields to Paragraphs Grid (rendered entity) as shown below.

Remember to make sure that if you have any custom display settings, that you also go to their tab and set the Paragraphs fields similarly. If you have the format set to the default (Rendered entity), Paragraphs will not generate the necessary markup.

Screenshot

Licensed under: CC-BY-SA with attribution
Not affiliated with drupal.stackexchange
scroll top