From 2ddf3c937bc41da630ae63170eb5dc0100592dae Mon Sep 17 00:00:00 2001 From: Robin Cornett Date: Tue, 16 Sep 2014 14:23:40 -0400 Subject: [PATCH] initial release --- .gitignore | 1 + README.md | 57 ++++++- display-featured-image-genesis.php | 29 ++++ .../class-displayfeaturedimagegenesis.php | 153 ++++++++++++++++++ .../css/display-featured-image-genesis.css | 17 ++ includes/js/backstretch-set.js | 4 + includes/js/backstretch.js | 4 + 7 files changed, 263 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 display-featured-image-genesis.php create mode 100644 includes/class-displayfeaturedimagegenesis.php create mode 100644 includes/css/display-featured-image-genesis.css create mode 100644 includes/js/backstretch-set.js create mode 100644 includes/js/backstretch.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..aafa768 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +Thumbs.db \ No newline at end of file diff --git a/README.md b/README.md index 33e1e14..6ee2b31 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,57 @@ -display-featured-image-genesis -============================== +# Display Featured Image for Genesis This plugin works within the Genesis Framework, to display your post/page featured images in new and fun ways. For now, an HTML5 theme is required. + +## Description + +This plugin takes a different approach to how we use and display featured images for posts and pages. Instead of simply reusing an image which already exists in the post/page content, the plugin anticipates that you will want to use lovely large images for your featured images, but to do so intelligently. Depending on what you upload, the plugin will: +* display the image as a backstretch (screen width) image if the image is wider than your site's Large Media Setting. +* display the image above your post/page content, centered and up to the width of the content, if your image is larger than your Medium Media Setting, and less than or equal to your Large Media Setting. +* display nothing if your featured image width is less than or equal to your Medium Media Setting. +* display nothing if your featured image is already displayed in your content (the original image, not a resized version). + +## Requirements +* WordPress 3.8, tested up to 4.0 +* the Genesis Framework with an HTML5 child theme. + +## Installation + +### Upload + +1. Download the latest tagged archive (choose the "zip" option). +2. Go to the __Plugins -> Add New__ screen and click the __Upload__ tab. +3. Upload the zipped archive directly. +4. Go to the Plugins screen and click __Activate__. + +### Manual + +1. Download the latest tagged archive (choose the "zip" option). +2. Unzip the archive. +3. Copy the folder to your `/wp-content/plugins/` directory. +4. Go to the Plugins screen and click __Activate__. + +Check out the Codex for more information about [installing plugins manually](http://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation). + +### Git + +Using git, browse to your `/wp-content/plugins/` directory and clone this repository: + +`git clone git@github.com:robincornett/display-featured-image-genesis.git` + +Then go to your Plugins screen and click __Activate__. + +## Frequently Asked Questions + + +### What is Simplify Feed? + +If you use native WordPress galleries in your posts, they're sent to your feed as thumbnails. Even if you do not use an RSS/email service, you can still use this plugin to sort out your galleries for subscribers who use an RSS reader. If you select Simplify Feed, your galleries will be converted, but there will not be an email sized image created, and no alternate feed will be created. + +## Credits + +* Built by [Robin Cornett](http://robincornett.com/) + +## Changelog + +###1.0.0 +* Initial release on Github \ No newline at end of file diff --git a/display-featured-image-genesis.php b/display-featured-image-genesis.php new file mode 100644 index 0000000..ac4da64 --- /dev/null +++ b/display-featured-image-genesis.php @@ -0,0 +1,29 @@ + + * @license GPL-2.0+ + * @link http://robincornett.com + * @copyright 2014 Robin Cornett Creative, LLC + * + * @wordpress-plugin + * Plugin Name: Display Featured Image for Genesis + * Plugin URI: http://github.com/robincornett/display-featured-image-genesis/ + * Description: This plugin requires the Genesis Framework. It varies the display of the post or page featured image, depending on size. + * Version: 1.0.0 + * Author: Robin Cornett + * Author URI: http://robincornett.com + * License: GPL-2.0+ + * License URI: http://www.gnu.org/licenses/gpl-2.0.txt + */ + +require plugin_dir_path( __FILE__ ) . 'includes/class-displayfeaturedimagegenesis.php'; + +add_action( 'init', 'displayfeaturedimagegenesis_instantiate' ); +function displayfeaturedimagegenesis_instantiate() { + if ( basename( get_template_directory() ) == 'genesis' ) { + new Display_Featured_Image_Genesis(); + } +} diff --git a/includes/class-displayfeaturedimagegenesis.php b/includes/class-displayfeaturedimagegenesis.php new file mode 100644 index 0000000..5e638a0 --- /dev/null +++ b/includes/class-displayfeaturedimagegenesis.php @@ -0,0 +1,153 @@ + + * @link https://github.com/robincornett/display-featured-image-genesis/ + * @copyright 2014 Robin Cornett + * @license GPL-2.0+ + */ + +/** + * Main plugin class. + * + * @package DisplayFeaturedImageGenesis + */ +class Display_Featured_Image_Genesis { + function __construct() { + add_action( 'wp_enqueue_scripts', array( $this, 'load_scripts' ) ); + add_filter( 'body_class', array( $this, 'add_body_class' ) ); + add_action( 'genesis_before', array( $this, 'do_featured_image' ) ); + } + + /** + * set and retreive variables for the featured image. + * @return $image + * + * @since 1.0.0 + */ + protected function get_image_variables() { + $image = new stdClass(); + global $post; + if ( is_home() ) { + $postspage = get_option( 'page_for_posts' ); + $image->original = wp_get_attachment_image_src( get_post_thumbnail_id( $postspage ), 'original' ); + } + else { + $image->original = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'original' ); + } + $image->large = get_option( 'large_size_w' ); + $image->medium = get_option( 'medium_size_w' ); + $image->content = strpos( $post->post_content, $image->original[0] ); + + return $image; + + } + + /** + * enqueue plugin styles and scripts. + * @return enqueue + * + * @since 1.0.0 + */ + public function load_scripts() { + $image = $this->get_image_variables(); + + if ( has_post_thumbnail() && $image->content === false ) { + + wp_enqueue_style( 'displayfeaturedimage-style', plugins_url( 'includes/css/display-featured-image-genesis.css', dirname( __FILE__ ) ), array(), 1.0 ); + + if ( ( $image->original[1] ) >= $image->large ) { + wp_enqueue_script( 'displayfeaturedimage-backstretch', plugins_url( '/includes/js/backstretch.js', dirname( __FILE__ ) ), array( 'jquery' ), '1.0.0' ); + wp_enqueue_script( 'displayfeaturedimage-backstretch-set', plugins_url( '/includes/js/backstretch-set.js', dirname( __FILE__ ) ), array( 'jquery', 'displayfeaturedimage-backstretch' ), '1.0.0' ); + + wp_localize_script( 'displayfeaturedimage-backstretch-set', 'BackStretchImg', array( 'src' => $image->original[0] ) ); + + } + } + } + + /** + * set body class if featured images are displayed using the plugin + * @param filter $classes body_class + * + * @since 1.0.0 + */ + public function add_body_class( $classes ) { + global $post; + + $image = $this->get_image_variables(); + + if ( $image->content === false ) { + if ( has_post_thumbnail( $post->ID ) && $image->original[1] > $image->large ) { + $classes[] = 'has-leader'; + } + elseif ( has_post_thumbnail( $post->ID ) && ( ( $image->original[1] <= $image->large ) && ( $image->original[1] > $image->medium ) ) ) { + $classes[] = 'large-featured'; + } + } + return $classes; + } + + /** + * do the featured image + * @return image + * + * @since 1.0.0 + */ + public function do_featured_image() { + global $post; + + $image = $this->get_image_variables(); + + if ( $image->content === false ) { + if ( $image->original[1] > $image->large ) { + add_action( 'genesis_after_header', array( $this, 'do_backstretch_image' ) ); + } + elseif ( ( $image->original[1] <= $image->large ) && ( $image->original[1] > $image->medium ) ) { + add_action( 'genesis_before_entry', array( $this, 'do_large_image' ) ); + } + } + + } + + /** + * backstretch image (for images which are larger than Media Settings > Large ) + * @return image + * + * @since 1.0.0 + */ + public function do_backstretch_image() { + global $post; + + $image = $this->get_image_variables(); + + if ( ! is_home() ) { + remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); + } + + echo '
'; + if ( is_home() ) { + $title = get_post( get_option( 'page_for_posts' ) )->post_title; + echo '

' . $title . '

'; + } + else { + echo '

' . get_the_title() . '

'; + } + + echo '
'; + } + + /** + * Large image, centered above content + * @return image + * + * @since 1.0.0 + */ + public function do_large_image() { + global $post; + echo get_the_post_thumbnail( $post->ID, 'original', array( 'class' => 'aligncenter', 'alt' => the_title_attribute( 'echo=0' ) ) ); + } + +} diff --git a/includes/css/display-featured-image-genesis.css b/includes/css/display-featured-image-genesis.css new file mode 100644 index 0000000..7c25fc7 --- /dev/null +++ b/includes/css/display-featured-image-genesis.css @@ -0,0 +1,17 @@ +.has-leader .site-inner { + margin-top: 0; + padding-top: 0; +} + +.big-leader { + max-height: 700px; +} + +.big-leader .entry-title { + bottom: 10px; + color: #fff; + position: absolute; + right: 0; + left: 0; + text-align: center; +} diff --git a/includes/js/backstretch-set.js b/includes/js/backstretch-set.js new file mode 100644 index 0000000..fcf4215 --- /dev/null +++ b/includes/js/backstretch-set.js @@ -0,0 +1,4 @@ +jQuery(document).ready(function($) { + $(".big-leader").css({'height':($(window).height())+'px'}); + $(".big-leader").backstretch([BackStretchImg.src],{'positionType':'fixed','duration':5000,'fade':750}); +}); \ No newline at end of file diff --git a/includes/js/backstretch.js b/includes/js/backstretch.js new file mode 100644 index 0000000..1bb20f8 --- /dev/null +++ b/includes/js/backstretch.js @@ -0,0 +1,4 @@ +/*! Backstretch - v2.0.4 - 2013-06-19 +* http://srobbin.com/jquery-plugins/backstretch/ +* Copyright (c) 2013 Scott Robbin; Licensed MIT */ +(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('
').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.indexe||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1=k)})(jQuery,window); \ No newline at end of file