Randomland's Drupal Module

[zourtney]

Yeah, you should! (And pickles are good!)

So, my next step is to make that canvas thing so you can lay out a grid on images. If you look at the Tentin' post, you'll notice that they wrap to the next line, when needed. How would you, as someone who uses it, want it to work? Wrap always? Wrap by default? Never wrap? We could do things like setting the number of columns.

Also, what should it be called? Like rlimg-block or something? And have it so you just throw your images in it? Like:

Code Select Expand

[rlimg-block]
    [rlimg xxx][rlimg xxx][rlimg xxx][rlimg xxx][rlimg xxx][rlimg xxx]
[/rlimg-block]

Respond if you care.

[Nick]

Wow. I more then slightly like it. I think wrap by default is the way to go, with the option to set a min/max width. Also there in a weird thing where the grid of pics jumps over from a lefty looking align out toward the middle of the page. Might be something to do with a <p> but I am not sure. It the bottom block on the tentin' post. You might not see it without some crazy desktop resolution like what I am punishing my eyes with.

[zourtney]

I worked on the module quite a bit tonight. You can see the final result here. Just look for the grids on images towards the middle and bottom of the page.

I have implemented some very rudimentary [rlimg-block] code, with a snoozingly boring style. I broke up the code into separate files and commented it pretty heavily. I have pushed all HTML styling into three template files: rlimg_single.tpl.php, block_open.tpl.php, and block_close.tpl.php. CSS is still defined under css/rlimg.css. Edit them as you wish (all ye who have legitimate server access).

Straight from the article body, this is the code:

Code Select Expand

[rlimg-block][rlimg 451][rlimg 464][rlimg 456][rlimg 472][rlimg 471][rlimg 495][/rlimg-block]

Here are some improvements that immediately come to mind. Please, toss out your own if you have any.

• Reduce padding between images. This will probably involve defining a separate template file for images contained within rlimg-block tags.
• Reduce head-room padding. Why is this here? The rlimgs still have way too much bottom padding, too.
• Fix styling to be less 'blahhhh'
• Add content alignment parameter. I kind of like it defaulting to left-aligned, but if you only had 2 or 3 images, you might want to center-align them. Syntax something like [rlimg-block contentalign=center]?
• Add width parameter. I suppose this could be up to the page designer, making the implement it with a style="width: 500px;" or something...what do you think? Would syntax like [rlimgblock width=500] be of
  benefit?
• Add block alignment parameter. Meaning that you specify how it would align on the page. This is optional, but I think I would use it. You could have options like center, left, and right. I almost always want it centered, with the content left-aligned, but maybe that's just me.

Ok, that's enough out of me. Respond if you feel so inclined. And, for all of you with admin rights, I've set up a "sandbox" page here, at node 1267. Please, feel free to try it out so you can tell me what it needs.

[Nick]

I like, I like. I will definitely be using this in the future. And for whatever reason I am really fond of the rounded corners on the 'cells' of the grid (the borders of the images.)  Now we just need to decide on some colors. 

[zourtney]

For the exterior border, I used the -moz-border-radius. Consequently, they're just square in IE. The inside uses four very small PNGs to round it out. I could easily use the image-corner method for the exterior of the border if it is worth the effort.

I am trying to decide what would make the background of [rlmg-block] look better. Rounded corners? Gradient edges?



EDIT: I just thought of another potential feature -- adding descriptive text to the rlimg-block. That way you could write have a little blurb about your group of pictures. Maybe looking like

-----------------------------------------------|
|  ------  ------  ------  ------              |
|  |img1|  |img2|  |img3|  |img4|              |
|  ------  ------  ------  ------              |
|                                              |
| With much undue direction from Justin,       |
| Brad backs over Francine's fenders,          |
| rendering them mangled and unsalvageable.    |
-----------------------------------------------|


Would this be worth implementing?

[Nick]

It would be worth it if there was no way to do it otherwise. It may look better to have the text in the block with the images rather then underneath it all. We/you might maybe experiment with HTML 5 for creating the background and corners for blocks.... Just an idea. I am actually not familiar enough with it to know if that would be something it could do or not (the rounded corners that is. I know it can do backgrounds of all sorts.)

[zourtney]

I fixed up the code so that [rlimg] calls embedded within an [rlimg-block] get routed through a different template file. Right now, the only real distinction is that the [hh]rlimg[/font]s are floated so that they look right in IE and have a little less padding between them. But you could change them to look entirely different, because they are now separate code/templates.

Tentin' is still a good place to look at the rlimg calls working in harmony...except I just noticed that the YouTube videos are not displaying in IE for some reason...grrr.

What's next? Alignment properties?

[Nick]

What's with the dark gray bars on the bottom of images?

[zourtney]

Style gone bad. Feel free to change the template file, called rlimg-single.tpl.php (I think). Than is where the teaser text caption shows up, if available.

[Nick]

I like the teaser text... but its not always appropriate.  And if there is no text then it just looks weird. I might play with it just a little of its all right. Try to put the teaser text in a span so it will collapse if its empty. Plus.... maybe there should be an option to display the teaser or not.

What do you say, z-man?

[zourtney]

Yes, those could be good changes. Feel free to make any changes you want. I agree that the little semi-transparent bar looks out of place without text in it.

As for the teaser text, I was wanting to make it so you could pass it a text override parameter. Like [rlimg 1047 | teaser="Eighteen chickens in a Petrie dish"]

[Nick]

How many chickens can one fit in a petrie dish?

I agree with that. Custom teaser text relating more to the juxtaposition of the image is a good idea.

[zourtney]

I don't know about the chickens, but adding the aforementioned funtionality has been in my mind since the beginning. Right now, the only working option is setting the imagecache preset (defaults to thumbnail, obviously).

[zourtney]

Any official suggestions for (functional) features you'd like implemented? I might squeeze out some weekend hours and change it up a little bit. Right now, this is what we have:

Embed an image by calling rlimg and passing it the node ID.
[rlimg 1234]

Embed an image and display at something other than the default, thumbnail size. The parameter is the string value of the imagecache preset name.
[rlimg 1234|1024px_wide]

Embed a group of images within a poorly styled box. Right now, all images come in float: left and will wrap to the next line, when needed.
[rlimg-block]
    [rlimg 1234][rlimg 5678][rlimg 9012][rlimg 3456]
[/rlimg-block]

And that's about it. I'll all for changing the style up to be better, but I feel the code*.

So...don't be shy about changing the templates...I hacked that style together fairly quickly. There are only a few things I require:

• Shows image (duh)
• Has link to image node (currently the little 'i')
• Shows long description on hover (via title attribute), if supplied
• Shows short description below, if supplied
• Looks pretty much the same in all browsers

*motivation level subject to change at any moment

[zourtney]

[chirp, chip...chirp, chip]

Ok, that's what I thought. I guess I'll work on the rlimg parameter implementation next. I figure the following would be useful:

• id="int" (implied if directly following rlimg tag)
  
• preset="string"
  Displays image at the size specified by the imagecache preset. This syntax should probably replace the original [rlimg xxx|presetstring] syntax.
  
• teaser="string"
  Overrides the teaser text. This text is shown below the image.
  
• description="string"
  Overrides the body (description) text. This text is shown on hover.
  

A sample call statement:
[rlimg 1234 preset="1024px_wide" teaser="You are such a teaser" description="Don't stop Mr. Ed from dancing in the hall"]