Horizontally-Matched Columns/Exhibitions?

[segal3]

Hey Pekka -

In EE1.5RC4, the default exhibition ordering on the main page used to be (exhibition #s):
#1 #2
#3 #4
#5 #6
#7 #8

With EE2, it's ordering in columns, instead of in rows. So the previous becomes:
#1 #5
#2 #6
#3 #7
#4 #8

How hard is it to change in the embedded exhibition style?

[tommykjensen]

Yeah I like the first order best too.

[cferrero]

Me too!

[Pekka]

Does this work for you? Save it as default_XHTML_content_horsort.php, put it in your templates/pages/exhibition/embedded and then point the embedded exhibition style path to it in style editor. It needs still fix in last TD close if the last row is not full - will see abotu that later.

<?php
// XHTML exhibition template with horizontally sorted columns (v 1.0 by Pekka Saarinen 10/2006)
// parent table is in index page template

$s_exhibition_columns = "3";

if ($exhibition_counter == 0) {
ob_start();
@include("./" . $exhibition_embedded_layout);
$ee_embedded_css .= ob_get_contents();
ob_end_clean();
}

print "<td valign=\"top\" style=\"width={$div}%;\">";

?>
<div class="ee_exhibition_plate">

<div class="ee_exhibition_name">
<h3 class="ee_css_header_medium">
<?php print $exhibition_name_html; ?>
</h3>
</div>

<div class="ee_exhibition_paragraph">

<div class="ee_exhibition_image">
<?php print $exhibition_thumbs_html;
print "<br />"; ?>
</div>


<div class="ee_css_paragraph_bold"><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block">
<?php
if ($exhibition_owner_html != "") {
print $exhibition_owner_html;
}
print "<br class=\"clear\" />";
?>
</a></div>

<div class="ee_css_paragraph"><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block"><span class="ee_css_hyperlink">
<?php
//print "<br class=\"clear\" />";
print $exhibition_photocount_html;


if ($exhibition_countries_html != "") {
print "<br class=\"clear\" />";
print $exhibition_countries_html;
print "<br class=\"clear\" />";
}
?>
</span>
</a></div>




<div><p><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block" class="ee_css_paragraph">

<?php print $exhibition_description_html; ?>

</a></p></div>



</div>


</div>

<?php
$exhibition_counter2 = $exhibition_counter+1;
if ($exhibition_counter2 % $s_exhibition_columns == 0 && $exhibition_counter > 0) {
print "</td></tr><tr>";
} else {
print "</td><td valign=\"top\" style=\"width={$div}%;\">";
}
?>

[neil_r]

Many thanks, that works for me... Cheers

Dont forget to comment out..

if ($exhibition_owner_html != "") {
print $exhibition_owner_html;
}

if you want to get rid of the "gallery by" text

N

[kd6lor]

Many thanks, that works for me... Cheers

Dont forget to comment out..

if ($exhibition_owner_html != "") {
print $exhibition_owner_html;
}

if you want to get rid of the "gallery by" text

N


If you don't want to alter the code, change the owner of the exhibition to a zero length string and it will go away as well.

Paul

[kd6lor]

If the colums go left to right then down ( I like that arrangement btw ) but the thumbnails or microthumbs are of different heights, then the rows won't lign up with each other. Is it possible to place-space the images in a cell that's the size ( both up/down and right/left ) as the maximum pixel count of the thumb or microthumb? If the space were reserved for the max width/height and the image were placed in the middle, then they would be evenly spaced regardless of their orientation or crop ratios.

Paul

[Pekka]

If the colums go left to right then down ( I like that arrangement btw ) but the thumbnails or microthumbs are of different heights, then the rows won't lign up with each other. Is it possible to place-space the images in a cell that's the size ( both up/down and right/left ) as the maximum pixel count of the thumb or microthumb? If the space were reserved for the max width/height and the image were placed in the middle, then they would be evenly spaced regardless of their orientation or crop ratios.

Paul

Top of the rows align if you user align=top in TD. And you will always get empty space if each cell is not filled equally with content. That is why I did the original style - more like newspaper paragraphs, more elegant. BTW: I dont' get the obsession to alphabetize everything horizontally, do visitors really search galleries by first letter? :)

[kd6lor]

Top of the rows align if you user align=top in TD. And you will always get empty space if each cell is not filled equally with content. That is why I did the original style - more like newspaper paragraphs, more elegant. BTW: I dont' get the obsession to alphabetize everything horizontally, do visitors really search galleries by first letter? :)


Pekka, not for alphabetizing, but I prefer to have some galleries at the top of the list and other ones lower down. Visitors will often not scroll down a list of gallery entries so if I can keep my best galleries near the top, then they will be more likely to be hit.

I am at work right now using a 1280 by 1024 monitor and 4 of 6 galleries appear at www.melor.com/gallery I have them in order of preference for viewing ( my preference of course ) and would be happier if they appeared at the 4 top spots in the list, rather than down the left side where the third one is not visible without scrolling.

Paul

[segal3]

All of my galleries are location-based. As such, sometimes a new photo is added to a certain location, and I want that gallery to be seen as the 'most recently updated', so it gets moved to the top. That's why I like this revised template - thanks!

[koen_brader]

I use default_XHTML_content_horsort.php as shown above by Pekka, but the columns were not equally spread out. So I replaced

print "<td valign=\"top\" style=\"width={$div}%;\">";

on line 15 or so with

print "<td valign=\"top\" width=\"33%\">";

Pekka, how can I align the groups horizontally, as well?

[hbeumer]

Pekka, not for alphabetizing, but I prefer to have some galleries at the top of the list and other ones lower down. Visitors will often not scroll down a list of gallery entries

I also liked the old style with horizontal sort much better. My galleries are presented in chronological order, the newest ones near the top of the page.

Besides that, the new style has also some severe problems:

- the two columns are not eavenly spreaded, the left column in my case is much smaller than the right one
- sometimes the "gallery by.." text is printed to the right side of the thumbs, sometimes it is printed under the thumbs
- the galleries are not lined up vertically

This all makes for a very cluttered look of the index page

I would welcome a revised style

[Pekka]

I also liked the old style with horizontal sort much better. My galleries are presented in chronological order, the newest ones near the top of the page.


Well, I made the old style look available above. Is there a problem using that?

Besides that, the new style has also some severe problems:

With "new style" do you mean default EE 2.0 style with paragraph type columns?

- the two columns are not eavenly spreaded, the left column in my case is much smaller than the right one

This depends of content, if you have wide thumbs (and thumb limiter not on) and if you have long words in title/description.

if you talk about above horizontally aligned version of embedded exhibitions, you must add omitted

$div = abs(intval(100/$s_exhibition_columns));

there after $s_exhibition_columns is defined.

- sometimes the "gallery by.." text is printed to the right side of the thumbs, sometimes it is printed under the thumbs

Yes, some line break logic was wrong, I have fixed this and will include it in next release.

- the galleries are not lined up vertically

If this is about the paragraph style embedded exhibitions:
This is exactly how I designed it, it is a paragraph style, not table.

If this is about horizontally aligned embedded exhibitions:
Yes, they do align horizontally. What "not lined up vertically" means I do not know.

This all makes for a very cluttered look of the index page

I would welcome a revised style

Well, do you REALLY consider these SEVERE problems? I'm sorry but I must ask for a reality check timeout here. EE 2.0 has a default style which you can edit as much as you like, and if you find something that works really well please share it by all means. But I can not be a web designer for all, there are tons of skilled people out there who can make EE 2 look like just about anything. I try to help and fix the default style as much as I can, but I do not make custom styles on order.

[wkitty42]

print "<td valign=\"top\" style=\"width={$div}%;\">";to get this to work right on my setup, i had to change the above from "width=" to "width:" (colon instead of equals)
} else {
print "</td><td valign=\"top\" style=\"width={$div}%;\">";
}
?>additionally, i had to change the above print line to print "</td>";as well as adding in the missing "$div=" line you noted higher up in another message... these edits/fixes (finally) gave me three equal sized columns...

the last print line had to be reduced because the code loops back to the top and gets the first print line which already contains that TD tag and is the first one i had to modify ;)

[wkitty42]

If this is about the paragraph style embedded exhibitions:
This is exactly how I designed it, it is a paragraph style, not table.
when i first started working with css, it took me some time to get used to the new look that came with it... especially when things that used to be in tables were now done in paragraphs... but, as you say, it is more magazine and/or newspaper like... personally, i like the new style... it is refreshing and bold... i'm still trying to figure out what i want to do to my site(s) with regard to presentation... content is one thing that i have plenty of... it is the presentation (aka css) that my left brain just can't get around :cool:

If this is about horizontally aligned embedded exhibitions:
Yes, they do align horizontally. What "not lined up vertically" means I do not know.

i think what he is talking about is when the titles of the exhibitions take more lines than those beside them... the sample thumbs aren't lined up with those in the neighboring exhibits...

if i can get this right, the attached screenshot should show what i believe he is talking about... this is with the new horsort code with my fixes... note how the thumbs in the middle column are higher than in the two others...

[hbeumer]

Well, I made the old style look available above. Is there a problem using that?


No, actually I tried both the default EE 2.0 style and the suggested one with horizontal sorting including the suggested fixes.

They both suffer from some problems, like:
- sometimes printing the gallery owner next to the thumbs and sometimes below the thumbs
- columns don't have equal width (even with the suggested fixes: these do improve things to some extent but don't eliminate the problem completely)

I only wanted to point out some issues with these styles.

This depends of content, if you have wide thumbs (and thumb limiter not on) and if you have long words in title/description.


Is this thumb limiter an option I can set somewhere?

Yes, some line break logic was wrong, I have fixed this and will include it in next release.


OK, thanks. For the moment I commented out the printing of the gallery owner. Is it possible that this problem with the line break logic also causes thumbs to be sometimes printed next to each other and sometimes below each other? This is what happens. I will PM you some screen shots to illustrate this.

I try to help and fix the default style as much as I can, but I do not make custom styles on order.

Of course, I wouldn't ask for a custom style. Editing styles is not within my scope as a "simple" user. I don't have many exotic wishes and I'm content with default styles. My only wish was to point out some errors in the default styles, to allow you to make them better.

[Pekka]

i think what he is talking about is when the titles of the exhibitions take more lines than those beside them... the sample thumbs aren't lined up with those in the neighboring exhibits...

if i can get this right, the attached screenshot should show what i believe he is talking about... this is with the new horsort code with my fixes... note how the thumbs in the middle column are higher than in the two others...

Based on the lenght of exhibition title the header either wraps or does not wrap. This pushes thumbs down. One way to fix it is to assign fixed vertical height to header, but that would get problematic when header is longer than the space allowed.
Other way would be to split the header into chunks and print all them out, even if empty. This is not very elegant either.

[Pekka]

No, actually I tried both the default EE 2.0 style and the suggested one with horizontal sorting including the suggested fixes.

They both suffer from some problems, like:
- sometimes printing the gallery owner next to the thumbs and sometimes below the thumbs


See http://photography-on-the.net/forum/showthread.php?t=228824

- columns don't have equal width (even with the suggested fixes: these do improve things to some extent but don't eliminate the problem completely)

wkitty42 has fixes in http://photography-on-the.net/forum/showpost.php?p=2138871&postcount=14

I only wanted to point out some issues with these styles.

Yes, thanks. Sorry if I sounded grumpy.

Is this thumb limiter an option I can set somewhere?

I thought there was, but when I looked it was not there. :)
I just coded both indexpage exhibition and indexpage group thumb size limiters for next update.

[MikeCaine]

Anyone know how to apply the same layout format to the page if you're using groups for your galleries?

I've mangaed to fudge it using group order but it's a bit tedious, especially when adding more groups.

[MikeCaine]

Also, has anyone come up with a good method for ordering the galleries within each group. I had thought of using a numeric prefix to galleries in the gallery order page to keep all galleries within a group together, but the auto renumber stops that happening.

At the moment I'm having to order the galleries in the gallery order page in the order that want them to appear in each group. Was wondering if there's an easier way?

[mikeprince]

Sorry to bump a relatively old thread, but I just tried implementing the "horsort" style since I prefer this layout (most recent exhibitions appearing without the need to scroll down the page). However, whilst it works fine in Firefox, in IE6 the thumbnails for most of the exhibitions are missing.

See http://www.bubo.org/gallery/index.php.

The original layout works fine in both Firefox and IE.

Cheers
-- Mike --

[cferrero]

You're right: I just checked my website in IE and it suffers from exactly the same problem! e.g. http://www.cferrero.net/gallery/index.php?groupid=7&ee_lang=eng

[cferrero]

I think this is the relevant bug: http://www.photography-on-the.net/forum/showthread.php?t=241602

[mikeprince]

Shame there's no fix or workaround though!

I've just changed my config to only show 3 (instead of 5) microthumbs per gallery on the index page and IE6 is able to cope with this. (4 worked for some galleries but not all.)

Cheers
-- Mike --

[wkitty42]

mikeprince, did you also implement my fixes as noted above?? i've also found another bug that appears in an exhibit that only has three photos where a fourth empty link is placed in IE... the bug spoken above by cferrero may take case of that but i've not tested it that i recall...

[cferrero]

wkitty42: you're fixes seem to have solved this problem too. I thought I had incorporated them when you first posted, but obviously not!

[Tini72]

I would prefer to use default_XHTML_content_horsort.php but as I discovered it is not valid XHTML (default_XHTML_content.php is!).

I have no idea what to change to make it valid so I would appreciate if someone would post the XHTML valid version of default_XHTML_content_horsort.php.

Thanks a lot!

[wkitty42]

I would prefer to use default_XHTML_content_horsort.php but as I discovered it is not valid XHTML (default_XHTML_content.php is!).

I have no idea what to change to make it valid so I would appreciate if someone would post the XHTML valid version of default_XHTML_content_horsort.php.

Thanks a lot!
how did you determine that horsort is not valid XHTML? whatever you used should have listed the errors that needed to be corrected...

FWIW: i went thru this same type of thing when i was generating my own top menu bar... since i was using the w3c's validator, it told me everything that was wrong and i had to work to correct my code for compliance ;)

[Tini72]

how did you determine that horsort is not valid XHTML? whatever you used should have listed the errors that needed to be corrected...

FWIW: i went thru this same type of thing when i was generating my own top menu bar... since i was using the w3c's validator, it told me everything that was wrong and i had to work to correct my code for compliance ;)

If it was simple html I could do it, of course. But since it depends on the php code I really have problems adapting it by mself. I simply don't know how and what to modify at the php code to get a XHTML valid result.

[timned88]

could some please assist me in applying the horizontal rows/columns to the INDEX page and GROUP page? i have it working on the exhibition page but would like to apply this look sitewide.

work in progress site:
http://75.125.60.11/~themagi2/photos

[timned88]

could some please assist me in applying the horizontal rows/columns to the INDEX page and GROUP page? i have it working on the exhibition page but would like to apply this look sitewide.

work in progress site:
http://75.125.60.11/~themagi2/photos

[freewilly]

Hi,

I'm new to exhibit engine, and trying to apply 2-3 column exhibit display for index or group. Can somebody tell me where I can read more to understand how it works?

Any info will be appreciated.

Thanks,
Willy

[segal3]

It needs still fix in last TD close if the last row is not full - will see about that later.

I believe I've fixed the problem using the very useful $exhibitions_on_current_level as a conditional (see the additional if statement near the end).

<?php
// XHTML exhibition template with horizontally sorted columns (v 1.1 by Matt Segal carbonos.com 02/2009)
// v1.0 original code by Pekka Saarinen 10/2006
// parent table is in index page template

$s_exhibition_columns = "3";
$div = intval((100/$s_exhibition_columns));
if ($exhibition_counter == 0) {
ob_start();
@include("./" . $exhibition_embedded_layout);
$ee_embedded_css .= ob_get_contents();
ob_end_clean();
}

print "<td valign=\"top\" style=\"width={$div}%;\">";

?>
<div class="ee_exhibition_plate">

<div class="ee_exhibition_name">
<h3 class="ee_css_header_medium">
<?php print $exhibition_name_html; ?>
</h3>
</div>

<div class="ee_exhibition_paragraph">

<div class="ee_exhibition_image">
<?php print $exhibition_thumbs_html;
print "<br />"; ?>
</div>


<div class="ee_css_paragraph_bold"><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block">
<?php
if ($exhibition_owner_html != "") {
print $exhibition_owner_html;
}
print "<br class=\"clear\" />";
?>
</a></div>

<div class="ee_css_paragraph"><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block"><span class="ee_css_hyperlink">
<?php
//print "<br class=\"clear\" />";
print $exhibition_photocount_html;


if ($exhibition_countries_html != "") {
print "<br class=\"clear\" />";
print $exhibition_countries_html;
print "<br class=\"clear\" />";
}
?>
</span>
</a></div>




<div><p><a href="list.php?exhibition=<?php print $linked_exhibition; ?>&amp;ee_lang=<?php print $ee_lang; ?>" style="display: block" class="ee_css_paragraph">

<?php print $exhibition_description_html; ?>

</a></p></div>



</div>


</div>

<?php
$exhibition_counter2 = $exhibition_counter+1;
if ($exhibition_counter2 % $s_exhibition_columns == 0 && $exhibition_counter > 0) {
print "</td></tr><tr>";
} else {
if ($exhibition_counter2 < $exhibitions_on_current_level) {
print "</td>";
}
}
?>

Hope this helps those of you trying to validate for XHTML compliance!