smd_slimbox

buedi · 2007-05-19 18:46:25

First I have to thank you for this great Plugin. I am new to Textpattern (installed it 2 days ago just for testing) but I got your Plugin running in a few Minutes and the last 2 hours I was playing around with it a bit.

I discovered one strange thing:
Because I don´t know much about txp I just messed around a bit. My Goal was to display a Thumbnail in an Article with your Plugin which is Clickable and offers the possibility to use the Next / Prev Buttons for the User to click through the Category. What I tried was smuggling the <txp:smd_slimbox imageid=“45” /> into the Article. To my Surprise it worked. The Image is clickable and uses your Plugin. But I missed the Next / Prev Buttons.

While messing around with my Forms I “accidently” inserted a <txp:smd_slimbox category=“Geneve07” showcaptions=“1” /> into my “default” Form. This caused a Gallery showing up in each Article. So, I don´t really want this. But listen, now comes the strange thing:

Remember the Article I wrote above? The one where I smuggled the txp:smd_slimbox Tag into? When I click on the Thumbnail now I have the Next / Previous Links.

Now I think I will work through this Thread and see how it could be best done.. but I thought you find this interesting ;-)

Cheers,

buedi :-)

Last edited by buedi (2007-05-19 18:47:00)

Bloke · 2007-05-21 22:56:04

buedi wrote:

… smuggling the <txp:smd_slimbox imageid=“45” /> into the Article… I missed the Next / Prev Buttons. I “accidently” inserted a <txp:smd_slimbox category=“Geneve07” showcaptions=“1” /> into my “default” Form… When I click on the Thumbnail now I have the Next / Previous Links.

Hi buedi, yes you will get that behaviour. It’s how Christophe designed Slimbox to work!

Essentially what you have done is add two galleries to the same page (even though the 1st gallery is really just one image). By default, slimbox shows next/prev links over the image if there are more slimbox images on the page regardless of which gallery they are in (btw, to stop this behaviour when your galleries are in separate categories, you should use the attribute groupname="?c")

What I think you are trying to do is similar to what jstubbs and progre55 have mentioned: a system of either logically separating out galleries, “hiding” a gallery or “starting” a slimbox gallery from a single image or link. Unfortunately, none of the above are easy (or perhaps even possible) in the current version :-(

Depending on how good my coding is, some or all of those features will appear in v3 which is (annoyingly) slow going as I’ve got a lot on the music front right now… and joining the xPattern working group hasn’t helped!

Sorry it’s not quite as good as it could be, but hopefully it’ll still be useful in the meantime. If you do find a way round it with some clever use of the options, by all means let us know!

buedi · 2007-05-26 17:38:50

Bloke wrote:

Hi buedi, yes you will get that behaviour. It’s how Christophe designed Slimbox to work!

Thank you very much for your detailed Explanations. I abandoned my Plans for now and use the txp:article_image Tag. It is not really neccessary to use Slimbox in my Article List for that purpose. But when i first installed your Plugin I was just curious and trying where I can use it and where not (while being amazed how nice it looks :-)).

In the last sentences of your Post you sound like you are apologising for the Work you have done. Don´t do this! What you have done is outstanding. Even I as a Textpattern Newbie and someone who has not much clue about HTML / JS / CSS got it working in a few Minutes.

My deepest respect to you and I appreciate your Work very much.

Greetings to you,

buedi ;-)

jstubbs · 2007-06-03 20:52:38

Hi Stef,

Have just created a new gallery on a site, and basically copied over what I had from another site.

In the “header” form I have:
<!— Slimbox —>
<txp:js n=“mootools” />
<txp:js n=“slimbox” />
<txp:css format=“link” n=“slimbox” />
<txp:smd_slimbox_inc skip=“3” />

(Using stm_javascript)

and in the page:

I get the thumbnail image loading ok, but on click, the full size image opens in a new window, TXP style :-(

I double checked the loading of the JS and CSS by entering the HTML tags in a new window, and the mootools and slimbox JS files are loading correctly, and in the right place.

Cannot figure out why the setup works on one site and not another! Just to double test, I entered the slimbox tags I have on the other site into this site’s header form – slimbox worked!

Have also tried:
1. deleting the mootools and slimbox JS and then recreating them
2. changing the mootools script to include all mootools options

Looking at the problem with FF firebug plugin, I get an error – something like there is a missing ) on line 3.

??!!

Qwest · 2007-06-05 14:35:23

Hey, just wanted to say that i think the smd_slimbox plugin is fantastic and it is one of my default plugins that go on every installation of txp i do!

I do, however, have one question.

I maintain a website for a london based night club. Originally, i had TXP for my content, and a php based gallery for my images, but im slowly moving my images over to TXP as the slimbox provides such a great gallery!

My problem is this. On the front page, my TXP serves up the standard content & new posts etc. At the top of the page though, i have a little box which pulls data from my ‘event’ category and shows the next event. I am using 2 custom fields which show the front & back of the flyers. Before using Slimbox, i’d put in a whole bunch of HTML to show a thumbnail, and then once clicked, it’ll show the larger flyer.

As i said, im now moving to Slimbox. When i enter the slimbox code <txp:smd_slimbox… code into my custom fields, nothing shows up! But if i enter standard text / HTML into the custom field, that appears fine!

Is there a known bug or any reason why it wont show the slimbox when it’s put into a custom field?

Thanks for the help :D

Bloke · 2007-06-07 00:42:28

Qwest wrote:

just wanted to say that i think the smd_slimbox plugin is fantastic and it is one of my default plugins that go on every installation of txp

Aww shucks, thanks… :-)

On the front page… i have a little box which pulls data from my ‘event’ category and shows the next event.

OK, just trying to get my head round what you’re doing here. Is each event an article with category 1 or 2 set to ‘event’ or are they articles in a section called ‘event’? Or something else entirely?

I am using 2 custom fields which show the front & back of the flyers. Before using Slimbox, i’d put in a whole bunch of HTML to show a thumbnail, and then once clicked, it’ll show the larger flyer.

Right, to see if I understand this, let’s assume you have an event called “80s Night” coming up next week. At the top of the front page is a box that allows visitors to click on ’80s Night’. That goes to the DB, gets the article for 80s Night and shows the visitor the article about that event. In that article you use custom_1 and custom_2 to hold HTML code that goes off to your image gallery repository, shows the thumbnails and then, when clicked, show the relevant full-size flyer. How am I doing so far?

If that’s the case, to do it in Slimbox requires changing the way the article is displayed and not putting the call to slimbox in the custom field itself. There are lots of ways to achieve this.

The first way is to create your 80s Night flyers and store them in an image category called the same as your article title (e.g. “80s-night” or something). Then put a call to smd_slimbox in the form/page you use to display your events like this:

<txp:smd_slimbox category="?t" />

That will look at your article title (in this case, you called it “80s night” so the url-only-title will be 80s-night, yeah?) and show a gallery of the images from that category. In this case, front and back of your flyer for that event.

If you prefer to handle your images as IDs, you could do it this way:

<txp:smd_slimbox imageid="?custom_1" />

What that allows you to do is put the image IDs as a comma-separated list in the custom_1 field of each article. When your visitor displays an article, Slimbox will read the list in the custom field and go and grab those pictures, making a gallery from them. Add orderby="fixed" if you want to force them to be displayed in the order you specify them in the list.

Third option, if you like category names but don’t want your image galleries to be named after the articles themselves:

<txp:smd_slimbox category="?custom_1" />

And for each event article, put the name of the corresponding image category in the custom_1 field, e.g. you might use the date of the event “2007-06-11” as your image category name. Again, Slimbox will pick it up automatically.

There are probably other ways to do it with relative strengths and weaknesses. Hope that helps/gives you some ideas on how to (ab)use the plugin. If I’ve grossly misunderstood the way your system is set up, let me know and I’ll see what I can come up with. Send a link if you can, so I can see the site in action.

Bloke · 2007-06-07 00:53:56

jstubbs wrote:

(Using stm_javascript) Looking at the problem with FF firebug plugin, I get an error – something like there is a missing ) on line 3.

Eeek, that’s certainly a weird one. I have a hunch there’s a tiny bugette in stm_javascript that pops up occasionally. Try this:

When you’ve pasted your code into the stm_javascript window (or if you’ve already stored it, when you edit it), go right to the end of the bottom line of the code, hit enter and add a space, then perhaps add another enter character for good measure. Save each js file like that, then run the page again.

If that fixes it then Yay! I have no idea why or under what circumstances it does it, but in certain situations it seems to “lose” the last character of the file so adding a few random whitespace characters on the end means they get missed off instead of the all-important last ‘}’! Let me know how you get on.

Qwest · 2007-06-07 08:57:27

Bloke, thanks for the nice & lengthy reply on that! although it didn’t quite work :(

Im very impressed with you managing to decipher exactly what i was trying to say just by what i said! lol!

Right, here goes. This is the website: – http://clubtrinity.co.uk

Top of the page, you’ll see a yellow box which displays the next event (in this case, 11th June). It’s showing the flyers now because i’ve got the Slimbox code within the ‘excerpt’ text field. Here’s the form i’m currently using for that yellow box!

<h3><txp:permlink><txp:title /></txp:permlink></h3> <div class="showflyers"><txp:custom_field name="flyer_front" /><txp:custom_field name="flyer_back" /></div> <div class="showdetails"> <h4><txp:php>echo strftime('%d %B, %G', strtotime(custom_field(array('name'=>'flyer_date'))));</txp:php></h4> <txp:excerpt /> </div> <div class="showend"><txp:permlink>Permalink</txp:permlink> + <txp:comments_invite /> </div>

It’s got the obvious bits in it.

The “showflyers” div aligns the flyer’s to the left. As you can see, I’ve got 2 custom_fields there, which show the front & back respectively. Next up is the <h4> tag which shows the event date (PHP code donated from this forum!). The PHP code basically formats the date. Then it shows the txp:excerpt which summarised the event (location, headliners etc). And then finally it’s just the permanent link & comments.

As you correctly guessed, the 2 custom_fields would contain HTML which would create a thumbnail, and upon clicking on the thumbnail, would go off the gallery, fetch the larger image and display it in a pop up!. It was hassle setting it up, and slimbox is a lot easier to deal with to be honest.

I dont fancy naming a ton of catagorys to match each event. I’ve just uploaded 60+ flyers for 30 events taking place in two countries. It took long enough uploading without a working batch uploader. I dont fancy creating the categorys too!

I’d much prefer to work with Image ID’s.

At the moment, in order to get the slmibox to work, i’ve put the code in the txp:excerpt field which works. But i’ve got nowhere to put the event summary..

Hope you can help :)

jstubbs · 2007-06-07 19:08:07

Bloke wrote:

When you’ve pasted your code into the stm_javascript window (or if you’ve already stored it, when you edit it), go right to the end of the bottom line of the code, hit enter and add a space, then perhaps add another enter character for good measure. Save each js file like that, then run the page again.

Hi, I tried what you suggest (thanks by the way), and the “missing ) after argument list” error notice in Firebug does disappear.

However, the lightbox effect does not work yet, I still get the image opening in the same window from the direct link. I will test a bit more..!

Edit: It now works – thanks very much for the help Stef! For the record, I pressed enter, space, enter in the stm_javascript window at the end of the script.

Bloke · 2007-06-07 19:42:33

Qwest wrote:

Top of the page, you’ll see a yellow box which displays the next event (in this case, 11th June).

Blimey, I must be psychic… the date I chose for the example I gave was for the 11th June… spooky. Anyway, I can well imagine you not wanting to name all those image categories so you’re right, IDs are much more sensible.

Try this in your form instead:

<h3><txp:permlink><txp:title /></txp:permlink></h3>
<div class="showflyers">
  <txp:smd_slimbox imageid="?flyer_front" orderby="fixed" />
</div>
<div class="showdetails">
  <h4><txp:php>echo strftime('%d %B, %G', strtotime(custom_field(array('name'=>'flyer_date'))));</txp:php></h4>
  <txp:excerpt />
</div>
<div class="showend"><txp:permlink>Permalink</txp:permlink> + <txp:comments_invite /></div>

Go into your article for 11th June and make a backup of the contents just in case, then remove the smd_slimbox code in the excerpt and put the real excerpt text in there. In your flyer_front custom field, put the following: 79, 80 and delete whatever is in flyer_back.

Save the article then look at the output. With luck, if my brain’s switched on after a hard day’s remixing, that should display slimboxable image IDs 79 and 80 within the showflyers div and the excerpt underneath, plus all the other stuff from before.

Now you don’t really need both flyer_front and flyer_back; you could rename flyer_front as flyer_images or something (change the smd_slimbox tag accordingly!), saving you a custom field. And you’re not limited to just 2 pictures either (if you’re feeling creative of course)… just list all the IDs of the pics you want to display and slimbox will do your bidding!

BTW, I notice that your images are displaying as “Image 1 of 29” etc and the next/previous links go through all the flyers on the front page in turn. You probably want this behaviour here but if not, add something like groupname="nextevent" to the smd_slimbox call and your visitors will only be able to navigate between the two at the top of the page (“Image 1 of 2”) when they click one of them.

Similarly, if they were to go to the bottom of the page and click one of the other ‘old’ event images, they would be constrained to that group only, excluding the two from the next event at the top of the page (“Image 1 of 27”). Like I say, you probably don’t want this “feature” on this site, but I thought I’d mention it in case you ever do.

Let me know if that sorts you out and if not, I’ll try and work out what you really want… been a long day in the studio.

Last edited by Bloke (2007-06-07 19:44:58)

Bloke · 2007-06-07 19:48:57

jstubbs wrote:

It now works… For the record, I pressed enter, space, enter in the stm_javascript window at the end of the script.

Sweet, I guess the reason it didn’t work right away was Firefox cacheing the darn page request – it’s a bugger for that.

Note to self: mention this odd behaviour to Stanislav and ask if it’s fixable one day…

Qwest · 2007-06-08 09:16:51

Bloke!! Spooky indeed, however, it’s not worked :( I removed the slimbox code from the excerpt, and replaced it with a summary, pasted the new form you listed and then changed the “flyer front” code to 79, 80. However, all it shows is the summary.. It’s as if it’s ignoring that ‘flyer_front’ field. So for the time being, i’ve had to put the slimbox code back in the excerpt field.

any ideas?

And a) thank you for the groupname="nextevent" bit, that’ll work great!!! and b) im intrigued by your ‘remixing’ lol!

Last edited by Qwest (2007-06-08 10:08:27)

Bloke · 2007-06-08 11:00:59

Qwest wrote:

it’s not worked … It’s as if it’s ignoring that ‘flyer_front’ field.

Odd. I’m doing exactly that in one of my pages. My custom field is called Image_list and my tag is:

<txp:smd_slimbox imageid="?Image_list" orderby="fixed" />

Hmmmm. I have assumed since your images were called 79.jpg and 80.jpg that they were image id 79 and 80 in the database. Is that the case? The flyer_front field has to list the IDs of the images you want to show.

As a test, just force the imageids using this:

<txp:smd_slimbox imageid="79, 80" />

(or whatever the two image ids are that you want to show). If that works then at least we know it’s getting somewhere and it’s just not “reading” the custom field properly.

Next test: Are you using the keywords box? If not, try putting a single image ID in there and changing the slimbox tag to read:

<txp:smd_slimbox imageid="?keywords" />

(you can use ?article_image instead if you have an article image associated with the page). Then try putting two image IDs in your chosen field.

If it still works, then we can move back to the custom field. Move the list of image IDs from the keywords field to your chosen custom field and change the slimbox call to the name of the custom field. Make sure it’s spelled exactly the same as in your Admin->Preferences->Advanced screen (it’s case sensitive). And don’t forget the question mark at the beginning of the word!

Past that I’m stumped at the moment… I’ll have a think.

im intrigued by your ‘remixing’

Hehehe, I run a record label for free in my spare time (spare… ha!). Would love to make money/a difference doing that. We record music from talented local artists whom the record industry won’t touch because they’re “different” from the boy bands/R&B chart crud. One day it’ll take off but while we’re good at the music side, we’re rubbish at promotion. If you know any people who are awesome at marketing who will work on a profit-share basis I’m all ears :-)

The label’s Dissential – ‘scuse the site, it’s a real mess (my very first TXP effort – man if only I’d known then what I know now…)

FireFusion · 2007-06-08 11:38:51

Any chance of making smd_thickbox (see thickbox) now that jQuery is part of future Textpattern releases?

Bloke · 2007-06-08 12:10:10

FireFusion wrote:

Any chance of making smd_thickbox now that jQuery is part of future Textpattern releases?

Don’t see why not. It’s not quite as pretty as slimbox and the keyboard navigation seems to be lacking, but if jQuery is going to be bundled with TXP (and wet is a big fan) I might as well dive in and get my hands dirty.

One caveat: I would probably not do it the way I did slimbox. In my overhaul of the code for v3 I’m seriously considering redisigning it as a library with bolt-on modules. Slimbox would be one such module, slideshow would be another, thickbox could be another, and anyone else could make use of the thumbnail generation code for future modules.

Now that jQuery has been decided, I’m going to approach wet and ask about ways to do this. I haven’t much idea right now; I can see how I want it to work but I can’t decide the best way to do it.

Watch this space, and thanks for highlighting that post; I might have missed it otherwise.

Textpattern CMS

Textpattern CMS support forum

#136 2007-05-19 18:46:25

Re: smd_slimbox

#137 2007-05-21 22:56:04

Re: smd_slimbox

#138 2007-05-26 17:38:50

Re: smd_slimbox

#139 2007-06-03 20:52:38

Re: smd_slimbox

#140 2007-06-05 14:35:23

Re: smd_slimbox

#141 2007-06-07 00:42:28

Re: smd_slimbox

#142 2007-06-07 00:53:56

Re: smd_slimbox

#143 2007-06-07 08:57:27

Re: smd_slimbox

#144 2007-06-07 19:08:07

Re: smd_slimbox

#145 2007-06-07 19:42:33

Re: smd_slimbox

#146 2007-06-07 19:48:57

Re: smd_slimbox

#147 2007-06-08 09:16:51

Re: smd_slimbox

#148 2007-06-08 11:00:59

Re: smd_slimbox

#149 2007-06-08 11:38:51

Re: smd_slimbox

#150 2007-06-08 12:10:10

Re: smd_slimbox

Board footer