Merge pull request #97 from thenewinquiry/0.8.1

0.8.1: Featured bundle styling
thenewinquiry · Oct 30, 2017 · 6420add · 6420add
2 parents a591946 + 827761f
commit 6420add
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 45 deletions.
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/css/style.min.css.map b/css/style.min.css.map
diff --git a/home.php b/home.php
@@ -26,6 +26,57 @@
 
 	<section id="primary" class="content-archive content-area">
 		<main id="main" class="site-main" role="main">
+                <?php if( $featured_bundle = get_option( 'options_featured_bundle' ) ) : // If featured bundle exists ?>
+
+                    <?php if( ( function_exists( 'tni_core_get_featured_bundle_posts' ) ) && ( $bundle_posts = tni_core_get_featured_bundle_posts() ) ) : ?>
+                        <?php /* image id is stored as term meta */
+                        if( $image_id = get_term_meta( $featured_bundle, 'image', true ) ) : ?>
+
+                           <?php
+                            /* Replace `$image_size = 'thumbail'` with the size you want to use (probably 'full') */
+                           $image_data = wp_get_attachment_image_src( $image_id, $image_size = 'full' ); ?>
+
+                           <?php
+                            /* image data is stored in array; image `url` is the first item */
+                           $image = $image_data[0]; ?>
+
+                           <?php if( !empty( $image ) ) : ?>
+                             <div class="featured-bundle-post-wrapper post-wrapper clearfix" style="background:url('<?php echo esc_url( $image ); ?>');">
+                           <?php endif; ?>
+                        <?php else : ?>
+                            <div class="featured-bundle-post-wrapper post-wrapper clearfix">
+                        <?php endif; ?>
+
+                            <?php $bundle_term = get_term($featured_bundle, 'bundle'); ?>
+                            <h2 class="featured-bundle-name"><?php echo $bundle_term->name; ?></h2>
+                            <p class="featured-bundle-description"><?php echo $bundle_term->description; ?></p>
+                            <div class="featured-bundle-overlay"></div>
+                            <div class="featured-bundle-posts">
+                                <?php
+                                $args = array(
+                                    'post__in'							 => $bundle_posts,
+                                    'ignore_sticky_posts'    => true,
+                                );
+                                $bundle_query = new WP_Query( $args );
+                                ?>
+
+                                <?php if ( $bundle_query->have_posts() ) : ?>
+                                    <?php while ( $bundle_query->have_posts() ) : ?>
+                                    <?php $bundle_query->the_post(); ?>
+
+                                        <?php get_template_part( 'template-parts/content' ); ?>
+
+                                    <?php endwhile; ?>
+                                <?php endif; ?>
+
+                                <?php wp_reset_postdata(); ?>
+                            </div>
+                        </div>
+
+                    <?php endif; ?>
+
+                <?php endif; ?>
+
 
 			<?php
 			$feature = tni_get_featured_post();
@@ -42,38 +93,7 @@
 			<?php endif; ?>
 
 				<div id="post-wrapper" class="post-wrapper clearfix">
-
-					<div class="featured-bundle-posts">
-
-						<?php if( $featured_bundle = get_option( 'options_featured_bundle' ) ) : // If featured bundle exists ?>
-
-							<?php if( ( function_exists( 'tni_core_get_featured_bundle_posts' ) ) && ( $bundle_posts = tni_core_get_featured_bundle_posts() ) ) : ?>
-
-								<?php
-								$args = array(
-									'post__in'							 => $bundle_posts,
-									'ignore_sticky_posts'    => true,
-								);
-								$bundle_query = new WP_Query( $args );
-								?>
-
-								<?php if ( $bundle_query->have_posts() ) : ?>
-									<?php while ( $bundle_query->have_posts() ) : ?>
-									<?php $bundle_query->the_post(); ?>
-
-										<?php get_template_part( 'template-parts/content' ); ?>
-
-									<?php endwhile; ?>
-								<?php endif; ?>
-
-								<?php wp_reset_postdata(); ?>
-
-							<?php endif; ?>
-
-						<?php endif; ?>
-
-					</div>
-
+
 					<?php
 					if ( have_posts() ) : ?>
 

diff --git a/images/audio.png b/images/audio.png
diff --git a/readme.txt b/readme.txt
@@ -3,7 +3,7 @@ Theme URI: https://github.com/misfist/tni-theme
 Tags: Blog, Magazine
 Requires at least: 4.5.0
 Tested up to: 4.8.1
-Version: 0.8.0
+Version: 0.8.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -13,6 +13,10 @@ Custom theme for The New Inquiry, based on Gridbox theme.
 
 == Changelog ==
 
+== 0.8.1 October 30, 2017 ==
+* Featured bundled posts styling
+* Updated audio icon styling
+
 == 0.8.0 October 30, 2017 ==
 * #40 Bundled Posts
   * Added query to get bundled posts on home page

diff --git a/src/sass/_home.scss b/src/sass/_home.scss
@@ -3,7 +3,55 @@
     @include visually-hidden;
   }
 }
+
+.featured-bundle-post-wrapper {
+  margin: 0 0 4em 0;
+  padding: 1em;
+  background: #f2f2f2;
+  position: relative;
+  background-size: cover;
+  background-position: center center;
+  display: block;
+  color: #fff;
+  article {
+    margin-bottom: 0;
+    .entry-meta,
+    .entry-title a {
+      color: #fff;
+    }
+    .entry-meta a {
+      color: $color__highlight-alt;
+    }
+  }
+}
 .featured-bundle-posts {
   display: flex;
   flex-wrap: wrap;
 }
+
+.featured-bundle-name {
+  font-family: $font__sans-serif;
+  margin: 0;
+  text-transform: uppercase;
+}
+.featured-bundle-description {
+  margin-top: 0.2em;
+  a {
+    color: $color__highlight-alt;
+    text-decoration: underline;
+  }
+}
+.featured-bundle-description, .featured-bundle-name {
+  color: #fff;
+  position: relative;
+  z-index: 1;
+}
+
+.featured-bundle-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,0.6);
+}
diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss
@@ -39,6 +39,20 @@
   }
 }
 
+.post-layout-four-columns .featured-bundle-post-wrapper .post-column {
+  @include breakpoint(sm) {
+    width: 33.33333%;
+  }
+
+  @include breakpoint(md) {
+    width: 25%;
+  }
+
+  @include breakpoint(lg) {
+    width: 20%;
+  }
+}
+
 .post-layout-four-columns .post-wrapper .post-featured {
   width: 100%;
 }

diff --git a/src/sass/_posts.scss b/src/sass/_posts.scss
@@ -484,6 +484,7 @@ article.blogs {
 
 .post-column {
   margin-bottom: 1em;
+  position: relative;
 }
 
 .post-featured {
@@ -619,31 +620,49 @@ article.blogs {
   }
 }
 
+.audio-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.15em 0.6em 0.2em 0.3em;
+  border-radius: 0 0 20em 0;
+  background: $color__highlight-alt;
+}
 .audio-icon {
   width: 14px;
   height: 14px;
   vertical-align: text-top;
-  opacity: 0.5;
-}
-.entry-meta .audio-icon {
-  float: right;
-  margin-top: 4px;
+  opacity: 1;
 }
 .audio-embed {
   margin: 2em 0 4em 0;
   display: flex;
   padding: 1em 1em 0.5em 1em;
   background: #eee;
+  border: 2px solid #e0e0e0;
+  .audio-embed-caption {
+    border: none;
+  }
 }
 .audio-embed-caption {
   font-style: italic;
   color: $color__gray-light;
   padding: 1em;
   background: #eee;
+  border: 2px solid #e0e0e0;
   a {
     color: $color__gray-light;
     text-decoration: underline;
   }
+  .audio-icon {
+    background: $color__highlight-alt;
+    padding: 0.2em;
+    width: 18px;
+    height: 18px;
+    border-radius: 20em;
+    margin-right: 0.4em;
+    margin-top: -1px;
+  }
 }
 .audio-player {
   flex: 1;

diff --git a/style.css b/style.css
@@ -5,6 +5,6 @@ Description:    Custom theme for The New Inquiry.
 Author:         Pea
 Author URI:     https://github.com/misfist
 Template:       gridbox
-Version:        0.8.0
+Version:        0.8.1
 Text Domain:    tni
 */
diff --git a/template-parts/content.php b/template-parts/content.php
@@ -21,16 +21,14 @@
 			<?php if( true === $theme_options['meta_category'] ) : ?>
 				<div class="entry-meta">
 
-					<?php if( ( $featured_bundle = get_option( 'options_featured_bundle' ) ) && ( has_term( $featured_bundle, 'bundle', $post->ID ) ) ) : /* @since 1.3.0 */ ?>
-						<span class="meta-category featured-bundle"><?php echo get_the_term_list( $post->ID, 'bundle', '', ', ' ); ?></span>
-					<?php elseif( 'blogs' == get_post_type() ) : ?>
+					<?php if( 'blogs' == get_post_type() ) : ?>
 						<span class="meta-category"><?php echo get_the_term_list( $post->ID, 'blog-types', '', ', ' ); ?></span>
 					<?php else : ?>
 						<?php echo gridbox_meta_category(); ?>
 					<?php endif; ?>
 
           <?php if ( get_post_meta( $post->ID, 'audio_url', true )) : ?>
-						<a href="<?php echo esc_url( get_permalink() . '#audio' ); ?>"><img class="audio-icon" src="<?php echo get_stylesheet_directory_uri(); ?>/images/audio.png" title="<?php _e( 'Audio version available', 'tni' ); ?>" /></a>
+						<a class="audio-link" href="<?php echo esc_url( get_permalink() . '#audio' ); ?>"><img class="audio-icon" src="<?php echo get_stylesheet_directory_uri(); ?>/images/audio.png" title="<?php _e( 'Audio version available', 'tni' ); ?>" /></a>
           <?php endif; ?>
 				</div>
 			<?php endif; ?>