Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improve the Recent Posts section

- The columns are larger
- The thumbnails are larger - see 779f2e1
- Non-standard post format are excluded (may be reverted)
- The markup has been changed to match the other parts of the theme
- The main selector is .recent-posts instead of #recent-posts
- The CSS has been simplified
- The responsive CSS will be added later
  • Loading branch information...
commit 2a484a08fc7fd7863de392d6892ea41f7e83af06 1 parent 779f2e1
@jayj authored
View
2  less/slider.less
@@ -37,7 +37,7 @@
}
}
-// /* Control navigation */
+/* Control navigation */
.flex-control-nav {
list-style: none;
margin: 20px auto 0 -60px;
View
174 section-recentposts.php
@@ -7,96 +7,96 @@
* @package Cakifo
* @subpackage Template
*/
-?>
-<?php do_atomic( 'before_recent_posts' ); // cakifo_before_recent_posts ?>
+do_atomic( 'before_recent_posts' ); // cakifo_before_recent_posts ?>
+
+<section class="recent-posts clearfix">
+
+ <?php do_atomic( 'open_recent_posts' ); // cakifo_open_recent_posts ?>
+
+ <?php
+ /* Get the link to the Posts (blog) page */
+ $posts_page = ( 'page' == get_option( 'show_on_front' ) && get_option( 'page_for_posts' ) ) ? get_permalink( get_option( 'page_for_posts' ) ) : home_url( '/' );
+ ?>
+
+ <h1 class="section-title">
+ <a href="<?php echo esc_url( $posts_page ); ?>" title="<?php esc_attr_e( 'See more posts', 'cakifo' ); ?>"><?php _e( 'Recent Posts', 'cakifo' ); ?></a>
+ </h1>
+
+ <?php
+ // Create the Recent Posts query
+ $recent_args = array(
+ 'showposts' => 4, // Show 4 posts
+ 'ignore_sticky_posts' => 1,
+ 'post_status' => 'publish',
+ 'no_found_rows' => true,
+ 'tax_query' => array(
+ array(
+ // Only show posts with the standard post format
+ 'taxonomy' => 'post_format',
+ 'field' => 'slug',
+ 'terms' => array(
+ 'post-format-aside',
+ 'post-format-audio',
+ 'post-format-chat',
+ 'post-format-link',
+ 'post-format-quote',
+ 'post-format-status',
+ 'post-format-video'
+ ),
+ 'operator' => 'NOT IN'
+ )
+ ),
+ );
+
+ // Fire the Recent Posts query
+ $recent = new WP_Query( $recent_args );
+
+ while ( $recent->have_posts() ) : $recent->the_post();
- <section id="recent-posts" class="clearfix">
-
- <?php do_atomic( 'open_recent_posts' ); // cakifo_open_recent_posts ?>
-
- <?php
/**
- * Get the link to the Posts (blog) page
- * @var string
+ * Put the post ID in an array to make sure it's only showing once
+ * on the page as this array is used in the headline lists as well.
*/
- $posts_page = ( 'page' == get_option( 'show_on_front' ) && get_option( 'page_for_posts' ) ) ? get_permalink( get_option( 'page_for_posts' ) ) : home_url( '/' );
- ?>
-
- <h1 class="section-title"><a href="<?php echo esc_url( $posts_page ); ?>" title="<?php esc_attr_e( 'See more posts', 'cakifo' ); ?>"><?php _e( 'Recent Posts', 'cakifo' ); ?></a></h1>
-
- <?php
- // Display the Recent Posts
- $recent_args = array(
- 'showposts' => 4, // Show 4 posts
- 'ignore_sticky_posts' => 1,
- 'post_status' => 'publish',
- 'no_found_rows' => true,
- 'tax_query' => array(
- array(
- // Exclude posts with the Aside, Link, Quote, and Status format
- 'taxonomy' => 'post_format',
- 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
- 'field' => 'slug',
- 'operator' => 'NOT IN',
- )
- ),
- );
-
- // Our query for the Recent Posts section
- $recent = new WP_Query( $recent_args );
-
- $i = 0;
-
- while ( $recent->have_posts() ) : $recent->the_post();
-
- // Put the post ID in an array to make sure it's only showing once (this array is used in the headline lists as well)
- $GLOBALS['cakifo_do_not_duplicate'][] = $post->ID;
- ?>
-
- <article class="recent-post">
- <?php do_atomic( 'open_recent_posts_item' ); // cakifo_open_recent_posts_item ?>
-
- <?php if ( current_theme_supports( 'get-the-image' ) ) { ?>
- <div class="image">
- <?php
- // Get the thumbnail
- get_the_image( array(
- 'meta_key' => 'Thumbnail',
- 'size' => 'recent',
- 'image_class' => 'thumbnail',
- 'height' => apply_filters( 'cakifo_recent_image_height', '130' ),
- 'default_image' => THEME_URI . '/images/default-thumb-190-130.gif'
- ) );
- ?>
- </div>
- <?php } ?>
-
- <div class="details">
- <?php
- /* Entry title */
- echo apply_atomic( 'recent_post_entry_title', the_title( '<h2 class="' . esc_attr( $post->post_type ) . '-title entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>', false ) );
-
- /* Entry meta */
- echo apply_atomic_shortcode( 'recent_posts_meta', '<span class="recent-posts-meta">' . __( '[entry-published] by [entry-author]', 'cakifo' ) . '</span>' );
- ?>
-
- <div class="entry-summary">
- <?php
- $more_link = apply_filters( 'excerpt_more', '...' ) . '<br /> <a href="' . get_permalink() . '" class="more-link">' . __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'cakifo' ) . '</a>';
-
- echo wp_trim_words( get_the_excerpt(), 20, $more_link );
- ?>
- </div>
- </div> <!-- .details -->
-
- <?php do_atomic( 'close_recent_posts_item' ); // cakifo_close_recent_posts_item ?>
- </article>
-
- <?php endwhile; wp_reset_query(); ?>
-
- <?php do_atomic( 'close_recent_posts' ); // cakifo_close_recent_posts ?>
-
- </section> <!-- #recent-posts -->
+ $GLOBALS['cakifo_do_not_duplicate'][] = get_the_ID();
+ ?>
+
+ <article class="recent-post">
+ <?php do_atomic( 'open_recent_posts_item' ); // cakifo_open_recent_posts_item ?>
+
+ <?php
+ /* Get the thumbnail */
+ if ( current_theme_supports( 'get-the-image' ) )
+ get_the_image( array(
+ 'meta_key' => 'Thumbnail',
+ 'size' => 'recent',
+ 'image_class' => 'thumbnail',
+ 'default_image' => THEME_URI . '/images/default-thumb-190-130.gif',
+ ) );
+ ?>
+
+ <header class="entry-header">
+ <?php
+ echo apply_atomic_shortcode( 'recent_posts_entry_title', '[entry-title tag="h2"]' );
+ echo apply_atomic_shortcode( 'recent_posts_meta', '<span class="recent-posts-meta">' . __( '[entry-published] by [entry-author]', 'cakifo' ) . '</span>' );
+ ?>
+ </header> <!-- .details -->
+
+ <div class="entry-summary">
+ <?php
+ $more_link = apply_filters( 'excerpt_more', '...' ) . '<br /> <a href="' . get_permalink() . '" class="more-link">' . __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'cakifo' ) . '</a>';
+
+ echo wp_trim_words( get_the_excerpt(), 20, $more_link );
+ ?>
+ </div> <!-- .entry-summary -->
+
+ <?php do_atomic( 'close_recent_posts_item' ); // cakifo_close_recent_posts_item ?>
+ </article> <!-- .recent-post -->
+
+ <?php endwhile; wp_reset_query(); ?>
+
+ <?php do_atomic( 'close_recent_posts' ); // cakifo_close_recent_posts ?>
+
+</section> <!-- .recent-posts -->
<?php do_atomic( 'after_recent_posts' ); // cakifo_after_recent_posts ?>
View
113 style.dev.css
@@ -1256,6 +1256,7 @@ table caption {
.slide .entry-title {
margin-top: 0;
}
+/* Control navigation */
.flex-control-nav {
list-style: none;
margin: 20px auto 0 -60px;
@@ -1683,60 +1684,51 @@ table caption {
/* =============================================================================
Components: Recent Posts
========================================================================== */
-#recent-posts .recent-post {
+.recent-post {
float: left;
+ width: 220px;
margin-right: 40px;
- width: 205px;
- -webkit-transition: opacity 300ms;
- -moz-transition: opacity 300ms;
- -o-transition: opacity 300ms;
- -ms-transition: opacity 300ms;
- transition: opacity 300ms;
-}
-#recent-posts .recent-post:last-of-type {
- margin-right: 0;
-}
-/* Lower opacity on every col except the hovered */
-#recent-posts:hover .recent-post {
- opacity: 0.75;
+ -webkit-transition: opacity 250ms;
+ -moz-transition: opacity 250ms;
+ -o-transition: opacity 250ms;
+ transition: opacity 250ms;
+ /* Lower opacity on every column except the hovered */
+
}
-#recent-posts:hover .recent-post:hover {
- opacity: 1;
+.recent-post:last-of-type {
+ margin-right: 0;
}
-/* Recent Posts entry info */
-#recent-posts .entry-title {
+.recent-post .entry-title {
font-size: 16px;
- margin: 5px 0 10px;
- word-wrap: break-word;
-}
-#recent-posts .thumbnail {
- float: none;
+ letter-spacing: 0;
margin: 0;
+ word-wrap: break-word;
}
-#recent-posts .details {
- padding: 0 5px;
+.recent-post .entry-header {
+ margin: 7px 0;
}
-.recent-posts-meta,
-.headline-meta,
-.rss-date {
- color: #999;
- display: block;
+.recent-post .recent-posts-meta {
+ color: #8c8c8c;
font-size: 12px;
font-style: italic;
- margin-bottom: 5px;
}
-.recent-posts-meta a,
-.headline-meta a {
- color: #707070;
+.recent-post .thumbnail {
+ float: none;
+ margin: 0;
+ max-height: 150px;
}
-.recent-posts-meta a:hover,
-.headline-meta a:hover {
- color: #d64e20;
+.recent-post .entry-summary {
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -o-hyphens: auto;
+ hyphens: auto;
}
-/* IE fixes */
-.oldie #recent-posts .recent-post {
- margin-right: 15px;
- margin-left: 15px;
+.recent-posts:hover .recent-post {
+ opacity: 0.75;
+}
+.recent-posts:hover .recent-post:hover {
+ opacity: 1;
}
/* =============================================================================
Components: Headlines - Category lists
@@ -2604,13 +2596,6 @@ span.required {
-webkit-box-shadow: none;
box-shadow: none;
}
- #recent-posts .recent-post,
- .headline-list {
- margin-right: 20px;
- }
- #recent-posts .recent-post {
- margin-right: 1%;
- }
.section-title {
margin-left: 0;
-moz-box-shadow: none;
@@ -2655,36 +2640,7 @@ span.required {
@media screen and (max-width: 768px) {
/* Hide slider */
/* Make the Recent Posts one column */
- #recent-posts .recent-post {
- border-bottom: 1px solid #ccc;
- float: none;
- width: 100%;
- min-height: 140px;
- padding: 20px 0;
- }
- #recent-posts .recent-post img {
- float: left;
- margin-right: 20px;
- }
- #recent-posts .section-title {
- margin-top: 20px;
- }
/* Make the Category Headlines list two columns */
- .headline-list {
- width: 45%;
- }
- .headline-list:nth-child(2n) {
- float: right;
- }
- .headline-list li {
- padding: 10px;
- }
- #recent-posts .recent-post:hover,
- #recent-posts .recent-post:active,
- .headline-list li:hover,
- .headline-list li:active {
- background: #f7fafc;
- }
/* Add a background to the search inputs */
#topbar .search-form .search-text,
#topbar .search-form .search-submit {
@@ -2720,9 +2676,6 @@ span.required {
margin: 20px 0 0;
}
/* Hide thumbnails from the Recent Posts */
- #recent-posts img {
- display: none;
- }
/* Make the widget areas full width */
.widget-area,
.headline-list {
View
167 style.dev.less
@@ -640,70 +640,53 @@ sub {
Components: Recent Posts
========================================================================== */
-#recent-posts .recent-post {
+.recent-post {
float: left;
- margin-right: 40px;
- width: 205px;
- -webkit-transition: opacity 300ms;
- -moz-transition: opacity 300ms;
- -o-transition: opacity 300ms;
- -ms-transition: opacity 300ms;
- transition: opacity 300ms;
-}
+ width: 220px;
+ margin-right: @gutterWidth;
+ .transition(opacity 250ms);
-#recent-posts .recent-post:last-of-type {
- margin-right: 0;
-}
+ &:last-of-type {
+ margin-right: 0;
+ }
-/* Lower opacity on every col except the hovered */
-#recent-posts:hover .recent-post {
- opacity: 0.75;
-}
-#recent-posts:hover .recent-post:hover {
- opacity: 1;
-}
-/* Recent Posts entry info */
-#recent-posts .entry-title {
- font-size: 16px;
- margin: 5px 0 10px;
- word-wrap: break-word;
-}
+ .entry-title {
+ font-size: 16px;
+ letter-spacing: 0;
+ margin: 0;
+ word-wrap: break-word;
+ }
-#recent-posts .thumbnail {
- float: none;
- margin: 0;
-}
+ .entry-header {
+ margin: 7px 0;
+ }
-#recent-posts .details {
- padding: 0 5px;
-}
+ .recent-posts-meta {
+ color: darken(@grayLight, 5%);
+ font-size: 12px;
+ font-style: italic;
+ }
-.recent-posts-meta,
-.headline-meta,
-.rss-date {
- color: #999;
- display: block;
- font-size: 12px;
- font-style: italic;
- margin-bottom: 5px;
-}
+ .thumbnail {
+ float: none;
+ margin: 0;
+ max-height: 150px;
+ }
-.recent-posts-meta a,
-.headline-meta a {
- color: #707070;
-}
+ .entry-summary {
+ .hyphens;
+ }
-.recent-posts-meta a:hover,
-.headline-meta a:hover {
- color: #d64e20;
-}
+ /* Lower opacity on every column except the hovered */
+ .recent-posts:hover &{
+ opacity: 0.75;
- /* IE fixes */
- .oldie #recent-posts .recent-post {
- margin-right: 15px;
- margin-left: 15px;
+ &:hover {
+ opacity: 1;
+ }
}
+}
/* =============================================================================
Components: Headlines - Category lists
@@ -1309,14 +1292,14 @@ sub {
box-shadow: none;
}
- #recent-posts .recent-post,
- .headline-list {
- margin-right: 20px;
- }
+ // #recent-posts .recent-post,
+ // .headline-list {
+ // margin-right: 20px;
+ // }
- #recent-posts .recent-post {
- margin-right: 1%;
- }
+ // #recent-posts .recent-post {
+ // margin-right: 1%;
+ // }
.section-title {
margin-left: 0;
@@ -1373,42 +1356,42 @@ sub {
// }
/* Make the Recent Posts one column */
- #recent-posts .recent-post {
- border-bottom: 1px solid #ccc;
- float: none;
- width: 100%;
- min-height: 140px;
- padding: 20px 0;
- }
+ // #recent-posts .recent-post {
+ // border-bottom: 1px solid #ccc;
+ // float: none;
+ // width: 100%;
+ // min-height: 140px;
+ // padding: 20px 0;
+ // }
- #recent-posts .recent-post img {
- float: left;
- margin-right: 20px;
- }
+ // #recent-posts .recent-post img {
+ // float: left;
+ // margin-right: 20px;
+ // }
- #recent-posts .section-title {
- margin-top: 20px;
- }
+ // #recent-posts .section-title {
+ // margin-top: 20px;
+ // }
/* Make the Category Headlines list two columns */
- .headline-list {
- width: 45%;
- }
+ // .headline-list {
+ // width: 45%;
+ // }
- .headline-list:nth-child(2n) {
- float: right;
- }
+ // .headline-list:nth-child(2n) {
+ // float: right;
+ // }
- .headline-list li {
- padding: 10px;
- }
+ // .headline-list li {
+ // padding: 10px;
+ // }
- #recent-posts .recent-post:hover,
- #recent-posts .recent-post:active,
- .headline-list li:hover,
- .headline-list li:active {
- background: #f7fafc;
- }
+ // #recent-posts .recent-post:hover,
+ // #recent-posts .recent-post:active,
+ // .headline-list li:hover,
+ // .headline-list li:active {
+ // background: #f7fafc;
+ // }
/* Add a background to the search inputs */
#topbar .search-form .search-text,
@@ -1454,9 +1437,9 @@ sub {
}
/* Hide thumbnails from the Recent Posts */
- #recent-posts img {
- display: none;
- }
+ // #recent-posts img {
+ // display: none;
+ // }
/* Make the widget areas full width */
.widget-area,
View
4 template-front-page.php
@@ -18,14 +18,14 @@
<?php
/**
- * Get the [section-recentposts.php} template file
+ * Get the section-recentposts.php template file
*/
get_template_part( 'section', 'recentposts' );
?>
<?php
/**
- * Get the [section-headlines.php} template file
+ * Get the section-headlines.php template file
*/
if ( hybrid_get_setting( 'headlines_category' ) )
get_template_part( 'section', 'headlines' );
Please sign in to comment.
Something went wrong with that request. Please try again.