Display posts in list

[sharmstr]

Topic for displaying posts in a list. Previous comments and requirements taken from Feature Request topic.

@elv
I don’t know if it has been asked before, but I would really like a nice clean “list view” blog format.
I have fudged my own version manually here – http://flashhavoc.com/
But it would be much nicer if the text could be placed to the right of the thumbnail, so its all a little neater and more compact.
Also ideally, we need options to switch on and off the various meta data. I’ve deleted the post tags there just to clean up the meta display on the left.

@sharmstr

@elv That looks pretty good. It has some issues on smaller displays, but overall I really like it. I have on my todo list to code a post list for a custom post type on my site. I like the idea of the text being inline with the picture. I’ll work on it today and share my results with you. Also, I’ve customized the kleo meta function that will format the meta differently based on post type. It should be easy enough to add support for choosing which meta to display as well. I’ll share that later as well.

@elv
Thanks sharmstr.
If you have any solutions for the smaller display that would be great as well.
I guess another thing that is needed is an option to set the excerpt text length. I had to manually set excerpts as well to try and reduce the text. It becomes a real problem with the text wrapping on smaller displays.
Thanks again.

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Got it. Its going to take a bit of time because I’m using the WP Views plugin to add ajax filtering (searching) of the posts. But part of doing that is designing the view (results), which is the part that I can give you. In my solution, I’ll be giving the user the option to display in masonry grid or a list. Anyhow, be back with something when I’m done.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[adasin]

Many thanks to sharmstr and elv for spearheading the effort. Not sure if there has been a conclussion to this topic – would be interested in knowing more.

On a related note would appreciate any pointers on whether it is possible to present the user with the ability to switch between different views, e.g. masonry | list with excerpt | list with titles only. This is not just an arbitrary feature request by me but something that is finding widespread attention (various readability projects) and in line with efforts in web accessibilbilty. Much appreciate a feedback.

[sharmstr]

I’m working on it. Just got side tracked yesterday with work.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

The following is not supported by 7th Queen. This is how I have done it and it works on my site. If you want to customize it to suit your site, you will have to do that on your own. I wont be providing any support for this.

By default, posts will display in a masonry grid as set in Theme Options – blog. In my functions.php file, I’m adding icons to switch the view. Options are Grid, Simple and List. Grid = Masonry, Simple = posts in a list with meta and images, List = Titles (with links) only. Clicking on any of the icons will set a cookie so the users choice is remembered, then reloads the page. I thought about adding ajax support instead of reloading the page, but its a one time deal so not worth the coding effort. If list or simple are selected, a customized copy of content-image.php is loaded. Here’s all the parts

1 – Copy the jQuery code in the “Add this to javaScript code” file attached to the JavsScript box in Theme Options – General Settings.

2 – Copy the code in the “Add this to functions” file attached to your child theme functions.php file.

3 – Copy post-content-simple.txt to /kleo-child/page-parts/post-content-simple.php. Remember to change the extention from .txt to .php.

4 – Copy index.txt to /kleo-child/index.php and /kleo-child/archive.php. Remember to change the extention from .txt to .php.

5 – Copy archive.txt to /kleo-child/archive.php. Remember to change the extention from .txt to .php.

6 – Copy the css in “Add this to child css.txt” to your child theme style.css file.

Note: The list view is not formatted because I’m not going to use it on my site. You can add any format or additional information you want. Its located on line 19 of post-content-simple.php.

To control the length of the excerpt, you can change the value of kleo_excerpt in post-content-simple.php (line 55)

To control what meta information is display https://archived.seventhqueen.com/forums/topic/remove-tags-from-post-in-masonry-grid-view or do a search for kleo_entry_meta

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[sharmstr]

Slight correction in archive.txt and index.txt: Move add_switcher() above if ($blog_type == ‘masonry’), after have_posts.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

awesome @sharmstr
I will do some digging and try to include it in the theme as an option.

Thank you as always 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[adasin]

shamstr, this is just amazing! You are a gentlelady and a scholar nonetheless! Thank you so much.

n.b. hope very much this would be included in the theme by the Kleo team in the near future.

[Elv]

Thanks for working on this sharmstr. Would you have a link or screenshot of the list view blog?

Also has this been included in Kleo version 2.2 by any chance? Thanks.

[Abe]

Hey guys and gals. Thanks to beloved @sharmstr we extended this functionality and it is available in 2.2.
Enable it from Theme options – Blog or when you add the Posts Grid shortcode.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[sharmstr]

What? I’ve been out working on my motorcycle all afternoon. Look at everything I’ve missed! Can’t wait to have a look.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

muhaha 🙂

PS:
send me some pictures with your ride. really curious on how it looks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[sharmstr]

Once again you’ve taken one of my half-assed hacks and made it beautiful. Thank you!

I will say that it doesnt solve the simple listing of just post titles though which is something I wont use, but others will.

I was working on putting in a new front suspension in the black bike (harley) yesterday. But most of my no-Kleo time is spent restoring a 1968 bsa. I’m starting to put it back together now.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[sharmstr]

@abe: Small issue with featured carosel and small listing enabled. There’s no padding between the carousel items. Here’s the offending csss

COPY CODE

.small-listing .post-item {
padding: 20px 0;
}

With masonry enabled, it puts 10px padding on left and right. With small listing, it sets it to 0.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

wow that is very cool you can do that 🙂

The fix until next update, add this CSS

COPY CODE

.small-listing .featured-content .post-item {
    padding: 20px 10px;
}

the simple listing seemed too basic but now a new listing can be added really easy by adding a new entry in the array
$kleo_config[‘blog_layouts’] = array(
‘masonry’ => ‘Grid Masonry’,
‘small’ => ‘Small Left Thumbnail’,
‘standard’ => ‘Standard’
);

and just add another template in page-parts/post-content-xxx.php

they should be automatically populated in admin and any other place

Thank you

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[sharmstr]

You are a wizard!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts