mirror of
https://github.com/10h30/display-featured-image-genesis.git
synced 2026-07-13 19:46:06 +09:00
initial release
This commit is contained in:
Robin Cornett
@@ -0,0 +1 @@
|
||||
Thumbs.db
|
||||
@@ -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
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
/**
|
||||
* Simple plugin to vary how the post/page featured image displays
|
||||
*
|
||||
* @package DisplayFeaturedImageGenesis
|
||||
* @author Robin Cornett <hello@robincornett.com>
|
||||
* @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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
<?php
|
||||
/**
|
||||
* Send Images to RSS
|
||||
*
|
||||
* @package DisplayFeaturedImageGenesis
|
||||
* @author Robin Cornett <hello@robincornett.com>
|
||||
* @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 '<div class="big-leader"><div class="wrap">';
|
||||
if ( is_home() ) {
|
||||
$title = get_post( get_option( 'page_for_posts' ) )->post_title;
|
||||
echo '<h1 class="entry-title">' . $title . '</h1>';
|
||||
}
|
||||
else {
|
||||
echo '<h1 class="entry-title">' . get_the_title() . '</h1>';
|
||||
}
|
||||
|
||||
echo '</div></div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* 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' ) ) );
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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});
|
||||
});
|
||||
@@ -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("<img />")[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('<div class="backstretch"></div>').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("<img />").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.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);
|
||||
Reference in New Issue
Block a user