smd_gallery: super-flexible gallery generator

lonelytraveller · 2011-05-18 16:15:20

I’m still missing the replies from the forum, even if I subscribed this topic, so sorry for being late.
For now I just used some jquery code to add the link at the end of each gallery, ‘cause the site had to be online on monday, and I didn’t have enough time to fix this. It’s not the most elegant solution, so I still want to try your solution and understand why it doesn’t work.

Wonder why it’s misbehaving for you? Can you post your tag/form please and I’ll see if I can figure out what’s going wrong?

I cleaned up my code before launching the website, then went back to the development site and gave your code another try, now in my gallery page I have the following tag:

 <txp:smd_gallery 
    onchange="category:bttt, category_title" 
    onchangewraptag="h3"
    grouptag="div"
    groupclass="gallery"
    form="gallery" />
<txp:output_form form="bttt" />

my “gallery” form looks like this:

{onchange:category}
{onchange:category_title}
{grouptagstart} 
<div class="gallery_item">
<a href="{url}" rel="lightbox-{category}">
{object}
</a>
</div>
{grouptagend}

and I just copied/pasted your “bttt” form:

<a class="bttt bttt{counter}" href="#top">Back to the top</a>

Now I get an even stranger behaviour: the first gallery has an h3 title “Back to the top”, and at the beginning of the page, right after the body tag I can see the following link <a class="bttt bttt{counter}" href="#top">Back to the top</a>
Maybe there’s some unclosed tag somewhere, but I can’t find it. Reverting to the old code the gallery works perfectly and the page validates.
You can see the “strange” output on the gallery page of the website where you tested smd_calendar (it’s the same project).

Bloke · 2011-05-18 18:52:54

lonelytraveller wrote:

the first gallery has an h3 title “Back to the top”

I managed to get this behaviour at some point but it went away after I put the anchor inside it’s own wrapper. Go figure.

at the beginning of the page, right after the body tag I can see the [bttt] link

If it’s appearing immediately after the body then yes I’d wager there’s a missing tag or something, or your gallery is inside some other list/table structure and the remaining anchor isn’t. But I must confess the fact that it displays the class="bttt bttt{counter}" is my fault, sorry. Outputting the form itself after the smd_gallery has terminated will indeed render the {counter} verbatim as it has ‘lost’ the gallery context. If you need the bttt link after the gallery, you’ll have to just add it yourself directly into the markup instead of calling the bttt form. My apologies for the bogus advice there.

Last edited by Bloke (2011-05-18 18:53:32)

lonelytraveller · 2011-05-20 20:51:39

Thanks Stef, I’m still looking for that missing tag ‘cause the link is still at the top of the page, followed by some lines of code that should be placed between the <head></head> tags:

<title>My page title</title>
<link href="http://mydomain.com/it/" rel="home">
<link href="http://mydomain.com/it/atom/?section=gallery" title="Flusso Atom" type="application/atom+xml" rel="alternate">
<link href="http://mydomain.com/it/rss/?section=gallery" title="Flusso RSS" type="application/rss+xml" rel="alternate">

Also the class="bttt bttt{counter}" text is still there. I’ll investigate further, because I think this solution could be useful for someone else.

pafruu · 2011-06-22 16:18:24

Hello again,

thumblimit=“1” isnt working for me at all.

I have a category called “GamePicts” which contains sub categories. What I want to achieve is have a thumbnail for each sub category and when thumbnail selected, the whole gallery under that sub category gets displayed in a lightbox.

here is what I have for code:

<txp:smd_gallery form=“gamegallery” thumblimit=“1” category=“GamePicts” sublevel=“all” />

and under gamegallery form:

<div style=“float:left; padding-left:5px; padding-right:5px;”><div style=“width:150px; height:100px”><a rel=“lightbox-{category}” href=”{url}” title=“A picture of {caption}”><txp:thumbnail id=”{id}” /><br>{category}</a></div></div><div style=“clear:right”></div>

what am I missing?

pafruu · 2011-06-22 16:41:14

ok looking further in the plug-in information I found That I have to do this:

<div style=“float:left; padding-left:5px; padding-right:5px;”><div style=“width:150px; height:100px”><a rel=“lightbox-{category}” href=”{url}” title=“A picture of {caption}”>{object}<br>{category}</a></div></div><div style=“clear:right”></div>

it worked but partially. I have now one thumbnail showing up but all of the categories for all other thumbnails are listed as well. And I only have one thumbnail where I should have two since I have two sub categories under the gamepicts category called: 25 may 2011 and 1 june 2011

pafruu · 2011-06-22 16:54:35

by adding onchange=“category_title” I now have 2 thumbnails from the two seperate categories which is what I want, but I still have the wording under thumbnail issue where it list all thumbnail categories.

Is there a way to put the category title under the just one thumbnail??

pafruu · 2011-06-22 18:39:03

Thanks guys but I actually got it working just by reviewing the info of the plug-in.

I am just trying to figure out how to get the lightbox t work and then I will be done.

pafruu · 2011-07-21 23:41:45

well this is embarrassing, The last person to post on here is me and here I am with yet another problem.

I am trying to create a gallery were I sort them by category and each category has only 1 thumbnail:

Here is what I have:

<txp:smd_gallery category=“gallery” form=“gallery” thumblimit=“1” wraptag=“div” class=“gall” breakclass=“thumb” break=“span” sort=“category” sublevel=“all” onchange=“category” />

the form gallery:

<a rel=“lightbox-smd” href=”{url}” title=“A picture of {caption}”>{object}
</a>

and the relating css:

.thumb {margin:10px 7px 5px 8px;
float:left;
clear:right;}

.gall {margin:0 auto;
position:relative;
left:4%;
width:960px;}

Mind you, when using <txp:thumbnail id=”{id}” />, where I get all thumbnails, the alignment is perfect, but for some reason when I use object, the hidden thumbnails use up space on the gallery display, therefore rendering the gallery in a very random manner.

seen here: www.whitewaterpools.ca/gallery

please help!

Thank you

Last edited by pafruu (2011-07-21 23:43:41)

pafruu · 2011-07-22 00:04:31

Hello again,

ahhh the wonders of grouptag and groupclass.

They actually solved the problem

thanks

qp2wd · 2011-08-10 16:41:55

I’d like to use smd_gallery and Nivo Slider to build a gallery that can be navigated from an external element by category. In other words, the image would appear on the left, and on the right would be a vertical row of navigation items (linked to categories) that, when clicked, would switch the images on the left to match the category that’s just been clicked.

Is this something I can accomplish purely through smd_gallery, or do I need to employ jquery to switch out the images?

Bloke · 2011-08-20 22:32:40

qp2wd wrote:

Is this something I can accomplish purely through smd_gallery, or do I need to employ jquery to switch out the images?

You might not need smd_gallery at all nowadays. From what you describe, have a look at Jeff’s awesome gallery page and see if any of that gives you inspiration.

If that’s not the answer I’d tentatively say “yes” that smd_gallery can do it, but from what I remember of previous efforts to do something along these lines, the setup was a little brain-bending. I’d probably need to spend a little time searching this thread to find if I answered the person here or if it was a request by e-mail. I suspect the latter, but I’ve been known to be wrong on many an occasion.

elwins · 2011-08-29 23:36:22

Hello, I am using
Textpattern · 4.4.1
smd_gallery 0.62
smd_lib 0.36
versions and wanted to make gallery like this

So I tryd lot of times and ways, but no results.

Maybe someone can help to make FORM code for this?

Last edited by elwins (2011-08-29 23:39:53)

MattD · 2011-08-30 00:25:21

That is using Gallerific jQuery Plugin and looks like you’d need something like:

<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
	<div id="controls" class="controls"></div>
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow"></div>
	</div>
	<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
	<txp:images class="thumbs noscript" wraptag="ul" break="li">
		<txp:image_url><txp:thumbnail/></txp:image_url>
		<div class="caption">
		<div class="image-title"><txp:image_info type="name"/></div>
		<div class="image-desc"><txp:image_info type="caption"/></div>
		</div>
	</txp:images>

Of course I haven’t used any plugins for the above.

Last edited by MattD (2011-08-30 00:25:47)

elwins · 2011-08-30 17:36:22

I puted this in head tags:

@ <script type=“text/javascript” src=”<txp:site_url />js/jquery-1.3.2.js”></script> <script type=“text/javascript” src=”<txp:site_url />js/jquery.galleriffic.js”></script> <!— Optionally include jquery.history.js for history support —> <script type=“text/javascript” src=”<txp:site_url />js/jquery.history.js”></script> <script type=“text/javascript” src=”<txp:site_url />js/jquery.opacityrollover.js”></script> @

Then in FORM copied your code, and in gallery page puted this:

<txp:smd_gallery category="mezs" sublevel="all" form="gallery" thumblimit="999" />
———————————————-

Result: All images are in list like with default <li> tag and repeated 3 times it looks like this:

*img1 img1.jpg
*img2 img2.jpg
*img3 img3.jpg
*img1 img1.jpg
*img2 img2.jpg
*img3 img3.jpg
*img1 img1.jpg
*img2 img2.jpg
*img3 img3.jpg

So something wrong and I dunno what! :(

Last edited by elwins (2011-08-30 17:37:52)

MattD · 2011-08-30 18:49:27

You would not need to use smd_gallery with the code I provided. If you want to use a form you would put this in the form:

<txp:image_url><txp:thumbnail/></txp:image_url>
		<div class="caption">
		<div class="image-title"><txp:image_info type="name"/></div>
		<div class="image-desc"><txp:image_info type="caption"/></div>
		</div>

Then use this on the gallery page.

<div id="gallery" class="content">
	<div id="controls" class="controls"></div>
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow"></div>
	</div>
	<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<txp:images class="thumbs noscript" wraptag="ul" break="li" category="mezs" form="gallery" />
</div>

This example only covers how to get html output similar to what you want. I haven’t gone into configuring the Gallerfic plugin but more info on that can be found on the Gallerfic Site. This layout comes from Example 2

Textpattern CMS

Textpattern CMS support forum

#826 2011-05-18 16:15:20

Re: smd_gallery: super-flexible gallery generator

#827 2011-05-18 18:52:54

Re: smd_gallery: super-flexible gallery generator

#828 2011-05-20 20:51:39

Re: smd_gallery: super-flexible gallery generator

#829 2011-06-22 16:18:24

Re: smd_gallery: super-flexible gallery generator

#830 2011-06-22 16:41:14

Re: smd_gallery: super-flexible gallery generator

#831 2011-06-22 16:54:35

Re: smd_gallery: super-flexible gallery generator

#832 2011-06-22 18:39:03

Re: smd_gallery: super-flexible gallery generator

#833 2011-07-21 23:41:45

Re: smd_gallery: super-flexible gallery generator

#834 2011-07-22 00:04:31

Re: smd_gallery: super-flexible gallery generator

#835 2011-08-10 16:41:55

Re: smd_gallery: super-flexible gallery generator

#836 2011-08-20 22:32:40

Re: smd_gallery: super-flexible gallery generator

#837 2011-08-29 23:36:22

Re: smd_gallery: super-flexible gallery generator

#838 2011-08-30 00:25:21

Re: smd_gallery: super-flexible gallery generator

#839 2011-08-30 17:36:22

Re: smd_gallery: super-flexible gallery generator

#840 2011-08-30 18:49:27

Re: smd_gallery: super-flexible gallery generator

Board footer