SoLoBlog

Für ein Projekt (URL folgt wenns fertig ist) habe ich eine Übersichtsseite gebraucht, die Posts mit Bildern wie eine Galerie aussehen lässt.
Bilderalbum/-verwaltung ohne Galerie PlugIn - sozusagen.

Die Site, wo ihr euch das in Aktion anschauen könnt, folgt sobald sie online geht.

Hier aber schon mal der Quellcode für ein seperates Template File:

<?php
/*
Template Name: Galerie Template
*/
?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php
//Anzeige der Posts wird beschränkt auf eine spezielle Kategorie - muss aber nicht
query_posts(’cat=2&orderby=title&order=asc’);

$count_main=1;
$count_inner=1;
$allover_post_counter = 0;

if (have_posts()) :

echo ‘<!– Galerie BOX [start] –>’ . "\n" . ‘<div id="galerie_box">’."\n";

while (have_posts()) : the_post();

/* JLo */
$allover_post_counter++;
if($count_main==1 && $count_inner==1)echo ‘ <div class="leftcol_main">’."\n";
if($count_main==2 && $count_inner==1)echo ‘ <div class="rightcol_main">’."\n";
if($count_inner==1)echo ‘ <div class="leftcol_inner">’;
if($count_inner==2)echo ‘ <div class="rightcol_inner">’;
?>

<div class="post" id="post-<?php the_ID(); ?>">
    <h2><a xhref="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry">
        <a xhref="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
            <?php the_content(’weiter…’); ?>
        </a>
    </div>
</div>

<?php
/* JLo */
echo "</div>\n";
if($count_inner==2)echo ‘ </div>’."\n";
if($count_main==2 && $count_inner==2){
  $count_main=0;
  echo ‘<div class="breakline"></div>’."\n";
}
if($count_inner==2){ $count_inner=0; $count_main++; }
$count_inner++;

endwhile;

//Bei ungrader Anzahl Posts, muss ein fehlender </div> angefügt werden
if (($allover_post_counter/2) != floor($allover_post_counter/2)) echo " </div>"."\n";

echo ‘</div>’.'<!– Galerie BOX [end] –>’."\n";

else : endif;
?>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Und natürlich das wichtigste; die CSS Definitionen:

#galerie_box { width:606px; }
#galerie_box .entry { font-size: 60%; }
#galerie_box .post,
#galerie_box .post h2 { margin: 0; }
#galerie_box a { color: #333; }

.leftcol_inner {
    width: 142px;
    float: left;
    border: 1px solid #ccc;
    margin: 1px; padding: 1px;
}

.rightcol_inner {
    width: 142px;
    float: right;
    border: 1px solid #ccc;
    margin: 1px;
    padding: 1px;
}

.leftcol_inner:hover,
.rightcol_inner:hover { border: 1px solid #06c; }

.leftcol_main {
    width: 300px;
    float: left;
    margin: 1px;
}

.rightcol_main {
    width: 300px;
    float: right;
    margin: 1px;
}

.breakline { float: none; clear: both; }