0
Welcome Guest! Login
0 items Join Now

How to display thumbnails in Articles Horizontally

Last Post
Search Topic

  • How to display thumbnails in Articles Horizontally

    Posted 15 years 5 months ago
    • Hey all, I've tried experimenting around with this but I'm not getting it. I'm trying to display a couple of thumbnails Horizontally in an article.
      This image is hidden for guests.
      Please log in or register to see it.
      . What it looks like in the editor is this, only verticle.
      This image is hidden for guests.
      Please log in or register to see it.

      Any suggestions appreciated, thanks
    • Last Edit: 15 years 4 months ago by tropicaledit.
    #415829
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 5 months ago
    #415833

  • Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 5 months ago
    • Thanks for that Henning. I'll check that out.
    #415838
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 5 months ago
    • If you still need help ...
    #416716

  • Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • Yeah I do, thank you for the offer. I dont want to over-ask you guys stuff. Well, i understand about the floating left and right. Those functions are in the tiny-editor. But i'm assuming that this is different because it's a module (rokbox). Anyway, when I see the code in the article it looks like this (see pic 2)
      This image is hidden for guests.
      Please log in or register to see it.


      And then if I toggle the editor, it looks like this (see pic 3)
      This image is hidden for guests.
      Please log in or register to see it.


      In this code, all I see is something for "text-align" and so I'm kinda lost as where to put code. That is even if I'm on the right track, I'm not sure.

      Ok, well thank you for your help on this again. Merry Xmas over there in Germany !!
    #429690
    • StefanM's Avatar
    • StefanM
    • Jr. Rocketeer
    • Posts: 49
    • Thanks: 0

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • Looking at your last example (HTML code) the images are in seperate paragraphs which will cause them to wrap under each other. Place them in the same paragraph and they should sit side-by-side until they exceed the content width.

      StefanM
    • Last Edit: 15 years 4 months ago by StefanM.
    #429804
    • John Hodgkinson's Avatar
    • John Hodgkinson
    • Hero Rocketeer
    • Posts: 421
    • Thanks: 0
    • Retired, but build and run websites for organisations of school leaders and others - e.g. http://www.icponline.org, http://www.aspa.asn.au, http://www.appa.asn.au

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • I'm not a coder at all, but I would try putting them into a table across the screen. I use that method quite successfully for non-RokBox thumbnails. Would that work in this case?
    #429809
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • ... well, John a table would work too.

      But I prefer to do it with divs & css here:

      Step 1:
      Turn off your wysiwyg-editor (or use rokpad for example, jce works too – never use Tiny)

      Step 2: add this to your template.css
      .clip-row {overflow: hidden;margin-left: 30px;}
.clip-item {width: 30%;float: left;overflow: hidden;padding-left: 10px;padding-right: 10px;}

      Step 3: open that article and change the code like this
       
p style="text-align: left;">ALL CLIPS ARE <strong>QUICKTIME FILES</strong>:  CLICK ON IMAGE TO PLAY</p>
        
<div class="clip-row"><!--beginn row 1-->
    
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/beckham.mov" rel="rokbox[320 255]" title="Beckham MLS"><img class="album" src="/images/stories/video/beckhamthumb.jpg" alt="Beckham MLS" /></a> </p>
<address style="text-align: center;"><strong>Beckham MLS </strong>- <strong>Promo/Univision Sports</strong>/Creative Cut/<br />Color Correction/Compositing/Autodesk Smoke Ver 2008</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/chivas.mov" rel="rokbox[320 255]" title="Chivas MLS"><img class="album" src="/images/stories/video/chivasthumb.jpg" alt="Chivas MLS" /></a> </p>
<address style="text-align: center;"><strong>Chivas MLS </strong>- <strong>Promo/Univision</strong> <strong>Sports</strong>/Creative Cut/</address><address style="text-align: center;">Color Correction/Compositing/Autodesk Smoke Ver 2008</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/itv.mov" rel="rokbox[320 255]" title="ITV"><img class="album" src="/images/stories/video/itvthumb.jpg" alt="ITV" /></a> </p>
<address style="text-align: center;"><strong>ITV </strong>- <strong>Promo/HSN</strong>/<strong>ProMax North American Gold Award 2007</strong>/Creative Cut/</address><address style="text-align: center;">Online/Special Effects/Color Correction/Compositing/Autodesk Smoke</address>
</div><!--end item-->
 
</div><!--end row 1-->
 
<div class="clip-row"><!--beginn row 2-->
    
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/verisign.mov" rel="rokbox[320 255]" title="Verisign"><img class="album" src="/images/stories/video/verisignthumb.jpg" alt="Verisign" /></a> </p>
<address style="text-align: center;"><strong>Verisign </strong>- <strong>Promo/HSN</strong>/<strong>ProMax North American Gold Award 2006</strong>/Creative Cut/</address><address style="text-align: center;">Online/Special Effects/Color Correction/Compositing/Autodesk Smoke</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/alpunto.mov" rel="rokbox[320 255]" title="Al Punto - Univision"><img class="album" src="/images/stories/video/alpuntothumb.jpg" alt="Al Punto - Univision" /></a> </p>
<address style="text-align: center;"><strong>Al Punto </strong>- <strong>Promo/Univision</strong>/Creative Cut/</address><address style="text-align: center;">Online/Color Correction/Compositing/Autodesk Smoke</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/southerncomfort.mov" rel="rokbox[320 255]" title="Southern Comfort"><img class="album" src="/images/stories/video/southerncomfortthumb.jpg" alt="Southern Comfort" /></a> </p>
<address style="text-align: center;"><strong>Southern Comfort </strong>- <strong>30 to 24fps film recording for theatres</strong>/</address><address style="text-align: center;">Online/30 to 24 frame rate conversion/Compositing/Discreet Fire</address>
</div><!--end item-->
 
</div><!--end row 2-->
 
<div class="clip-row"><!--beginn row 3-->
    
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/stevie.mov" rel="rokbox[320 255]" title="Stevie - The Movie"><img class="album" src="/images/stories/video/steviethumb.jpg" alt="Stevie - The Movie" /></a> </p>
<address style="text-align: center;"><strong>Stevie </strong>- <strong>Feature Film/Documentary/Lions Gate Films/Kartemquin Films</strong>/</address><address style="text-align: center;">HD Online Credits/Special Effects/Discreet Fire/<strong>Website - </strong> http://steviethemovie.com</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/lifegirl.mov" rel="rokbox[320 255]" title="Girl - Life Cereal"><img class="album" src="/images/stories/video/lifegirlthumb.jpg" alt="Girl - Life Cereal" /></a> </p>
<address style="text-align: center;"><strong>Girl - Life Cereal </strong>- 30 sec Commercial/</address><address style="text-align: center;">Online/Compositing/Discreet Fire</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/lola.mov" rel="rokbox[320 255]" title="Lola - Upfront"><img class="album" src="/images/stories/video/lolathumb.jpg" alt="Lola - Upfront" /></a> </p>
<address style="text-align: center;"><strong>Lola - </strong><strong>Promo/Upfront 2008/Univision</strong>/</address><address style="text-align: center;">Creative cut/Online/Compositing/Autodesk Smoke</address>
</div><!--end item-->
 
</div><!--end row 3-->
 
<div class="clip-row"><!--beginn row 4-->
    
<div class="clip-item"><!--beginn item-->   
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/brandburst.mov" rel="rokbox[320 255]" title="DDB Chicago Brandburst"><img class="album" src="/images/stories/video/brandburstthumb.jpg" alt="DDB Chicago Brandburst" /></a> </p>
<address style="text-align: center;"><strong>Brandburst -</strong><strong> DDB Needham</strong>/Creative cut/</address><address style="text-align: center;">Music editing/Avid Media Composer</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->   
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/marlbororanch.mov" rel="rokbox[320 255]" title="Marlboro Ranch"><img class="album" src="/images/stories/video/marlbororanchthumb.jpg" alt="Marlboro Ranch" /></a> </p>
<address style="text-align: center;"><strong>Marlboro Ranch </strong>- <strong>30 to 24fps film recording for theatres</strong>/</address><address style="text-align: center;">Online/30 to 24 frame rate conversion/Compositing/Discreet Fire</address>
</div><!--end item-->
 
<div class="clip-item"><!--beginn item-->   
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/buschgardens.mov" rel="rokbox[320 255]" title="Busch Gardens"><img class="album" src="/images/stories/video/buschgardensthumb.jpg" alt="Busch Gardens" /></a> </p>
<address style="text-align: center;"><strong>Busch Gardens -</strong><strong> DDB Needham</strong>/Creative cut/</address><address style="text-align: center;">Music editing/Discreet Fire</address>
</div><!--end item-->
 
</div><!--end row 4-->
 
<p style="text-align: center;"><a href="http://www.patrickmulholland.com/images/stories/video/blackbeauty.mov" rel="rokbox[320 255]" title="Black Beauty"><img class="album" src="/images/stories/video/blackbeautythumb.jpg" alt="Black Beauty" /></a> </p>
<address class="trebuchet" style="text-align: center;"><strong>Black Beauty</strong> - 30 to 24fps film recording for theatres/<br /></address><address class="trebuchet" style="text-align: center;">Online/30 to 24 frame rate conversion/Discreet Fire</address>
<p style="text-align: center;"> </p>
    • Last Edit: 15 years 4 months ago by Henning.
    #429910
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • Should look like this.

      Still it needs some styling. (Dont know why you use this <address>-tag ...
      If you have problems with other browsers post them here.
      But basically it should work perhaps you have to adjust some values in the css.
    #429912

  • Re: How to display thumbnails in Articles Horizontally

    Posted 15 years 4 months ago
    • Guys thats looks great, I'll grab some coffee and get started on it, thank you. I'll let you know how it turns out.
    #429949

Time to create page: 0.088 seconds