Image Gallery / Content Slider

CodeWalker · 2010-01-08 10:38:39

Hello there.

First off, im another noob and slowly becoming a texpattern convert (from Wordpress). Ive only been playing with this a couple of days and im already seeing the value in Textpattern. Im redesigning my personal site and I need a content slider. Ive seen the Galleriffic examples and had a go at those but its not quite what i want. I need a system that can handle anything within the slider, be it images, video or html.

I use looped slider (http://github.com/nathansearles/loopedSlider) on static sites and i would love to get this going on a textpattern design, its an awesome slider.

So how do i go about filling the slider with thumbnails and slides using txp tags?? I have upm_image installed, if that makes things easier.

Apologies if this has been done before elsewhere in the forum. Id be grateful for any assitance.

Thanks,

-CW

Bloke · 2010-01-08 11:04:04

Welcome.

Wow, that’s quite a challenge. I love a challenge :-)

I need a system that can handle anything within the slider, be it images, video or html.

OK, so the conventional image galleries and stuff are no good because they’re hard-wired to deal with TXP images. What you need is some way of doing the following:

Collecting together a list of media that you want to display in your slider
Outputting the correct links to the right media type for each of those items in the list

So, firstly, a few questions:

how will you (or how would you like to!) select which images/videos/HTML you want in your slider? Bear in mind that TXP keeps its content separate — images in one table, files in another, forms and articles in other tables, and so on
is the content going to be different per page or is it going to be the same stuff in a sidebar on all pages in a section, or the same across the site?
roughly how often will it change overall? i.e. is it a static set of content (per page/section/site as mentioned above)? Or will it be built up dynamically, perhaps via a shared category name — adding content to a given category will automatically include it in the slider? Or will you simply want to manually adjust a list of items for each slider? For example, might you decide that you want 3 images, 2 videos, then an image, then a video, then some HTML in Slider1 on one day, and then a couple of days later want to make it 3 images, 3 videos, 1 image, HTML, 1 video?

Once you can nail down how you’re going to use it and how it fits your workflow we can probably hammer out the best way to approach it using native tags and plugins. This sounds fun.

Last edited by Bloke (2010-01-08 11:05:27)

CodeWalker · 2010-01-08 12:35:36

Hi Bloke,

Thanks for replying.

This is for a portfolio site. Im a graphic/web designer/animator so the slider content will change from page to page, but the sliders content wont neccessarily be mixed on a single page. in otherwords, if there are 6 slides, 5 wont be images with the 6th being a video becuase i suspect this isnt possible – i figure i would need two forms, one for images and one for video and the two wont interoperate if i understand it. I could fudge it by hardcoding the last slide as a video and having txp fill the others with images. i cud then use a custome feild to pass the video url to the flash player. (my player is a homebrew player, i just pass the url to video to it via flashvars. I have lots of videos on my site, and they all use the same video player, which is video maru based (google for video maru and ull see).

lets take it a step at a time.

my understanding of text pattern is this

I can create image catergories for each piece of work in my folio and then pull this into a slider with txp tags with help from upm_image.

I can create a form containing my video player with a custom feild to pass in the flv – i can then output this anywhere i please, be it in a slider or elsewhere. if i wrap this in a list tag, i can drop it as a final slide in loopedslider if i need a video – however on some of my pages i have 3 or 4 video clips aswell as images so ill have to do some head scratching on that.

Does this make things clearer?

It will be fun, if we can get it going. Im basiclly looking to build a full media machine with textpattern. I will publish a full guide on how to do it from scratch once its all going, so the community can learn from it.

Cheers. :)

CodeWalker · 2010-01-08 12:45:41

im currently musing on this and working out some code as we speak. its cold out anyway! Ill post some findings later.

Bloke · 2010-01-08 13:06:45

CodeWalker wrote:

if there are 6 slides, 5 wont be images with the 6th being a video becuase i suspect this isnt possible

If loopedSlider can handle mixed content, TXP can output it… with a little bit of cunning :-)

i figure i would need two forms, one for images and one for video and the two wont interoperate if i understand it.

Depends how you approach it. For example:

<div id="loopedSlider">	
   <div class="container">
      <ul class="slides">
         // Output image markup
         // Output video markup
         // Output HTML markup with <li> wrappers
      </ul>
   </div>
</div>

would essentially render an unordered list of media clips/HTML that loopedSlider would display.

I can create image catergories for each piece of work in my folio and then pull this into a slider with txp tags with help from upm_image.

Yes, or smd_gallery, wet_for_each_image, or a host of other gallery plugins.

I can create a form containing my video player with a custom feild to pass in the flv

Why not use a custom field to hold a video category instead? Or even use that field to hold a category that links them both? For example, organise your categories like this, and make identical trees for images and files:

folio
--> project_1
--> project_2
--> project_3
--> ...

(obviously choose more descriptive names than project_1, 2, 3 depending on your content)

Upload you images for project_1 and assign them all to the correct category. Likewise, upload your videos to the same-named category under TXP’s Files tab.

Then put the category name in the custom field (or wherever) for the article about that project and use it in your TXP tags. I’ve never used upm_image so forgive me if I get the syntax wrong but something along these lines should get what you need:

<txp:if_custom_field name="folio_content">
<div id="loopedSlider">	
   <div class="container">
      <ul class="slides">
         <txp:upm_image category='<txp:custom_field name="folio_content" />' form="image_layout" />
         <txp:file_download_list catgeory='<txp:custom_field name="folio_content" />' form="video_layout" />
      </ul>
   </div>
</div>
</txp:if_custom_field>

And in your video_layout Form, something like this:

<li>
   <object class="my_flash_player" blah blah>
      <param name="flashvars"><txp:file_download_link /></param>
      <param name="thingamy">Something else</param>
      <param ...
   </object>
</li>

And put something similar in your image_layout Form to render the image content using upm_image or smd_gallery or whetever. Not sure how you’d approach the HTML portion, but it will be possible somehow (perhaps using TXP’s Links to hold them? Or Forms? Or use the adi_variables plugin to build up an array of content that can be pulled into any folio page?)

Does that give you any ideas?

Last edited by Bloke (2010-01-08 13:18:32)

CodeWalker · 2010-01-08 13:14:32

thank you bloke, im just reading it to take in what uve said. im still picking up textpattern concepts, so bare with me a few mins and ill post my thoughts.

thanks for the monster reply!

-cw

CodeWalker · 2010-01-08 13:27:00

Bloke, your a star! The organisational side of things was confusing me slightly but your idea seems workable to me, with parrallel categories for video and images. I really appareciate your input. ive just setup a spare domain as a testing ground, but will take overnight for the DNS to resolve so perhaps by this time tomorrow i will have a working example using the ideas youve presented, and we can iron out the kinks (if any).

If you have any more ideas in the meantime, feel free post them.

Thanks.

-cw.

CodeWalker · 2010-01-08 14:09:10

ok ive hit a snag. upm_image cant grab a whole category, seems it can only pull images with specific id’s, not a whole category.

Any thoughts on some more appropriate? im rly not familiar with the best plugins yet.

edit: scrub that ill go with smd_gallery. just realised you wrote it ;)

-cw

Last edited by CodeWalker (2010-01-08 14:12:57)

els · 2010-01-08 14:14:03

Have a look at wet_for_each_image in combination with upm_image.

Edit: hadn’t noticed your edit, I’m sure smd_gallery can do it too ;)

Last edited by els (2010-01-08 14:15:04)

Bloke · 2010-01-08 14:16:08

CodeWalker wrote:

upm_image cant grab a whole category

In addditon to Els’ suggestion, I’d normally advocate my own plugin smd_gallery, but it can get a little scary for newcomers!

There are plenty of examples in the docs to help you though, and you can get something usable with only a handful of the (extensive) configuration attributes. Failing that, soo_image is an excellent contender and is much more TXPish than my plugin, though I’ve never actually used it in anger.

EDIT: Els, do you think the general flow I proposed above makes sense? Any better ideas? Any thoughts on how to put HTML into the mix as well?

Last edited by Bloke (2010-01-08 14:19:56)

CodeWalker · 2010-01-08 14:45:06

can the html side of things not be solved by pulling in the article excerpt? when i said HTML i really meant a short piece of teaser blurb to draw ppl to an article. 3 or 4 lines of text and possibly an image to glam it up.

-cw

Bloke · 2010-01-08 14:58:07

CodeWalker wrote:

can the html side of things not be solved by pulling in the article excerpt?

Sure. If you want to use the excerpt from the current article, you can just make use of <txp:excerpt /> in a pair of <li> tags inside your slider div and you’re away.

Textpattern CMS

Textpattern CMS support forum

#1 2010-01-08 10:38:39

Image Gallery / Content Slider

#2 2010-01-08 11:04:04

Re: Image Gallery / Content Slider

#3 2010-01-08 12:35:36

Re: Image Gallery / Content Slider

#4 2010-01-08 12:45:41

Re: Image Gallery / Content Slider

#5 2010-01-08 13:06:45

Re: Image Gallery / Content Slider

#6 2010-01-08 13:14:32

Re: Image Gallery / Content Slider

#7 2010-01-08 13:27:00

Re: Image Gallery / Content Slider

#8 2010-01-08 14:09:10

Re: Image Gallery / Content Slider

#9 2010-01-08 14:14:03

Re: Image Gallery / Content Slider

#10 2010-01-08 14:16:08

Re: Image Gallery / Content Slider

#11 2010-01-08 14:45:06

Re: Image Gallery / Content Slider

#12 2010-01-08 14:58:07

Re: Image Gallery / Content Slider

Board footer