Avatar richtig einbinden (Formatierung in postinfo)

SchwammMitKaese

Hallo Leute,

ich beschäftige mich jetzt schon länger mit dem WordPress Blog und es gibt eine Sache, an der ich bisher scheitere. Nämlich das Einbinden vom Avatar in einen Artikel. Wir würden gerne jedem Redakteur (3 an der Zahl) ein Avatar zuordnen und nutzen hierfür das "User Photo" Plugin. Das funktioniert auch alles super, nur dass wir nicht wissen wie wir das Avatarbild in den postinfo Container bekommen und es so formatieren, dass der Text rechts daneben ist und nicht danach anfängt. Derzeit ist es nämlich so, als wäre das Bild ein Textobjekt und der Textfluss ginge danach einfach weiter. :(

Zu finden ist der Blog unter http://www.schwamm-mit-kaese.de

Ich habe mal zwei Bilder angehängt um zu verdeutlichen was ich meine.
Wäre für jeden Tipp dankbar, da unsere PHP/HTML/CSS Kenntnisse an dieser Stelle wohl einfach nicht weitreichend genug sind.

Herzlichen Dank im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

wenn du das Bild mit

Code

float: left;

einbindest, wird der Text rechts daneben geschrieben

SchwammMitKaese

Danke, aber kannst du mir sagen welche Datei abgeändert werden muss?

Tutrix

wie fügst du den das Bild ein?
z.B.

Code

<img width="80" height="80" src="dein Avatar" style="float:left;">

wenn es eine css Definition gibt, dann einfach das

Code

float: left;

hinzufügen

SchwammMitKaese

Es ist nicht über das css, sondern über die .php Dateien selbst eingebunden. :(

die index.php sieht wie folgt aus:

PHP

<?php get_header(); ?>
	
<div id="content">


	<?php if (have_posts()) : ?>


		<?php while (have_posts()) : the_post(); ?>


			<div class="post" id="post-<?php the_ID(); ?>">
				<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>


				<?php the_content('Read the rest of this entry &raquo;'); ?>
				
				<div class="post-info">
				[COLOR="Red"]<?php if (function_exists('userphoto_the_author_thumbnail')) {  userphoto_the_author_thumbnail();}?>[/COLOR]
				von <?php the_author() ?>
				am <?php the_time('j. F Y') ?>
				um <?php the_time('H:i') ?>
				in der Kategorie <?php the_category(', '); ?>
				<?php the_tags('| tags: ', ', ', ''); ?>
				
				| <?php comments_popup_link('Keine Kommentare', '1 Kommentar', '% Kommentare'); ?>
				</div>
			</div>
			
			<?php comments_template(); ?>
		<?php endwhile; ?>


		<div id="pages">
			<a href="#"><?php next_posts_link('&larr;Older') ?></a>&nbsp;&nbsp;&nbsp;<a href="#"><?php previous_posts_link('Newer&rarr;') ?></a>
		</div>


	<?php else : ?>


		<h1>Not Found</h1>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>


	<?php endif; ?>
	
</div>
		
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Alles anzeigen

single.php:

PHP

<?php get_header(); ?>


<div id="content">


	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


		<div class="post" id="post-<?php the_ID(); ?>">
			<h1><?php the_title(); ?></h1>




			<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>


			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			




			<div class="post-info">
				[COLOR="Red"]<?php if (function_exists('userphoto_the_author_thumbnail')) {  userphoto_the_author_thumbnail();}?>[/COLOR]
				von <?php the_author() ?>
				am <?php the_time('j. F Y') ?>
				um <?php the_time('H:i') ?>
				in der Kategorie <?php the_category(', '); ?>
				<?php the_tags('| tags: ', ', ', ''); ?>
				<?php edit_post_link('[Edit this entry]','',''); ?>
			</div>
		</div>


		<?php comments_template(); ?>


	<?php endwhile; else: ?>


		<p>Sorry, no posts matched your criteria.</p>


	<?php endif; ?>


</div>


<?php get_sidebar(); ?>
<?php get_footer(); ?>

Alles anzeigen

comments.php:

PHP

<?php // Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');


	if (!empty($post->post_password)) { // if there's a password
		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
			?>


			<p class="nocomments">This post is password protected. Enter the password to view comments.</p>


			<?php
			return;
		}
	}
?>


<?php if ($comments) : ?>


	<h1 class="comments-title"><?php comments_number('Comments (0)', 'Comments (1)', 'Comments (%)' );?></h1>


	<div id="comments">


		<?php foreach ($comments as $comment) : ?>
			<div class="comment" id="comment-<?php comment_ID() ?>">
			
				
				[COLOR="Red"][B]<div class="comment-avatar">
					<?php echo get_avatar( $comment, 100 ); ?>[/B][/COLOR]
				</div>


				<div class="comment-content">
					<div class="comment-info"><span><?php comment_author_link() ?></span><?php comment_date('F jS, Y') ?> at <?php comment_time() ?> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></div>
					
					<?php if ($comment->comment_approved == '0') : ?>
						<em>Your comment is awaiting moderation.</em>
					<?php endif; ?>


					<?php comment_text() ?>
				</div>
			</div>
		<?php endforeach; ?>


	</div>


<?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
	<?php else : // comments are closed ?>
		<!-- If comments are closed. -->
	<?php endif; ?>
	
<?php endif; ?>






<?php if ('open' == $post->comment_status) : ?>


	<h1 class="comments-title">Leave a comment</h1>


	<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
		<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
	<?php else : ?>
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
			Your comment
			<p><textarea name="comment" id="comment"></textarea></p>
			
			<?php if ( $user_ID ) : ?>
				<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>&nbsp;&nbsp;&nbsp;<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out</a></p>
			<?php else : ?>			
				<p><input type="text" name="author" id="author" class="text" value="<?php echo $comment_author; ?>" />
				<label for="author">Name <?php if ($req) echo "(required)"; ?></label></p>


				<p><input type="text" name="email" id="email" class="text" value="<?php echo $comment_author_email; ?>" />
				<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label></p>


				<p><input type="text" name="url" id="url" class="text" value="<?php echo $comment_author_url; ?>" />
				<label for="url">Website</label></p>
			<?php endif; ?>
			
			<?php do_action('comment_form', $post->ID); ?>
			
			<p><input name="submit" type="submit" id="submit" value="Submit Comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
			
			


		</form>


<?php endif; // If registration required and not logged in ?>


<?php endif; // if you delete this the sky will fall on your head ?>

Alles anzeigen

In der comments.php wird der get_avatar Befehl ausgeführt, das Plugin ersetzt diesen Befehl quasi. In der Kommentaransicht sieht es gut aus mit dem Avatar.

LG

Tutrix

in der style.css gibt es

Code

#content .post .post-info {
background:none repeat scroll 0 0 #C9D6CC;
border-bottom:1px solid #AAAAAA;
border-top:1px solid #AAAAAA;
clear:both;
color:#777777;
font-size:11px;
margin-bottom:20px;
padding:3px 5px 5px;
}

füge es da mal dazu

oder mal dies in die style.css dazu fügen

Code

#content .post .post-info img {
float:left;
}

SchwammMitKaese

soeben probiert, ändert nichts. Hier mal die style.css:

Code

*/


/* Reset
-------------------------------------------------------------------*/
* { padding: 0; margin: 0; }
ul li, ol li { list-style: none; list-style-position: inside; }
ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; }
img { border: none; }






/* Body
-------------------------------------------------------------------*/
body { 
	font: 12px/18px Verdana, Helvetica, Arial, Geneva, sans-serif; 
	color: #333; 
	background: #656464 url(images/bg.gif) repeat-x;
}


h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Helvetica, Arial, Geneva, Sans-Serif; color: #414d4c; }
h1 { font-size: 22px; line-height: 26px; margin-bottom: 10px; }
h2 { font-size: 20px; line-height: 24px; margin-bottom: 7px; }
h3 { font-size: 18px; line-height: 22px; margin-bottom: 5px; }
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; }
h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; }


h1 span { color: #999; }


a { color: #3b5a4a; }
a:hover { color: #3b5a4a; }
a:visited { color: #3b5a4a; }


p { margin-bottom: 10px; }


input, textarea { font: 12px Verdana, Helvetica, Arial, Geneva, sans-serif; }


blockquote { 
	font: italic 14px/22px Georgia, Serif; 
	padding: 5px 10px;
	margin-bottom: 20px;
	background: #e4ede2; 
}






/* Container
-------------------------------------------------------------------*/
#container { 
	width: 900px; 
	padding-bottom: 10px; 
	margin: 0 auto; 
	overflow: hidden; 
}
#container #wrapper { 
	width: 900px; 
	float: left; 
	overflow: hidden; 
	background: #d6ded4 url(images/sidebar-bg.gif) repeat-y top right; 
}






/* Header
-------------------------------------------------------------------*/
#header { 
	width: 900px; 
	height: 138px; 
	float: left; 
	background: url(images/header-bg.jpg) no-repeat center; 
	position: relative; 
}
#header h1 { 
	font: 24px Verdana; 
	padding-top: 10px; 
	margin-bottom: 0; 
	color: #fff; 
}
#header h1 a { 
	color: #fff; 
	text-shadow: 1px 1px 1px #333; 
	text-decoration: none; 
}
#header h1 span { 
	padding-left: 10px; 
	font-size: 11px; 
	color: #473347; 
}






/* Search
-------------------------------------------------------------------*/
#search {
	position: absolute;
	top: 15px; 
	right: 0px;
}


#search input { border: 0; }


#search #s { 
	width: 148px;
	padding: 4px 0 4px 22px;
	margin-right: -4px;
	vertical-align: top;
	line-height: 0;
	font: normal 12px Verdana;
	vertical-align: top;
	color: #333;
	background: url(images/search-text.gif) no-repeat;
}
#search #searchsubmit { 
	width: 35px; 
	height: 22px;
	vertical-align: top;
	background: url(images/search-submit.gif) no-repeat;
}








/* Navigation
-------------------------------------------------------------------*/
#nav { 
	width: 900px; 
	height: 42px; 
	float: left; 
	background: url(images/nav-bg.gif) no-repeat; 
	border-bottom: 1px solid #75867b; 
	position: relative; 
}
#nav ul { 
	margin-left: 10px; 
	position: absolute; 
	bottom: -1px; 
	overflow: hidden; 
	height: 33px; 
}
#nav ul li { 
	float: left; 
	margin-right: 3px; 
	padding-left: 7px; 
}
#nav ul li.current_page_item { background: url(images/nav-tab-left.gif) no-repeat; }
#nav ul li a { 
	display: block; 
	text-decoration: none; 
	color: #333; 
	line-height: 33px; 
	padding: 0 15px 0 8px; 
}
#nav ul li a:hover { color: #555; }
#nav ul li.current_page_item a { background: url(images/nav-tab-right.gif) no-repeat top right; }
#nav #feed { 
	position: absolute; 
	right: 15px; 
	top: 12px; 
	height: 19px; 
	padding-left: 37px; 
	color: #544626; 
	display: block; 
	background: url(images/feed.gif) no-repeat; 
	text-decoration: none; 
}






/* Content
-------------------------------------------------------------------*/
#content { 
	width: 635px; 
	float: left; 
	padding: 15px; 
	background: #d6ded4; 
}


#content .post { margin-bottom: 40px; }
#content .post p { margin-bottom: 20px; }
#content .post h1 a { text-decoration: none; }
#content .post-list li { list-style: none; }


#content .post .post-info { 
	clear: both; 
	font-size: 11px; 
	float: left;
	color: #777; 
	padding: 3px 5px 5px 5px; 
	margin-bottom: 20px; 
	border-top: 1px solid #aaa; 
	border-bottom: 1px solid #aaa; 
	background: #c9d6cc; 
}
#content .post .post-info a { color: #333; text-decoration:none; }
#content .post .post-info a:hover { color: #555; text-decoration:none; }


#content #pages { text-align: center; }
#content #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; }
#content #pages a:hover { color: #1e2726; }


#content ul, ol, dl { margin-bottom: 20px; }
#content ul { 
	list-style: disc;
	list-style-position: inside; 
}
#content ol { 
	list-style: decimal; 
	list-style-position: inside; 
}
#content dl dt { 
	font-weight: bold;
}
#content dl dd { 
	font-style: italic;
	margin: 0 0 5px 20px;
	color: #555;
}


.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 5px 15px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 15px; }






/* Sidebar
-------------------------------------------------------------------*/
#sidebar { 
	width: 235px;
	float: left;
	font-size: 11px; 
	margin-bottom: 10px;
	color: #555;
}


#sidebar h3 { font: normal 18px Verdana, Arial, Sans-Serif; color: #222; }


#sidebar a { color: #38463e; text-decoration: none; }
#sidebar a:hover { color: #38463e; }


#sidebar .block {
	width: 205px;
	padding: 15px; 
	border-bottom: 1px solid #bfccbf; 
	overflow: hidden;
	color: #555;
}
#sidebar .block li { 
	background: url(images/arrow.gif) no-repeat 2px 8px; 
	padding-left: 12px;
}
#sidebar .block a:hover { color: #777; }


/* Calendar */
#sidebar .block #calendar_wrap a { }
#sidebar .block #calendar_wrap .pad { background: none; }
#sidebar .block #calendar_wrap #prev { background: none; }
#sidebar .block #calendar_wrap #next { background: none; }
#sidebar .block #calendar_wrap table { width: 100%; margin: 0;padding: 0;}
#sidebar .block #calendar_wrap table th { width: 14.2%; }
#sidebar .block #calendar_wrap table td { width: 14.2%; background: #d6ded4; text-align: center; color: #888; }






/* Wrapper Bottom
-------------------------------------------------------------------*/
#wrapper-bottom { 
	width: 900px; 
	height: 6px; 
	float: left; 
	margin-bottom: 7px; 
	background: url(images/wrapper-bottom.gif) no-repeat bottom;
}






/* Comments
-------------------------------------------------------------------*/
.comments-title { 
	text-align: center; 
	font: bold 22px "Trebuchet MS", Helvetica, Arial, Geneva; 
	color: #414d4c; 
}
#comments .comment { 
	background: #bfcec3; 
	margin-bottom: 10px; 
	overflow: hidden; 
	width: 635px; 
	padding-bottom: 5px; 
}
#comments .comment .comment-avatar { 
	float: left; 
	width: 100px; 
	padding: 5px 7px; 
}


#comments .comment .comment-content { 
	float: left; 
	padding: 10px 15px; 
	margin: 5px 5px 0 0; 
	width: 486px; 
	background: #d6ded4; 
}
#comments .comment .comment-content a { color: #444; }




#comments .comment .comment-info { 
	font-size: 11px;
	color: #777;
	margin-bottom: 5px; 
}
#comments .comment .comment-info span {
	font: bold 20px "Trebuchet MS", Helvetica, Arial, Geneva;  	
	padding-right: 10px; 
	margin-bottom: 5px;
}
#comments .comment .comment-info a { 
	color: #444; 
	text-decoration: none;
}








/* Comment Form
-------------------------------------------------------------------*/
#commentform { 
	background: #d6ded4; 
	border: 5px solid #bfcec3; 
	padding: 10px; 
	color: #555; 
}
#commentform p { margin-bottom: 7px; }
#commentform textarea { 
	width: 600px; 
	border: 1px solid #aaa; 
	height: 120px;
}
#commentform input.text { 
	width: 150px; 
	border: 1px solid #aaa; 
	margin-right: 5px; 
	padding: 3px 3px; 
}
#commentform input#submit { padding: 3px 10px; }






/* Footer
-------------------------------------------------------------------*/
#footer { 
	width: 900px; 
	float: left; 
	color: #473347; 
	padding-top: 15px;
	text-align: center;
	background: url(images/footer-top.gif) no-repeat top left; 
}
#footer-inner { 
	width: 900px; 
	padding-bottom: 15px; 
	background: url(images/footer-bottom.gif) no-repeat bottom left; 
}
#footer-content { 
	width: 900px; 
	background: #aec71c; 
}
#footer p { 
	font-size: 11px; 
	margin: 0; 
}
#footer a { color: #473347; }

Alles anzeigen

Vielen Dank für deine Unterstützung! :)

Tutrix

hast du beide Varianten getestet? (hab oben editiert)

SchwammMitKaese

WAHNSINN!! :) Die zweite Variante hat's gebracht! Perfekt, vielen Dank!
Wie kann ich jetzt zwischen Text und Bild noch einen kleinen Abstand einfügen?

Tutrix

Code

padding:3px;

noch dazu fügen, macht in alle Richtungen 3px Abstand

kannst natürlich auch mehr oder weniger machen

oder nur in eine Richtung

siehe Innenabstände

SchwammMitKaese

Danke, ich habe jetzt jedoch das Problem, dass es mir wenn ich mit meinem Handy drauf surfe (Milestone mit Android 2.1) das Ganze verschiebt. Also Titel des nächsten Artikels ist plötzlich neben dem Ende (postinfo) des letzten Artikels etc. Dies geschieht nur, wenn ich beide Ergänzungen von dir einsetze. Füge ich nur das erste ein, so passiert nichts. Füge ich nur das zweite an, so scheint es wieder zu stimmen, jedoch passt dann der postinfo Bereich in der Höhe nicht mehr. Ich mache mal Screens davon, mom.

Im Anhang kann man sehen wie es aussieht, wenn ich das float: left; aus dem ersten Teil rausnehme und den zweiten Teil (deine Ergänzung) einsetze. So jedoch verschiebt sich bei mir auf dem Handy nichts. Wäre es möglich diese Variante beizubehalten, jedoch die Höhe der postinfo fix ans Bild anzupassen, zb. durch min-height oder bringt das nur probleme?

Tutrix

mach mal in den postinfo Bereich statt float

Code

height:100px;

SchwammMitKaese

Ok, dann war mein Gedanke schonmal richtig. min-height dürfte auch gehen, falls mal mehr tags hinzukommen sollten und dadurch die 100px überschritten werden. Oder?

Setze jetzt mal noch das padding ein.

Tutrix

ja kannst auch min-height verwenden und padding-right (wenn nur zu Text Abstand sein soll)

SchwammMitKaese

Jap, hab ich alles soweit. Wenn ich daran denke, dass wir versucht haben neue container/tables zu erstellen und was weiß ich nicht alles, weil es eben mit dem einfachen float und align etc nicht klappte. ;)

Wenn ich jetzt noch in der postinfo Umbrüche einbauen möchte, beispielsweise:

statt

von Autor am 21. Juni 2010 um 14:06 in der Kategorie XYZ | tags: Hayward, Ölkatarst, Yacht | Keine Kommentare

mit Umbrüchen

von Autor am 21. Juni 2010 um 14:06 in der Kategorie XYZ
tags: Hayward, Ölkatarst, Yacht
Keine Kommentare

Was setze ich da wo ein?

BTW: Schade, dass es keine "Bedanken-Funktion" gibt. Nichts desto trotz: You made my day! :)

Tutrix

das müsste in der index.php dann mit <br/> gehen

also da einfügen wo der Umbruch sein soll

SchwammMitKaese

Jap, habe es schon drin, funktioniert. Danke auch hierfür.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Avatar richtig einbinden (Formatierung in postinfo)

Jetzt mitmachen!