I need some help in getting multiple images to display from left to right, up to 4 in a row before another row is created. Basically the way the EE1 gallery use to work.
This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
January 31, 2011 2:03pm
Subscribe [4]#1 / Jan 31, 2011 2:03pm
I need some help in getting multiple images to display from left to right, up to 4 in a row before another row is created. Basically the way the EE1 gallery use to work.
#2 / Jan 31, 2011 5:58pm
Are they roughly the same size? Or could they be? You could do it easily enough with DIVs - basically formatting them like table cells of equal widths and heights, which will then wrap to the next line after, as you indicate, 4 instances. You’d just style the fourth one slightly differently to remove the margin you’d likely apply to the first three to space them apart.
#3 / Jan 31, 2011 6:03pm
Check out this page on my site:
http://www.reddogdesigns.ca/work
I’ve used a list with the <li> having set heights in css to get this effect.
Hope that helps.
Mike
#4 / Jan 31, 2011 6:05pm
Great example Michael. Just what I was getting at. Actually, you’re right, classes applied to an unordered list would probably be the better approach too.
#5 / Jan 31, 2011 6:13pm
For sure. If I were doing this again I’d remove some of the extra div’s I had the code and just use straight <li>‘s with classes. Glad that helped out though.
#6 / Feb 01, 2011 10:47am
Ok - This is good learning curve for me. So you set up the entry results to display in an unordered list and use a div class to define the number of entries per row.
Can either of you share what the CSS div class looks like for this.
#7 / Feb 01, 2011 1:21pm
Sure. Here is the code I used:
{exp:channel:entries channel="work" limit="all" sort="asc"}
{if no_results}Sample No Results Information{/if}
{if count == "1"}
<ul id="thumbnails">
{/if}
<li><div class="workmodule"><div class="thumb"><a href="http://work/{url_title}">{thumbnail}</a></div>
<a href="http://work/{url_title}">{client}</a><br>{exp:word_limit total="4"}{project_title}{/exp:word_limit}</div>
</li>
{if count == total_results}</ul>{/if}
{/exp:channel:entries}
ul#thumbnails {
position: relative;
float: left;
margin: 0px;
padding: 0px;
z-index: 0;
}
ul#thumbnails li{
position: relative;
float: left;
width: 210px;
height: auto;
margin: 0px 30px 30px 0px;
padding: 0px;
z-index: 0;
background: none;
}
.workmodule {
position: relative;
float: left;
width: 210px;
height: auto;
margin: 0px;
padding: 10px;
z-index: 0;
background: #fff;
}
.workmodule:hover {
background: #efefef;
}
.thumb {
position: relative;
float: left;
width: 210px;
height: 110px;
margin: 0px 0px 10px 0px;
padding: 0px;
border: 1px solid #ccc;
}
ul#thumbnails li p.client{
font-size: inherit;
}
ul#thumbnails li p{
font-size: inherit;
}
Hope that helps.
#8 / Feb 01, 2011 1:38pm
Thank you Michael.
I’ll see if I can make it work.
Quick question for you…
Can you point out the section of code that controls when to start another row?
#9 / Feb 01, 2011 4:13pm
It’s being controlled by the css. The div that holds the <ul> is 960px wide. Each <li> is set to 210px width with a 30px right margin (total width 240px), along with float:left. So 240px x 4 (the number of thumbs I have per row) = 960px. Once the max width has been reached the next element automatically breaks onto the next line. Does that make more sense now?
#10 / Feb 01, 2011 4:51pm
ok I see. Thanks again.
BTW - you are light years ahead of me. 😊
#11 / Feb 01, 2011 4:58pm
No problem. Let me know if it doesn’t work out for you.
Cheers
Mike
#12 / Feb 01, 2011 5:32pm
Well interesting result….
As you can see from the URL items are not displaying:
http://purebred-dog.com/index.php/males/pattersons_beagles/554
But if you look at the source code all the content is there.
Any ideas.
#13 / Feb 01, 2011 5:52pm
I can see them in Firefox (on a mac). What browser are you using?
#14 / Feb 01, 2011 6:30pm
I see them on firefox as well….didn’t think to check.
I’m on IE7.
#15 / Feb 01, 2011 6:50pm
So if it works and looks the way it should in firefox and safari but not IE7. Does that mean it must be my html?
Point me in the right direction…what would you do?