Dizkus

I have written a transform hook for the mGallery2 Gallery integration module so I could add G2 images into my news posts and it works great. The functionality is modeled after the Drupal gallery-filter. The only problem I have is that I can't seem to get a series of multiple image blocks to display inline.

I was thinking about updating this module for PN.08, but I want to get this last glitch worked out before I start. I have tried everything I can think of and the blocks keep displaying in a vertical row. The output can be seen here and here.

The gallery2 module returns each image wrapped in a div of class=one-image. I added this to my module:

This didn't work. Any help would be greatly appreciated. As soon as this is worked out, I will work on moving this module to .8 standards.
Thanks.



edited by: jbirchett, Mar 21, 2007 - 10:42 PM

Johnny,

The first thing I see when I look at both sites are a few HTML validation issues. While these most likely aren't the cause it's worth tidying these up as its easier to get consistent application of CSS with a valid HTML document.

I also notice that there's a lot of additional markup aside from just display the image. It seems to be some additional info about the image from gallery. From some experimentation it's this additional markup that prevents the div from displaying as expected.

Using the web developer toolbar for firefox (a quick plug for one of my favorite tools...) we're able to alter the CSS live in the browser. Setting all elements contained within the one-image div to display inline seems to achieve the desired result (at least in firefox). The CSS is



The key part of this CSS is the '*' which means all elements. How this looks in other browsers i'm not sure.

-Mark

That seems to be correct. Gallery returns a block of HTML and some header CSS for the random image block. If frames are added to the image, it returns a table structure, which seems to be what was stopping the inline display. Before I read this post, I tried using preg_replace to add

to the table declarations and that worked. I'll use the CSS you suggested above for a cleaner fix.
Thanks. I'll check out the HTML validation issues as well.



edited by: jbirchett, Mar 22, 2007 - 09:43 AM

Johnny,

The other HTML issues are minor and, in this case, not the problem. However I always mention this when dealing with CSS queries as it makes life so much easier if you don't have to sort through a bunch of other errors to get to the real cause.

I'll be interested to know if that change works ok in IE6.

-Mark

I fixed the HTML issues. The first was my Google Sitemap verification ID, I had meta capitalized. The next four were because the form declaration for the category filter form was inexplicably commented out. Not sure how that happened. The last one is being introduced by MultiHook. I have an auto link defined and it is putting

in as the anchor definition. I'll have to look at the MultiHook source to figure this one out.

Your CSS fix caused the frame elements to display inline as well, which was strange looking, so I specified the table elements in the one-image class and that worked perfectly.

I added a new line to the module CSS:


This fix worked on IE6, IE7, and FF 2.0.0.3



edited by: jbirchett, Mar 22, 2007 - 09:46 AM