Embedding a View in a Node

A couple of people asked me how I embedded the client logo slideshow inside the content area of the “Brooklyn Technical Services has over 20 years’ experience…” node on the front page here.

Actually, that was the easy part.  The hard part was building that slideshow, mainly because I hadn’t done it with Drupal 7 before.   After several false starts I found a great video tutorial on Views Slideshow by a Toronto developer who walks you through the process, step by step.  He moves a little quickly but that’s what the pause button is for.

The only thing I’d add to it is that unless you’re dealing with hundreds of images, you’ll get better results by resizing your images manually rather than creating a text format with a resize task.   The GIMP image editor is particularly nice for this sort of thing.

Once you get your slideshow working as a Drupal page type — exactly as the video describes — you’ll need to create a node.  This is because you need a fixed node_id in Drupal for the next step.  Typical of Drupal where there are a dozen different ways to do the same thing, and a half dozen third-party modules to help you do it, it’s usually best to use the facilities of Drupal itself rather than introduce a new, unknown variable into the configuration, especially for a one-off project like this.  So I decided not to use a module like Node Embed or Insert View for this and handle it in the theme.  I’m sure they’re very capable but I only need this on one page.

Instead, I created an alternative node.tpl.php template in my theme just for that page.  Since its node_id was 2 I copied the existing node.tpl.php to node–2.tpl.php.  Then is was just a matter of using a Drupal core function and some HTML to replace the current content div:

  <div class="content <?php print $classes_array['1']; ?>"<?php print $content_attributes; ?>>
    <?php
      // Hide comments, tags, and links now so that we can render them later.
      hide($content['comments']);
      hide($content['links']);
    ?>
    <div style="float:left; text-align:center; width: 250px;">
        <?php print views_embed_view('client_logo_slideshow', 'default'); ?>
    </div>
     <div style="text-align:left;">
      <?php print render($content); ?>
    </div>
  </div>

I sized the images for 100×199, created nodes for them in Add Content and that’s it.  The magic is all in the views_embed_view() function in the Views module.  Format the slideshow and the node content with a couple of DIVs.

UPDATE 12/08/20: since this post was written I moved the site from Drupal to WordPress, where I use the very capable Smart Slider 3 plugin for carousels.

Scroll to Top