Ich habe mir ein Child-Theme zum Twenty Ten erstellt und dort die loop.php etwas abgeändert. Es betrifft die Stelle, wo die Darstellung der "normalen" Artikel (Nicht Gallery-Artikel) beschrieben wird.
Ich habe etwas Code gelöscht, den ich nicht brauche und ein Artikelbild hinzugefügt. Dazu habe ich den übrig gebliebene Text (titel, content, utility) in ein div "entry-articletext" und diesen Text zusammen mit dem Artikelbild in ein div "entry-article" gepackt.
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-article">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "entry-articleimage")); } ?>
<div class="entry-articletext">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<div class="entry-utility">
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- .entry-articletext -->
</div><!-- .entry-article -->
</div><!-- #post-## -->Wenn ich die Seite aufrufe, klappt das soweit gut. Allerdings wird das Artikelbild über dem Text dargestellt. das möchte ich geändert haben, so dass jeweils das Artikelbild genau gegegnüber dem zugehörigen Text erscheint, also der Artikel "zweispaltig" angezeigt wird.
Dazu habe ich das style,css meines Child-Themes wie folgt ergänzt:
#content .entry-article {
padding: 0px;
margin: 0 0 30px 0;
background-color:#CC4433;
}
#content .entry-articletext {
float:right;
width:500px;
background-color:#FF2233;
}
#content .entry-articleimage {
padding: 0px;
margin: 0px;
background-color:#BBFF33;
}Die Darstellung erfolgt nun wie von mir gewünscht links mit dem Artikelbild, rechts mit dem Text, allerdings "fliesst" der Text aus dem Artikel heraus und die Darstellung der Bilder auf gleicher Höhe wie der entsprechende Text stimmt nicht (s. Bild im Anhang)
Was muss ich ändern, damit auch bei einem längern Text als die Höhe des Artikelbildes das Bild des folgenden Artikels auf gleicher Höhe mit dem entsprechenden Text erscheint?
Danke für eure Hinweise!