smd_slimbox

jstubbs · 2007-05-13 17:52:03

Hi Stef:

“Deprecate: showcaption, showalt, textpos in favour of display where you can specify what you want to display (caption, alt, author, id, date, filename, etc) and then where you want it (before, after, above, below). e.g. display=“caption:before, author:below” “

The above sounds good.

For the rest of the classes you mention, it sounds very powerful, perhaps too many options. It also (at first read) seems to be directed at to images only. What about the ul/li/img classes? Most people would be placing (I would have thought) most of their images into divs/ul and list items, so I would have thought some easy to use classes for common items would be good.

Also, it would be nice to have (if you look at my instance above, where I have more than one gallery on a page) differing classes for subsequent divs. For example, div one contains the first group of images and is a background blue. Second div contains the second gallery and has a background of green.

Hope this helps you…!

Bloke · 2007-05-13 20:28:03

jstubbs wrote:

perhaps too many options.

That was what I was afraid of. I spent a while trying to think it through on the power vs usability scale. I whittled it down to those core options as something that I hoped was both readable and extensible enough that it gave people a migration path from a simple “one class for all images” up to “every image could have a different class”. And every shade in between.

Of course, the proof is in the using. I was going to code up a prototype and offer it out to gauge reaction but I had to be sure it was doable before I committed. I believe it’s doable with this new PHP class I’m playing with, and also extensible enough that it can be applied to a multitude of situations (i.e. it goes in smd_lib and can then be used for other people’s plugins, not limited to galleries but any situation you want broad or granular control over a group of whatevers).

It also (at first read) seems to be directed at to images only. What about the ul/li/img classes?

That’s why I decided to define the “cell” object for slimbox. That’s at the “wraptag” (‘li’) level, rather than the image level. When I first made the plugin I had classes for everything and it turned the code into tag soup. wouaren in this forum showed me the CSS light I’d forgotten and that I could get at 90% of the markup via CSS without a single class definition. At least, 90% in terms of a single gallery. Multiple galleries, as you’ve found, are a different beast entirely and something I hadn’t even dreamed possible at first.

This is my way of giving that extra control over the CSS without trying to make it (too) rocket sciency for beginners or too limiting for power users. Time will tell if I’ve succeeded or if I should just give discrete imgclass, cellclass, groupclass, navclass, nextclass, blah blahclass tag options.

Also, it would be nice to have differing classes for subsequent divs. For example, div one contains the first group of images and is a background blue. Second div contains the second gallery and has a background of green.

Will be possible. I forgot to mention one other new attribute grouptag that is the “outer” level containing a whole set of images. At the moment that is ‘outside’ the plugin, defined in your page/form. I intend to bring it inside so multiple galleries per page are easier from one tag if you wish (of course, if I knew how to build in the form attribute this would probably be unnecessary!)

Using grouptag="ul" wraptag="li" would then allow you to do:

class=“group:bgBlue;bgGreen;bgRed”

That would cycle the ULs through those three classes in order. You could also colour a particular author’s group with a different class by matching that author’s name (say you had a photography portal showcasing a load of artists’ work, you could highlight a particular artist this way).

And of course there’s nothing to stop you doing:

class=“group:baseClass, group:bgBlue;bgGreen;bgRed”

which would always apply ‘baseClass’ plus one of the cyclic classes, every time a group change was detected. If orderby="category" was used, the classes would be applied at each change in category. If orderby="author" was used, every author gets their own gallery. The baseClass might contain some CSS to float:left; clear:both and give each gallery its own vertical space on the page and the bgBlue, Green etc might just colour them (ignore the non-semantic names for now!)

If there’s anything I’ve forgotten or any way you can see of making it better or more penetrable or easier to use, then all the better. That’s why I love these forums because it’s like giving the people that ultimately use the plugins ownership in the project as a whole. Everyone steers and I’m just the rudder that tries not to land us on the rocks :-)

EDIT: Thinking about it, maybe the nomenclature should be the usual wraptag/break instead of grouptag/wraptag. Even though I’m not a fan of the term ‘break’ it aligns more with existing tags. Any thoughts?

Last edited by Bloke (2007-05-14 08:08:33)

jstubbs · 2007-05-14 18:27:25

Yes I would think that using wraptag/break would be easier for most people, since that’s maybe more what they are used to. For the rest of your ideas, I think they make sense, but personally I would prefer something that is easy-ish to understand, so as not to put off new users.

I used Christophe’s slimbox before moving to your plugin, and at first, I was put off by what seemed to be a complicated plugin. Now that I switched, I realise that I have many more options than I did before, and its easier to maintain.

For these reasons – ease of use and perception of difficulty – I would think making it as easy as possible would be a good way to go.

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.

Textpattern CMS

Textpattern CMS support forum

#133 2007-05-13 17:52:03

Re: smd_slimbox

#134 2007-05-13 20:28:03

Re: smd_slimbox

#135 2007-05-14 18:27:25

Re: smd_slimbox

#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

Board footer