Zikula Community

• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 191

  Posted: Mar 21, 2007 - 03:40 PM

  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:
  

  Code

  div.one-image { display: inline; }

  
  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

  • 
  •  
• markwest
  
  

  • Rank: Team Member
  • Registered: Mar 18, 2002
  • Last visit: Oct 21, 2009
  • Posts: 6606

  Posted: Mar 21, 2007 - 09:09 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
  
  

  Code

  /* Display the image block inline */
  div.one-image * {
      display: inline;
  }

  
  
  The key part of this CSS is the '*' which means all elements. How this looks in other browsers i'm not sure.
  
  -Mark
  
  --
  Visit My homepage and Zikula themes.

  • 
  •  
• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 191

  Posted: Mar 22, 2007 - 01:52 AM

  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
  

  Code

  style=display:inline;

  
  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

  • 
  •  
• markwest
  
  

  • Rank: Team Member
  • Registered: Mar 18, 2002
  • Last visit: Oct 21, 2009
  • Posts: 6606

  Posted: Mar 22, 2007 - 01:55 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
  
  --
  Visit My homepage and Zikula themes.

  • 
  •  
• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 191

  Posted: Mar 22, 2007 - 02:32 AM

  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
  

  Code

  <a class="" etc...>

  
  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:
  

  Code

  div.one-image table {
      display: inline;
  }

  
  
  This fix worked on IE6, IE7, and FF 2.0.0.3
  
  
  
  edited by: jbirchett, Mar 22, 2007 - 09:46 AM

  • 
  •  
•  
•  

Users on-line

• mazdev,
• mesteele101

This list is based on users active over the last 60 minutes.