Make ImageBlock display horizontal Blocs (not embedded, not external php link)

ergos

Joined: 2006-02-09
Posts: 19
Posted: Wed, 2006-09-20 13:49

Hi all,
I have searched a lot before making this question.
How to display ImageBlock blocks horizontally and not vertically?

I am not calling ImageBlock from an external php file, I need this features straight inside gallery.

I have tried to tweak the CSS in every way (about the div.img-one etc... etc...) but nothing.

Any idea?

Thanks,
Filippo

ps: I am using the siriux theme.
 
ergos

Joined: 2006-02-09
Posts: 19
Posted: Fri, 2006-09-22 17:22

I think I have solved this, apply this CSS extra code:

div.one-image {float: left;}
div.one-image a { display:inline;}
div.one-image img { display:inline;}
block-imageblock-ImageBlock { display:inline;}

Hope this helps.
 
hix

Joined: 2006-01-25
Posts: 18
Posted: Sun, 2007-01-14 02:21

It works, but it is not perfect. The images are shown horizontally, but it looks different than the normal view (eg: 3 rows, 3 columns). To be honest, it looks a little bit messy. And if you have an image block in the sidebar, you will get display errors when you have items below the image block.
 
Another_Matt

Joined: 2009-08-20
Posts: 40
Posted: Sat, 2009-10-03 19:07

Figured out how to fix the sidebar today when using this technique. Basically, you gotta clear the float in the sidebar.
In my Theme.css, I added

Quote:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

And I changed line 16 of modules/Imageblock/templates/blocks/imageblock.tpl to:

Quote:
<div class="gbBlock clearfix">

This has been bothering me for awhile so I hope this hack helps others.
 
bartmaskphoto
bartmaskphoto's picture

Joined: 2010-01-28
Posts: 10
Posted: Wed, 2010-02-24 18:02

Hi Another_Matt
Really thank you for your answer. This is really helpful, and successful. Great thanx.
However, is there a way to make the imageblock has bottom or middle vertical alignment? I have tried to use the vertical-align:middle in the code, such as this one:
div.one-image a { display:inline; vertical-align:middle }
div.one-image img { display:inline; vertical-align:middle }
block-imageblock-ImageBlock { display:inline; vertical-align:middle }
but unfortunately it's doesn't work. Thanx for your asnwer.