Drupal Quests - Drupal 7 - Create Slideshow Inside Nodes-Articles

This document provides a tutorial for creating an image slideshow within nodes or articles in Drupal 7. It instructs the user to install the Field Collection and Field Slideshow modules. Then create a new content type called "Slideshow Article" with an "Images & Captions" field collection containing image and text fields. The display of the field collection should be set to "Slideshow" format. Now slideshows can be added when creating new nodes of this content type.

Uploaded by

Coklat

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

59 views

Drupal Quests - Drupal 7 - Create Slideshow Inside Nodes-Articles

Uploaded by

Coklat

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

Drupal Quests: Drupal 7 - Create Slideshow inside nodes/articles

1 of 4

Drupal 7 - Create Slideshow inside nodes/articles

This is a sm a ll tutoria l on how to cre ate an im age slide show inside a node on Drupal 7.
R e ad this if you want:
To have an im age slide show inside a node
Have captions with htm l tag support
If you are inte re ste d in:
C re ating a slide show for your frontpage
Mak ing a rota ting banne r
Display node s or conte nt on a slide show
you should be tte r google for Vie ws slide show.
Although you m a y think that finding a m odule to cre ate such a sim ple slide show would be e a sy, it is not.
Drupal 7 no longe r supports a dding a de scription for your im a ge tha t we could use for our caption. So
m ost m odule s use the title or alt a ttribute of the im a ge a s a caption. But you cannot input long te x ts in
the se attribute s, le t alone add htm l tags. O ne solution could be to just download one of the m illions
e ye -candy jque ry slide shows out the re be done with it. But wha t if you a re building a we bsite for a clie nt
and you don't want the m to write code inside a n a rticle (plus not all pe ople a re able to do tha t). You
want to be able to use the alre a dy installe d powe r and usa bility of drupa l for your clie nt's slide shows.
W e ll don't de spa ir! The re is a ve ry e a sy a nd sim ple solution.
W ha t we ne e d: Drupa l 7 of course and two m odule s. Fie ld C olle ction a nd Fie ld Slide show (you 'll a lso
ne e d the ir pre re quisite s e ntity a nd jcycle plugin).
For the tutorial I will be cre ating a ne w conte nt type but that is not ne ce ssary. You could e a sily follow the
ste ps and add this fuctionality inside your e x isting conte nt type s.

1. Go ahead and install the two modules

2. Create a new content type "Slideshow Article"

He ad ove r to Structure > C onte nt Type s > Add conte nt type . Sk ip this ste p if you wish. I a m going to
na m e m y ne w conte nt type "Slide show Article "

3. Configure your fields.

Inside your ne w conte nt type cre ate a fie ld lik e this:
La be l - "Im age s & C aptions"
Nam e - "im age s_captions"
Fie ld - Fie ld colle ction
W idge t - Em be dde d

http://drupalquests.blogspot.com/2012/01/drupal-7-create-slideshow-in...

8/19/2014 2:11 PM

Drupal Quests: Drupal 7 - Create Slideshow inside nodes/articles

2 of 4

Afte r cre ating the Im a ge s & C aptions fie ld you will be pre se nte d with the fie ld se ttings. C ustom ize the m
as you lik e but re m e m be r to put the num be r of value s to unlim ite d!

W he n that's done he ad to Structure > Fie ld C olle ctions. You should se e your Im age s & C aptions fie ld
colle ction you cre a te d e arlie r. Hit m a nage fie lds so we ca n a dd fie lds inside the colle ction. W e a re going
to cre ate two fie lds. O ne im a ge fie ld and one te x t fie ld for the captions (Slide show m odule re quire s the
captions to be sim ple te x t or it won't work ). I am going to use the a lre ady e x isting fie ld_im age for m y
im age s and cre ate a ne w te x t fie ld for m y ca ptions as se e n be low.

For the C aption fie ld se t the m a x im um le ngth to som e thing you lik e . I am going to use 600 characte rs.
For the te x t proce ssing se le ct Filte re d te x t if you want to use htm l ta gs in your captions. Go ahe a d a nd
adjust your im age se ttings a s you lik e . Both fields should have their number of values set to 1. In the
Ma nage Display tab configure your two fie lds so the ir la be ls are hidde n.

4. Manage your fields display.

He ad back to your conte nt type a t the m a nage display tab. Se t the labe l of Im age s& C aptions to hidde n
and the form at to Slide show. Hit the configure button ne x t to the form at to control the se ttings of the
Slide show. I won't go ove r the options pre se nte d he re to you. Play around with the m . The only thing you
ne e d to se t up to m ak e it work is to se le ct your im age and caption fie ld from the drop down m e nus as
shown be low.

http://drupalquests.blogspot.com/2012/01/drupal-7-create-slideshow-in...

8/19/2014 2:11 PM

Drupal Quests: Drupal 7 - Create Slideshow inside nodes/articles

3 of 4

Hit update and save . O k we a re re a dy to add som e conte nt!

5. You are done!

Now you can tak e a ste p e ve n furthe r. You can cre ate som e ne a t css cla sse s to add som e style to your
slide show lik e a transpa re nt bar on the im age s whe re the captions will be shown, put som e nice icons for
the controls e tc... You could also cre ate an im age style to m ak e sure that wha te ve r im a ge the use r m ay

http://drupalquests.blogspot.com/2012/01/drupal-7-create-slideshow-in...

8/19/2014 2:11 PM