Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2009-12-07 22:59:29
- idesign123
- Member
- Registered: 2009-12-06
- Posts: 13
Gallery - Show all images from Category
Hi guys,
I finally got an “image gallery” working, using the instructions on http://fuelyourcoding.com/easy-to-update-thumbnail-gallery-using-textpattern-and-galleriffic/
My version of the gallery is located at http://www.jwdlicensing.com/index.php?id=2 – and everything appears to be working great.
QUESTION:
- The current solution is to list all the images I want to show in the “Article Image” box – see http://fuelyourcoding.com/files/article_image.jpg (lower left)
- What I WANT to do is have the page show all images from a particular “Category”. The reason is that the gallery will have approximately 800 images, and I really don’t want to list all of them manually.
Possible?
Offline
Re: Gallery - Show all images from Category
Take a look at the smd_gallery plugin. I’m using it for this exact use case.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
#3 2009-12-07 23:12:41
- masa
- Member
- From: North Wales, UK
- Registered: 2005-11-25
- Posts: 1,095
Re: Gallery - Show all images from Category
Yes, smd_gallery would be my recommendation, too.
Here’s a sample form I use for galleries:
<txp:smd_gallery category="?image-category" sort="name" wraptag="div" class="gallery">
<a href="{url}" title="{title}" rel="lightbox[<txp:article_id />]"><img src="{thumburl}" alt="{alt}" width="70" height="70" /></a>
</txp:smd_gallery>This renders a series of thumbnails 70/70px pulled from the category listed in the custom field image-category. The jQyery lighbox plugin does the rest.
I doubt there’s anything smd_gallery can’t do.
Offline
Re: Gallery - Show all images from Category
masa wrote:
I doubt there’s anything smd_gallery can’t do.
I agree, if you need images it can probably do it.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
#5 2009-12-07 23:36:01
- idesign123
- Member
- Registered: 2009-12-06
- Posts: 13
Re: Gallery - Show all images from Category
Wow, that does look like a perfect match!
I’m still really new to Textpattern, so I’m trying to figure out where to put the code. So far, I’ve installed both the “smd_gallery” & “smd_lib” plugins (and activated them).
I also assigned all the images I want to appear in the Gallery to an “Image Category” (called “DW”).
Now I’m guessing that I need to add the code <txp:smd_gallery category=“DW” /> somewhere, but I’m not sure where.
Two possibilities I see are…
1) FORMS
<li><a href="<txp:upm_img_full_url />" title="<txp:upm_img_caption />" class="thumb" ><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" /></a>
<div class="caption">
<div class="image-title"><txp:upm_img_alt /> </div>
</div>
</li>
2) PAGE
@
<!— center —>
<div id=“thumbs” class=“navigation”>
<txp:article listform=“gallery” form=“gallery” sort=“Posted asc” limit=“1” />
</div>
<div id=“content”>
<div id=“gallery” class=“content”>
<div id=“slideshow” class=“slideshow”></div>
<div id=“controls”></div>
<div id=“caption” class=“embox”></div>
</div>
</div>
<!— footer —>
<div id=“foot”> </div>
</div>
<script type=“text/javascript”>
// We only want these styles applied when javascript is enabled
$(‘div.navigation’).css({‘width’ : ‘480px’, ‘float’ : ‘left’});
$(‘div.content’).css(‘display’, ‘block’);
// Initially set opacity on thumbs and add // additional styling for hover effect on thumbs var onMouseOutOpacity = 0.67; $(‘#thumbs ul.thumbs li’).css(‘opacity’, onMouseOutOpacity) .hover( function () { $(this).not(‘.selected’).fadeTo(‘fast’, 1.0); }, function () { $(this).not(‘.selected’).fadeTo(‘fast’, onMouseOutOpacity); } );
$(document).ready(function() { // Initialize Advanced Galleriffic Gallery var galleryAdv = $(‘#gallery’).galleriffic(‘#thumbs’, { delay: 2000, numThumbs: 9, preloadAhead: 10, enableTopPager: true, enableBottomPager: true, imageContainerSel: ‘#slideshow’, controlsContainerSel: ‘#controls’, captionContainerSel: ‘#caption’, loadingContainerSel: ‘#loading’, renderSSControls: true, renderNavControls: true, playLinkText: ‘Play Slideshow’, pauseLinkText: ‘Pause Slideshow’, prevLinkText: ‘‹ Previous Photo’, nextLinkText: ‘Next Photo ›’, nextPageLinkText: ‘Next ›’, prevPageLinkText: ‘‹ Prev’, enableHistory: true, autoStart: false, onChange: function(prevIndex, nextIndex) { $(‘#thumbs ul.thumbs’).children() .eq(prevIndex).fadeTo(‘fast’, onMouseOutOpacity).end() .eq(nextIndex).fadeTo(‘fast’, 1.0); }, onTransitionOut: function(callback) { $(‘#caption’).fadeOut(‘fast’); $(‘#slideshow’).fadeOut(‘fast’, callback); }, onTransitionIn: function() { $(‘#slideshow, #caption’).fadeIn(‘fast’); }, onPageTransitionOut: function(callback) { $(‘#thumbs ul.thumbs’).fadeOut(‘fast’, callback); }, onPageTransitionIn: function() { $(‘#thumbs ul.thumbs’).fadeIn(‘fast’); } }); }); </script>
</body>
</html>
@
Do you see a spot in either of these where I could add the “category” code? Or am I totally off base?
Last edited by idesign123 (2009-12-07 23:40:11)
Offline
Re: Gallery - Show all images from Category
I’m assuming the form shows is the gallery form. If you aren’t displaying any article data then you could replace the article tag with the smd_gallery tag. You wont need upm_image and can replace those tags with smd_gallery replacement tags.
Of course I could be misunderstanding what you’re trying to do.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: Gallery - Show all images from Category
Yes, as MattD says, you can either replace your article tag with your proposed gallery tag, at the expense of potentially angering the TXP subsystem for not including an article tag in your page. If you can live with the warning (which goes away in Live mode) then that’s cool. If you prefer to keep it clean you can bend the rules slightly by having one article in your gallery section and putting the smd_gallery tag directly inside the article itself (you may prefer to turn off the Textile processing for this article by setting it to Leave text untouched)
Also, note you don’t even need a separate form because smd_gallery can act as a container tag like this:
<txp:smd_gallery category="DW" wraptag="div" break="li">
<a href="{url}" title="{caption}" class="thumb">
<img src="{thumburl}" alt="{alt}" />
</a>
<div class="caption"><div class="image-title">{alt}</div></div>
</txp:smd_gallery>That (untested but it’s probably close) will do the same as your upm_image code above. If you’re trying to do something more complex, holler and we’ll try and figure it out.
EDIT: a third option is to put the entire smd_gallery tag above in a Form (say, img_gallery) and call it from your article. There are two ways to do this:
- Put
<txp:output_form form="img_gallery" />in the article - Set the override form in the left hand column to img_gallery. In order to do this, your Form must be of the ‘article’ type
Last edited by Bloke (2009-12-08 00:39:56)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline