0

I use Views Photos Grid module and it shows the results correctly with Stark theme. However, it shows all the images stacked in only place in my custom theme. I do include modules css and js files:

<link rel="stylesheet" href="/modules/views_photo_grid/css/views-photo-grid.css">
<script src="/core/misc/drupalSettingsLoader.js?v=8.6.3"></script>
<script src="/core/misc/drupal.js?v=8.6.3"></script>
<script src="/modules/views_photo_grid/js/views-photo-grid.js"></script>

I also render the expected divs:

<section class="viewnodes">
<div class="container">
<div class="col-10">
<div class="views-photo-grid-container">

<div class="views-photo-grid-item">
  <a href="/node/30">
    <img src="/sites/default/files/styles/screenshot/public/2019-01/img04.jpg?itok=yxujuA6O" width="300" height="300" alt="asdf" typeof="foaf:Image" />
  </a>
</div>

...more views-photo-grid-item divs are here...

</div><!--views-photo-grid-container-->
</div><!--col-10-->
</div><!--container-->
</section><!--viewnodes-->

Java script console shows no errors. I've checked in debugger that the main JS function (function ($, Drupal, drupalSettings) is called but none of the other JS functions is called. Could this be the cause?

-1

Issue was missing JS includes. The working set is:

  <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"screenshots","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","google_analytics":{"trackOutbound":true,"trackMailto":true,"trackDownload":true,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip"},"viewsPhotoGrid":{"gridPadding":"1"},"user":{"uid":0,"permissionsHash":"797a0805952a191ed3acd8cc0feee5a8b53895cab4446ce069563dbdd87139da"}}</script>

  <script src="/core/assets/vendor/domready/ready.min.js?v=1.0.8"></script>
  <script src="//code.jquery.com/jquery-3.3.1.min.js?v=3.2.1"></script>
  <script src="/core/misc/drupalSettingsLoader.js?v=8.6.3"></script>
  <script src="/core/misc/drupal.js?v=8.6.3"></script>
  <script src="/core/misc/drupal.init.js?v=8.6.3"></script>
  <script src="/modules/views_photo_grid/js/views-photo-grid.js"></script>

It doesn't work without the first messy line with data-drupal-selector. I wish I knew was is this good for...

  • Are you manually adding script assets directly in the template? This really is not a good idea. Learn how to attach assets – Hudri Oct 16 '19 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.