Grow your CSS skills. Land your dream job.

How to achieve two different excerpt layouts on one WordPress site?

  • # June 2, 2013 at 5:19 pm

    Hi all

    Working on a client site that displays a blog excerpt on the blog page (which shows 5 posts per page) and the main home page (which shows the latest 3 blog posts).

    The trouble is I want different layouts for the excerpt. The client will always have an image/video in each post, so would like to grab this and display on the excerpt.

    [Here is an image](http://dl.dropboxusercontent.com/u/94593656/excerpts.jpg “Here is an image”) of the two layouts I am trying to achieve…

    The right layout for the blog page is fairly simple. I bring the image/video content into the excerpt by using the Advanced Excerpt plugin, however I am not sure how to achieve the left layout for the home page. Notice how the image/video and text is separated, so I cannot just call the_excerpt.

    Is there a way to bring the image/video and text in separately? What would be the best way to do this?

    To give you an idea, this is what I currently have for the markup for the home layout but the image is not yet dynamic, and the excerpt text is not there yet…

    < ?php $my_query = new WP_Query('showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post(); ?>

    < ?php endwhile; ?>

    Any help would be greatly appreciated

    # June 2, 2013 at 7:07 pm

    That’s a bad link to the image. Mind reuploading?

    Update:

    You need to create a separate template file for the homepage (home.php).

    # June 2, 2013 at 8:06 pm

    That’s strange, it works for me, but here is a link hosted somewhere else.. http://imageshack.us/photo/my-images/21/excerpts.jpg/

    > You need to create a separate template file for the homepage (home.php).

    Yes I have done this.

    # June 2, 2013 at 9:23 pm

    Initially it did not work on my iPhone but I refreshed and it rendered.

    Do you really need a plugin to grab the excerpt and include an image or video?

    This is what I hate about WordPress. WordPress makes it incredibly difficult to grab data and you always have to struggle to find a solution to display that data. It’s ridiculous.

    Anyway, I don’t see why you couldn’t grab the image or video from the latest post. The title and excerpt should be fairly simple.

    # June 2, 2013 at 9:32 pm

    See this video by Chris, it might help http://www.youtube.com/watch?v=Q_tAyUrfKsk

    I would personally use custom field for this. Then in the home section, I would use a filter to only display certain amount of text from the excerpt. You would also need to create two separate templates files home.php and blog.php (whatever the template is for blog posts).

    Hope that helps,

    -Alen

    # June 3, 2013 at 5:23 am

    @chrisburton the Advanced Excerpt plugin allows you to bring in all HTML content into the excerpt, as opposed to just text. This works perfectly for what I want on the blog page.

    I agree though would love things like this to be a default feature of WordPress

    > Anyway, I don’t see why you couldn’t grab the image or video from the latest post.

    Yes, but how?

    @AlenAbdula yes this may be a good option actually. I will try this out. It will just mean the user will have to seperate the main image/video from the flow of the post, which shouldn’t be a problem. It can just go into a seperate field.

    UPDATE

    I have just found with the plugin I am using you can use the_advanced_excerpt which allows you to create custom excerpts whenever you need, which is IDEAL, so if you just want the image, only allow the IMG tag in your excerpt.

    Problem with this… WordpPress wraps all images with P tags!!!!

    I have tried this solution but it doesn’t seem to work in my particular case…

    http://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/

    # June 3, 2013 at 1:17 pm

    > Problem with this… WordpPress wraps all images with P tags!!!!

    Yeah, this is my absolute #1 pet peeve with WP. And it seems to have gotten WAY worse with 3.5.

    I’m not quite understanding why you wouldn’t just use the featured image that’s built in and then just display that featured image along with the h1 and paragraph with the “read more” link the way you want from the two examples in your image.

    You wouldn’t be able to make the video play from the featured image feature (unless you modified it), but wouldn’t you want to have the user click on the article before they can play the video anyway?

    # June 3, 2013 at 1:34 pm

    You can remove the p tags in functions.php

    # June 3, 2013 at 1:57 pm

    Yeah, I have that on my custom theme, but it’s kind of ridiculous you have to do something to change it. I can’t think of a logical reason to even have them within p tags.

    # June 3, 2013 at 2:23 pm

    Probably to give images space between text.

    # June 3, 2013 at 3:02 pm

    > You can remove the p tags in functions.php

    Yes I already have this, it works half of the time, and in this particular case, it doesn’t, very annoying!

    @JoshWhite yes I thought about featured image but not sure how it would handle video. I don’t mind it not playing straight away, but would at least like to display the thumbnail, without much hassle of the client actually getting this thumbnail themselves from YouTube or whatever.

    I have found a very good solution here for grabbing the image which requires no additional fields for the client in the admin and would work with existing posts… http://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

    Just need to work out now how it can grab video then I’ll have this solved!

    # June 3, 2013 at 3:05 pm

    > Problem with this… WordpPress wraps all images with P tags!!!!

    add_filter(‘the_content’, ‘filter_ptags_on_images’);

    function filter_ptags_on_images($content){
    return preg_replace(‘/

    (s*)()(s*)

    /iU’, ’2′, $content);
    }

    That should do it.

    > and in this particular case, it doesn’t

    This is most likely because you are using excerpts plugin.

    # June 3, 2013 at 3:21 pm

    Yes that is the code I have, and yes you could be write about the plugin causing the p’s.

    I was just thinking to scrap the advanced excerpt plugin, and just use custom fields, but cannot as this is a redesign, and the client has around a 1000 previous posts. So all archived posts would just have text excerpts which is not an option, and would be too time consuming to go into each post and add a featured image.

    Because of this, I am going to go ahead with my previous idea http://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

    # June 4, 2013 at 1:44 am

    I read something tonight that I thought might be applicable to this discussion and I’m curious how we might solve this.

    [Link from Stack Overflow](http://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api “See this link here”)

    So, basically the bottom line is – this image: http://img.youtube.com/vi/KOSy1RLxUt4/0.jpg is right from this video:

    http://www.youtube.com/watch?v=KOSy1RLxUt4

    Perhaps you could make a solution as simple as adding one more meta box that could show up right under the featured image that asked for the youtube video ID. If the user input that, it would pull up the image instead of the featured image.

    # June 4, 2013 at 4:49 am

    Hey @JoshWhite

    Interesting you mention that. Just last night I decided to use a plugin called ‘[Video Thumbnails](http://wordpress.org/plugins/video-thumbnails/ “Video Thumbnails”)’ which does exactly as you mention. It searches your existing posts, grabs the thumbnail (if any) then you call that thumbnail with a bit of code.

    I have a done an if/else statement along with the previous ‘get first image’ function, and this seems to work fine. This seems to be the best solution for me so far.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".