the_content vs the_excerpt: Theme, obey my will!

(@bcworkz)

You could go ahead and use the_excerpt() along with code to display the image as well for only the first post. A function such as wp_get_attachment_image() could work for this. The example on that page lists all images, but could be adapted to just show the first image found.

Thread Starter

(@franz92)

Thank you very much for your answer!

However, I am a bit troubled – the code I posted doesn’t call an image. But one is displayed. Why?

Do you mean, I should just use the_excerpt() and put the function wp_get_attachment_image() above it?

Moderator

(@bcworkz)

I may have misunderstood what you wanted to achieve. I thought you wanted to use the_excerpt() as that did what you want except the image was stripped and you did not want that to happen. Thus my suggestion to use wp_get_attachment_image().

As for why there is an image without any evident code to display one, I’m not sure. It’s probably something the theme does. It may have hooked into ‘the_content’ filter and injected image HTML that way.

If your theme is doing clever things with images, I’m not sure how much help I can give you, especially since your version is heavily modified. Still, I will try to help. So far, I understand the remainder of the page is OK, you only want to change how the first post is displayed, correct?

How do you want this first post to appear? With image, without? Big, small? The text is to be a 20 word excerpt? Once I understand what you want to do, I may be able help at least a little.

Thread Starter

(@franz92)

Hi! Thank you very much for your help. Please let me know, if I can do anything for you.

Exactly. I just want to change how the first post is displayed. Everything should stay the same, except that the displayed excerpt should be reduced to 20 words. The image should stay as it is – currently it is the first image found in the post (not the featured image!).

Moderator

(@bcworkz)

Thank you, I think I understand now. What is the code used to generate the 20 word excerpt like the rest of the posts? the_excerpt()? I understand you did try using this but the large image disappeared, correct? Was the text at least what you wanted? If so, we just need to add some code for the first post that finds the first image for the first post and displays it just before the excerpt portion.

If this sounds like a viable approach, I just helped someone else with a similar issue, I will try to find the link for you. There is useful code in that thread, as well as discussion potential issues with finding the first image that may or may not apply to your site.

As it could take some time to dig up the thread, I will not try to find it unless you confirm this may be a useful approach. Thank you for your patience.

Thread Starter

(@franz92)

Hi!

To generate the 20-words-excerpts for the other posts I am using:

<div class="posts_bellow">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="post_dets">
<div class="post_author"><span>Geschrieben von:</span><span class="post_details"><?php the_author_posts_link(); ?></span></div><div class="post_time"><span>Geschrieben am:</span><span class="post_details"><a href="<?php echo get_day_link(get_the_time('Y'), get_the_time('m'), get_the_time('d')); ?>"><?php the_time('F j, Y') ?>
 </a></span></div>

<?php if (!empty($post->post_password)) { ?><?php }else { ?>
<?php if ( comments_open() ) : ?><div class="comments-counter"><?php comments_popup_link('0', '1', '%', '', ''); ?></div><?php ; else : ?><div class="comments-off">Die Kommentare<br />sind geschlossen.</div><?php endif; ?>
<?php } ?>
</div>
<a href="<?php the_permalink(); ?>" rel="bookmark">
       <?php the_post_thumbnail(); ?></a><div class="post_bellow_text"><?php the_excerpt(); ?>
<a class="read_more" href="<?php the_permalink() ?>">Lesen Sie mehr...</a>

</div>
<div class="post_category"><span>In der Kategorie:</span> <?php the_category(', ') ?><?php the_tags('<br /><span>Tags:</span>',' , ','<br />'); ?>    </div>
</div>

In functions.php I pasted:

function custom_excerpt_length( $length ) {
	return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

It is exactly as I said – It did to the text what I wanted, but the image disapparead.

I think this approach could be useful and working. Could you spare the time?

Moderator

(@bcworkz)

I don’t mind spending time as along as it serves a purpose. As it turns out in reviewing that thread, there’s a lot of unrelated dialog and very few nuggets of useful information. I’ll spare you the task of sifting through all that and summarize here, but this is the link if you’re bored.

Since all the text is working, you just need to add in that first image for the first post. Place something like the following code wherever you want the image to appear in the page flow, probably right after the title, and wrap any additional HTML that may be needed for CSS styling or whatever.

<?php $attachments = get_posts(array('post_type' => 'attachment','post_parent' => get_the_ID(), 'post_mime_type' => 'image/jpeg'));
$src = wp_get_attachment_image_src($attachments[0]->ID, 'medium');
echo "<img src=\"$src\">";?>

You may need to change the size parameter “medium” to something else, depending how your image defaults are set. You should also elaborate on the <img> tag, such as by providing some alt= text.

This displays the first image found attached to the post. This is not always the first image occurring in the post, it depends on what order the images were attached. It will also not find images in the post that were initially attached to a different post and reused for the current post. A different, less efficient, more fragile approach is required to always find the first image in the post.

Thread Starter

(@franz92)

Hi!
That’s nice to hear.

I now put it like that:

<div id="post_holder">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="post_dets">
<div class="post_author"><?php if(get_the_author_meta('userimg') != ""): ?>
<img class="Autorenbild" src="<?php the_author_meta( 'userimg' ); ?>" width="40" height="40" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no_user_img.jpg" alt="<?php the_title(); ?>" width="40" height="40" />
<?php endif; ?>
<span>Geschrieben von:</span><span class="post_details"><?php the_author_posts_link(); ?></span></div>
<div class="post_time"><span>Geschrieben am:</span><span class="post_details"><a href="<?php echo get_day_link(get_the_time('Y'), get_the_time('m'), get_the_time('d')); ?>"><?php the_time('F j, Y') ?>
 </a></span></div>

<?php if (!empty($post->post_password)) {?><?php }else { ?><?php if ( comments_open() ) : ?><div id="comments_option">Meinungen<br  /><a href="<?php the_permalink() ?>/#leave-comment">Kommentiere</a><div class="comments-counter"><?php comments_popup_link('0', '1', '%', '', ''); ?></div></div><?php ; else : ?><div id="comments_option">Die Kommentare sind geschlossen.</div><?php endif; ?><?php } ?></div>

<?php $attachments = get_posts(array('post_type' => 'attachment','post_parent' => get_the_ID(), 'post_mime_type' => 'image/jpeg'));
$src = wp_get_attachment_image_src($attachments[0]->ID, 'medium');
echo "<img src=\"$src\">";?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><?php the_excerpt('Lesen Sie mehr...'); ?>

It certainly fetches an image, but it is broken. It gives me this source code:

<div id="post_holder">
<h2><a href="http://see-online.info/fantastisches-seenachtsfest-feuerwerk-in-konstanz-hunderttausend-sahen-es-live/" rel="bookmark" title="Fantastisches Seenachtsfest-Feuerwerk in Konstanz: Hunderttausend sahen es live">Fantastisches Seenachtsfest-Feuerwerk in Konstanz: Hunderttausend sahen es live</a></h2>
<div class="post_dets">
<div class="post_author"><img class="Autorenbild" src="http://waltraudkaesser.alfahosting.org/wp-content/uploads/2012/11/wak_pr_seite-e1352281476111.jpg" width="40" height="40" />
<span>Geschrieben von:</span><span class="post_details"><a href="http://see-online.info/author/wak/" title="Beiträge von wak" rel="author">wak</a></span></div>
<div class="post_time"><span>Geschrieben am:</span><span class="post_details"><a href="http://see-online.info/2013/08/11/">August 11, 2013 </a></span></div>

<div id="comments_option">Meinungen<br  /><a href="http://see-online.info/fantastisches-seenachtsfest-feuerwerk-in-konstanz-hunderttausend-sahen-es-live//#leave-comment">Kommentiere</a><div class="comments-counter"><a href="http://see-online.info/fantastisches-seenachtsfest-feuerwerk-in-konstanz-hunderttausend-sahen-es-live/#comments" title="Kommentiere Fantastisches Seenachtsfest-Feuerwerk in Konstanz: Hunderttausend sahen es live">3</a></div></div></div>

<img src="Array">
<div id="post-94533" class="post-94533 post type-post status-publish format-standard hentry category-konstanz category-kreuzlingen"><p>Konstanz. Schätzungsweise 40.000 bis 50.000 Besucher haben das Seenachtsfest-Feuerwerk in Konstanz gesehen. In Kreuzlingen waren es ebenso viele. Das karibische…</p>

<div class="post_category"><span>In der Kategorie:</span> <a href="http://see-online.info/category/orte/konstanz/" title="Alle Beiträge in Konstanz ansehen" rel="category tag">Konstanz</a>, <a href="http://see-online.info/category/orte/kreuzlingen/" title="Alle Beiträge in Kreuzlingen ansehen" rel="category tag">Kreuzlingen</a>    </div>

</div>

The interesting part is here:
<img src="Array">
It tries to fetch an image, but does not succedd. I didn’t change the ‘medium’ yet, because the size shouldn’t give the code troubles, should it?

Moderator

(@bcworkz)

No, it’s my bad, my apologies. Replace the echo line with this:

echo "<img src=\"$src[0]\">";?>

That was a dumb mistake, I can make no excuse.

Thread Starter

(@franz92)

Yeah!

It works! I added an additional part of code to generate the “read more” link:

<div id="post_holder">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="post_dets">
<div class="post_author"><?php if(get_the_author_meta('userimg') != ""): ?>
<img class="Autorenbild" src="<?php the_author_meta( 'userimg' ); ?>" width="40" height="40" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no_user_img.jpg" alt="<?php the_title(); ?>" width="40" height="40" />
<?php endif; ?>
<span>Geschrieben von:</span><span class="post_details"><?php the_author_posts_link(); ?></span></div>
<div class="post_time"><span>Geschrieben am:</span><span class="post_details"><a href="<?php echo get_day_link(get_the_time('Y'), get_the_time('m'), get_the_time('d')); ?>"><?php the_time('F j, Y') ?>
 </a></span></div>

<?php if (!empty($post->post_password)) {?><?php }else { ?><?php if ( comments_open() ) : ?><div id="comments_option">Meinungen<br  /><a href="<?php the_permalink() ?>/#leave-comment">Kommentiere</a><div class="comments-counter"><?php comments_popup_link('0', '1', '%', '', ''); ?></div></div><?php ; else : ?><div id="comments_option">Die Kommentare sind geschlossen.</div><?php endif; ?><?php } ?></div>

<?php $attachments = get_posts(array('post_type' => 'attachment','post_parent' => get_the_ID(), 'post_mime_type' => 'image/jpeg'));
$src = wp_get_attachment_image_src($attachments[0]->ID, 'large');
echo "<img src=\"$src[0]\">";?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><?php the_excerpt(); ?>
<a class="read_more" href="<?php the_permalink() ?>">Lesen Sie mehr...</a>

<?php wp_link_pages( array( 'before' => '<p class="page-link">' . __( 'Pages:' ), 'after' => '</p>' ) ); ?>

<div class="post_category"><span>In der Kategorie:</span> <?php the_category(', ' ) ?><?php the_tags('<br /><span>Tags:</span>',' , ','<br />'); ?>    </div>

</div>

</div>

You can see everything working on

Could you do me some final favor and explain to me how I can get the image now to linking to the article?

And if you have flattr or paypal or give-me-coffee or anything – just leave a note!

Moderator

(@bcworkz)

Once again, replace the echo line with this, hopefully with no more dumb mistakes:

echo "<a href=\"" . the_permalink() ."\"><img src=\"$src[0]\"></a>";?>

Your offer is most kind, though completely unnecessary. I do appreciate the thought though. Actually, any kind of material compensation is forbidden in these forums, even a small gratuity. Helping others pleases me and is the only reward I seek.

Thread Starter

(@franz92)

10 years, 7 months ago

Hi!
I now used a very simple code, which works much more stable – but thank you for your help, without it I wouldn’t have been able to create it!

<div id="post_holder">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="post_dets">
<div class="post_author"><?php if(get_the_author_meta('userimg') != ""): ?>
<img class="Autorenbild" src="<?php the_author_meta( 'userimg' ); ?>" width="40" height="40" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no_user_img.jpg" alt="<?php the_title(); ?>" width="40" height="40" />
<?php endif; ?>
<span>Geschrieben von:</span><span class="post_details"><?php the_author_posts_link(); ?></span></div>
<div class="post_time"><span>Geschrieben am:</span><span class="post_details"><a href="<?php echo get_day_link(get_the_time('Y'), get_the_time('m'), get_the_time('d')); ?>"><?php the_time('F j, Y') ?>
 </a></span></div>

<?php if (!empty($post->post_password)) {?><?php }else { ?><?php if ( comments_open() ) : ?><div id="comments_option">Meinungen<br  /><a href="<?php the_permalink() ?>/#leave-comment">Kommentiere</a><div class="comments-counter"><?php comments_popup_link('0', '1', '%', '', ''); ?></div></div><?php ; else : ?><div id="comments_option">Die Kommentare sind geschlossen.</div><?php endif; ?><?php } ?></div>

<a href="<?php the_permalink(); ?>" rel="bookmark">
       <?php the_post_thumbnail('large'); ?></a>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><?php the_excerpt(); ?>
<a class="read_more" href="<?php the_permalink() ?>">Lesen Sie mehr...</a>

<?php wp_link_pages( array( 'before' => '<p class="page-link">' . __( 'Pages:' ), 'after' => '</p>' ) ); ?>

<div class="post_category"><span>In der Kategorie:</span> <?php the_category(', ' ) ?><?php the_tags('<br /><span>Tags:</span>',' , ','<br />'); ?>    </div>

</div>

</div>

Moderator