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

[croydon86]

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](https://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…

while ($my_query->have_posts()) : $my_query->the_post(); ?>

“>

” class=”viewp”>View post →

Any help would be greatly appreciated

[chrisburton]

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

Update:

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

[croydon86]

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.

[chrisburton]

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.

[Alen]

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

[croydon86]

@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…

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

[chrisburton]

You can remove the p tags in functions.php

[chrisburton]

Probably to give images space between text.

[croydon86]

> 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… https://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!

[Alen]

> 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.

[croydon86]

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 https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

[croydon86]

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.

[Author]

Posts