How to create a basic slideshow from one node with extra info

This tutorial gives step by step instructions how to create a basic slideshow of images with extra information like slide title, slider text and read more button which links to other pages, using one node as input for the slideshow.

This way of creating a slideshow can be used e.g. if content does not change often, like a slideshow in the header of your Internet site with links to the different menu options. Most of the time it will be the Site maintainer who creates this slideshow. It is a less flexible solution than using an advanced slideshow, but can still be very useful.

I will create an example which gives information about: Tutorials, Frequently asked questions and Examples. By clicking the Read more... button a user goes to one of these topics.

Note: It is advisable to use the same image sizes for the images you use and to make them the same size as you want to show them in the slideshow.

ddblock basic slideshow with extra info

I will use:

  • Content type: "ddblock basic slideshow with extra info"
  • node: "ddblock node with extra info"
  • ddblock: "ddblock basic slideshow with extra info"

I advise you to use the same names to make this tutorial work. When you have the slideshow working you can use your own names for the content type, node and ddblock.

Links refer to the existing tutorial on this site.

Installation:

Follow the detailed Installation instruction on how to install the required modules to make the: ddblock basic slideshow with extra info.

Create a content type

Path to create content type:

  1. Go to Admin > Content management > Content types.

Add content type

  1. Click Add content type button.
  2. Fill in the following fields:
    • Name - e.g ("ddblock basic slideshow with extra info").
    • Type - e.g ("ddblock_basic_extra").
    • Description - ("A node to create a basic ddblock slideshow with extra info".).
  3. Click Workflow settings fieldset.
  4. Uncheck checkbox option Promoted to front page.
  5. Click Save content type button.

Create a node to provide content for the ddblock basic slideshow

Path to create a node:

  1. Go to Admin > Create content > "ddblock basic slideshow with extra info".

Create node

  1. Fill in the following fields:
    1. Title - e.g ("ddblock node with extra info").
    2. Insert the following code in the Body.
      <div class="slides">
       <div class="slide">
        <div class="slide-text-left">
         <div class="slide-title">
          <h2>[Fill in your slide-title here]</h2>
         </div>
         <div class="slide-text">
          <p>[Fill in your slide-text here].</p>
         </div>
         <div class="slide-read-more">
          <h4><a href="[Fill in your URL/path to link to other pages here]">Read more...</a></h4>
         </div>
        </div>
        <div class="slide-image"><img src="[Fill in your image source here]" />
        </div>
       </div>
       <div class="slide">
        <div class="slide-text-left">
         <div class="slide-title">
          <h2>[Fill in your slide-title here]</h2>
         </div>
         <div class="slide-text">
          <p>[Fill in your slide-text here].</p>
         </div>
         <div class="slide-read-more">
          <h4><a href="[Fill in your URL/path to link to other pages here]">Read more...</a></h4>
         </div>
        </div>
        <div class="slide-image"><img src="[Fill in your image source here]" />
        </div>
       </div>
      </div> 
  2. Attach 2 images to your node.
    (You need to have upload module enabled to attach files.)
  3. Change content.
    I will give an example for the first slide. For changing the values for the second slide, follow the same procedure.
    • Change text [Fill in your slide-title here], this should be the text for the slide-title.
      (I use here: Tutorials)
    • Change text [Fill in your slide-text here], this should be the text for the slide-text.
      (I use here: the following unordered list)
          <ul>
           <li>Basic slideshow tutorials</li>
           <li>Advanced slideshow Tutorial</li>
           <li>Video tutorials</li>
           <li>How to's</li>
           <li>Tips</li>
          </ul>
    • Change "[Fill in your URL/path to link to other pages here]", this should be the URL/path to link to a node or a page on another Internet site.
      E.g ("/node/1 to link to node 1 or http://ddblock.myalbums.biz to link to a page on another Internet site. Be sure to leave the quotes(") inside the link code.
      (I use here a link to http://ddblock.myalbums.biz)
      http://ddblock.myalbums.biz
    • Change "[Fill in your image source here]", this should be the path to image to show in the slideshow. Copy the link from the attached image. (The link will show below the description of the attached image). Be sure to leave the qoutes(") inside the link code.

      Note: You don't need to use images which are attached to the node. You can use any URL to an image. But I use the link to the attached images in this example.

  4. Repeat changing the content for the second slide
  5. Set Input format to Full HTML.
  6. Click Save button.

Your code should now look similar to the example below with your own content:

<div class="slides">
 <div class="slide">
  <div class="slide-text-left">
   <div class="slide-title">
    <h2>Tutorials</h2>
   </div>
   <div class="slide-text">
    <ul>
     <li>Basic slideshow tutorials</li>
     <li>Advanced slideshow Tutorial</li>
     <li>Video tutorials</li>
     <li>How to's</li>
     <li>Tips</li>
    </ul>
   </div>
   <div class="slide-read-more">
    <h4><a href="http://ddblock.myalbums.biz">Read more...</a></h4>
   </div>
  </div>
  <div class="slide-image"><img src="http://ddblock.myalbums.biz/drupal/sites/default/files/163096185_mAqPH-M-4.jpg"></a>
  </div>
 </div>
 <div class="slide">
  <div class="slide-text-left">
   <div class="slide-title">
    <h2>[your changed slide-title]</h2>
   </div>
   <div class="slide-text">
    <p>[your changed slide-text].</p>
   </div>
   <div class="slide-read-more">
    <h4><a href="[your changed URL/path to link to another page]">Read more...</a></h4>
   </div>
  </div>
  <div class="slide-image"><img src="[your changed URL to an image]" />
  </div>
 </div>
</div> 

Important: Delete all ([]) from the text.

Adding more slides
For the basic slideshow to work you need to have at least two slides. If you want to have 3 or more slides you need to copy the code between

 <div class="slide">
  ...
 </div>

one ore more times and paste it after the end tag (</div>) of the last (<div class="slide">) tag.

E.g.: If you want to show 3 slides for the basic slideshow, you need to have 3 images attached to the node, and you need to have code for 3 slides.

<div class="slides">
 <div class="slide">
 ...
 </div>
 <div class="slide">
 ...
 </div>
 <div class="slide">
 ...
 </div>
</div>

Enable the content type for the dynamic display block module

Before you can use the content type with the dynamic display block module you have to enable it.

Path to enable content type in the settings pages of the dynamic display block:

  1. Go to Admin > Site configuration > Dynamic display block.
  2. Click Settings tab.

Enable content type

  1. Enable: "dblock basic slideshow with extra info" under Content types.
  2. Note: Due to a bug that both blocks and content types are required you also need to check at least one block. Will be fixed in next version of the module.
  3. Click Save configuration button.

Add a block for the: "ddblock basic slideshow with extra info"

Path to add a block:

  1. Go to Admin > Site configuration > Dynamic display block.
    1. Add block
    2. Fill in Block title text field - e.g ("ddblock basic slideshow with extra info").
    3. Click Add block button.

    Configure block - "ddblock basic slideshow with extra info"

    You can use two path to configuring a block:

    1. Go to Admin > Site building > Blocks > "ddblock basic slideshow with extra info".
    2. Go to Admin > Site configuration > Dynamic display block > "ddblock basic slideshow with extra info".

    Configure the block

    1. Choose Content type under Input type select box fieldset.
    2. Choose "ddblock_basic_extra" under Content type select box fieldset.
    3. Choose the node you made, e.g ("ddblock node with extra info").
    4. Leave the default option for Node content.
    5. Under Content container change img to div.slide.
    6. Set the height and the width of the content container to 0.
    7. Set the width and the height of the image settings with your desired width and height to show for the slideshow. E.g (width:500, height:300)
    8. Uncheck the Next checkbox.
    9. Check the Use Pager checkbox.
    10. Choose a pager. You can use a number pager or prev/next pager.
    11. Change the default height of the pager to 25.
    12. Set the other settings, like speed:500, timeout 5000 etc.
    13. Click Save block button.

    Theme layout of ddblock basic slideshow with extra info.

    1. Download the basic_slideshow_extra_info.zip file at the download page.
    2. Place the custom folder in the theme directory of the theme you use, which is probably at sites/all/themes/[YOUR_THEME_NAME]/.
    3. Add this code in the [theme_name].info file of the theme you use, to enable the stylesheet for your theme:
            stylesheets[all][]   = custom/modules/ddblock/custom.css

      Important:When your theme did not add stylesheets through the [theme_name].info file it uses style.css by default.

      When you add now

      stylesheets[all][] = custom/modules/ddblock/custom.css

      it finds this in the [theme_name].info file of the theme and does not use the style.css by default anymore.

      In this case you need to add your standard stylesheets also:
      So it would become:

      ; custom stylesheets
      stylesheets[all][] = custom/modules/ddblock/custom.css
       
      ; standard stylesheets
      stylesheets[all][] = style.css
      stylesheets[print][] = print.css

      a semicolon (;) is used for adding comments in an .info file

    4. Edit the custom.css file, change all classes #ddblock-1 to #ddblock-[block-number].
      You can find the number of the block you use when you hover on the configure link of the "ddblock basic slideshow with extra info" block.
    5. Edit the width and height for the image in the css file, e.g.:
      #ddblock-2 .slides{
      background:#cccccc;
      height:400px; /* same a image height setting in config page*/
      position:relative; /* keep this to relative */
      width:592px; /* same a image width setting in config page*/
      }

    Display Dynamic display block slideshow:

    You can place your block - "ddblock basic slideshow with extra info" in either a region of your theme or in a node.

    In the Display advanced Dynamic display block slideshow tutorial page you can find more information how to display the slideshow on your site.

    Note: For displaying the ddblock basic slideshow with extra info, you have to find the block name which is "ddblock basic slideshow with extra info" instead of "ddblock-News item slideshow".

    Disable post information

    Note: If you show the basic slideshow in a node it is possible that you see the post information of the content type you use. To disable the post information of the content type you can do the following:

    1. Navigate to Administer > Site building > Themes.
    2. Click Configure tab to configure the global settings of the theme you use.
    3. Uncheck the checkbox: "ddblock basic slideshow with extra info" in the: Display post information on fieldset,
    4. Click Save configuration button at the bottom of the page.

    Note:
    When you have issues, the preferred place to post them is in the issue queue of the project. The issue queue of the project is monitored daily.

    Hope you guys find this howto useful. We are always curious how it looks like on your Internet site. If you have a link to the implementation of this how to, please send us the link.

Comments

number of counters per row

I have a slideshow with 10 images.
The counters are listed from 1-8 in one row and 9-10 in the second row at the top left corner of the page.
I can't figure out how to control the number of counters in one row.

Re: number of counters per row

If you make the pager width wider in the configuration page more pager items will fit.

Hope this helps you further.

If not please make an issue in the issue queue of the module.

Has anyone got this working

Has anyone got this working on Drupal 7 yet?

Replying to my own thing, I

Replying to my own thing, I did get it working.

How I did it was to follow the directions, then I simply replaced these two files:

ddblock-cycle-block-content.tpl.php
ddblock-cycle-pager-content.tpl.php

With the ddblock 6 version, overwriting the old ddblock 7 files. Works great!

Make vertical title and read more HORIZONTAL

Hi, I have this working. It took a while (below I provide two take aways that may help others). The one question I have now is how to make the title and read more area in front of the transparent background display horizontally rather than vertically... Can someone tell me explicitly how to do that understanding that my setup follows the above instruction.

Two Take Aways -

#1 One thing that tripped me up is that there has to be a space between the ddblock-[number] and the period. For example, if when editing the custom.css file, you change
#ddblock-1 .slides to
#ddblock-2.slides
it will not work. It has to be #ddblock-2 .slides (notice the space).

#2 The last thing that tripped me up for a while is that you have to include the height and width in the same section of code in your custom.css file. It comes like so,

#ddblock-2 .slides{
background:#cccccc;
/* height:400px; /* same a image height setting in config page*/
position:relative; /* keep this to relative */
/* width:592px; /* same a image width setting in config page*/
}

Even though the comments tell you that you have to keep this the same height and width as you put when configuring your block, the instructions about do not make it explicit. It's easy to miss then unless you look through all the comment blocks of code to see this instruction. The above has to be like so for this to work (using the same height and width above for illustrative purposes, but you would use the appropriate height and width for your block.

#ddblock-2 .slides{
background:#cccccc;
height:400px; /* same a image height setting in config page*/
position:relative; /* keep this to relative */
width:592px; /* same a image width setting in config page*/
}

Just uncomment those two lines and put in the appropriate dimensions.

Re: Make vertical title and read more HORIZONTAL

Thanks for your comments

Added the step to adjust the image-width and height to the steps.

Answer on your question how to make slide-text horizontal:

Make the width of the slide-text wider
Make the height of the slide-text smaller
place the slidetext at the bottom

In your particular case:
new width 575px
new height:80px
positioning: bottom:10px

#ddblock-2 .slide-text-left {
background: transparent url(<a href="http://andromeda.rutgers.edu/~equity09/drupal/sites/all/themes/theme321/custom/modules/ddblock/images/transparent_bg.png" title="http://andromeda.rutgers.edu/~equity09/drupal/sites/all/themes/theme321/custom/modules/ddblock/images/transparent_bg.png">http://andromeda.rutgers.edu/~equity09/drupal/sites/all/themes/theme321/...</a>) repeat scroll 0px 0px !important;
bottom: 10px;
float: left;
height: 78px;
left: 10px;
margin: 3px 0px 0px 3px;
padding: 10px 0px 10px 10px;
position: absolute;
width: 575px;
}

You can adjust the values to your requirements

You can also adjust the pager-container height in the config page to 25px so the pager would be above the slideshow.

Please post issues in the issue queue of the module.
Hope this helps you further, please let me know.

I was able to get the basic

I was able to get the basic image slideshow working but despite having followed this tutorial exactly I can't get this to work. The content from the "dblock basic slideshow with extra info" type page does not appear in the source of the page where the block appears. Can you suggest a process for finding where the problem is?

OK, I have something working

OK, I have something working now. The block I created following this tutorial would not display but the block created when I originally installed the module and which I used to create a basic slideshow from a folder of images, does now display the node content.
Unfortunately the CSS doesn't seem to be working properly and despite unchecking "Display post information on" for the new content type I still have the content title showing as well.

More progress. The CSS

More progress.
The CSS references ddblock-1. For some reason mine is ddblock-4 -I've changed the selectors and now I'm looking something like, although my "Read more" button is nowhere to be seen.

OK, I have this working now.

OK, I have this working now. The "Read More" button was off the bottom of the block. Initially I tried applying a negative margin-top but this didn't work so I increased the height of the block -not really a solution but at least I have something working and I can look at this again in the morning. I hope that my messages might provide assistance to anyone who encounters the problems I did.

It works...

Hello,
I had realized the slideshow like you described above. I only had to copy the css style from custom.css to my style.css and then it works.

I just noticed that the titels don´t show up. take a look at www.sprachzentrum.com.ar

Thanks
Daniel

Re: It works

Daniel,

You have a line in your style.css file line 914

#ddblock-2 .node h2 {
display: none;
}

which causes the title not to display.

Hope this helps you further, please let me know.
Otherwise make an issue in the issue queue of the module.

Block ID

I'm having problems. I am thinking it is the custom.css .

My ddblock when I hove over the configure option is 1 or ddblock/1 not ddblock-1 like in the css.

Should I rename it 1?

Re: Block ID

Hovering the configure link will tell you the block number like: ddblock/1.
This will be used as ddblock-1 in the css.

The css is correct, nothing to change there.