Initial commit
This commit is contained in:
Ben Goldsworthy
commit
28e6ddf404
1083 changed files with 191734 additions and 0 deletions
|
|
@ -0,0 +1,75 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Lets you round the numeric elements of an array to integers while preserving their sum.
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* Jetpack_Constrained_Array_Rounding::get_rounded_constrained_array( $bound_array )
|
||||
* if a specific sum doesn't need to be specified for the bound array
|
||||
*
|
||||
* Jetpack_Constrained_Array_Rounding::get_rounded_constrained_array( $bound_array, $sum )
|
||||
* If the sum of $bound_array must equal $sum after rounding.
|
||||
*
|
||||
* If $sum is less than the sum of the floor of the elements of the array, the class defaults to using the sum of the array elements.
|
||||
*/
|
||||
class Jetpack_Constrained_Array_Rounding {
|
||||
public static function get_rounded_constrained_array( $bound_array, $sum = false ) {
|
||||
// Convert associative arrays before working with them and convert them back before returning the values
|
||||
$keys = array_keys( $bound_array );
|
||||
$bound_array = array_values( $bound_array );
|
||||
|
||||
$bound_array_int = self::get_int_floor_array( $bound_array );
|
||||
|
||||
$lower_sum = array_sum( wp_list_pluck( $bound_array_int, 'floor' ) );
|
||||
if ( ! $sum || ( $sum < $lower_sum ) ) {
|
||||
// If value of sum is not supplied or is invalid, calculate the sum that the returned array is constrained to match
|
||||
$sum = array_sum( $bound_array );
|
||||
}
|
||||
$diff_sum = $sum - $lower_sum;
|
||||
|
||||
self::adjust_constrained_array( $bound_array_int, $diff_sum );
|
||||
|
||||
$bound_array_fin = wp_list_pluck( $bound_array_int, 'floor' );
|
||||
return array_combine( $keys, $bound_array_fin );
|
||||
}
|
||||
|
||||
private static function get_int_floor_array( $bound_array ) {
|
||||
$bound_array_int_floor = array();
|
||||
foreach ( $bound_array as $i => $value ){
|
||||
$bound_array_int_floor[$i] = array(
|
||||
'floor' => (int) floor( $value ),
|
||||
'fraction' => $value - floor( $value ),
|
||||
'index' => $i,
|
||||
);
|
||||
}
|
||||
|
||||
return $bound_array_int_floor;
|
||||
}
|
||||
|
||||
private static function adjust_constrained_array( &$bound_array_int, $adjustment ) {
|
||||
usort( $bound_array_int, array( 'self', 'cmp_desc_fraction' ) );
|
||||
|
||||
$start = 0;
|
||||
$end = $adjustment - 1;
|
||||
$length = count( $bound_array_int );
|
||||
|
||||
for ( $i = $start; $i <= $end; $i++ ) {
|
||||
$bound_array_int[ $i % $length ]['floor']++;
|
||||
}
|
||||
|
||||
usort( $bound_array_int, array( 'self', 'cmp_asc_index' ) );
|
||||
}
|
||||
|
||||
private static function cmp_desc_fraction( $a, $b ) {
|
||||
if ( $a['fraction'] == $b['fraction'] )
|
||||
return 0;
|
||||
return $a['fraction'] > $b['fraction'] ? -1 : 1;
|
||||
}
|
||||
|
||||
private static function cmp_asc_index( $a, $b ) {
|
||||
if ( $a['index'] == $b['index'] )
|
||||
return 0;
|
||||
return $a['index'] < $b['index'] ? -1 : 1;
|
||||
}
|
||||
}
|
||||
247
plugins/jetpack/modules/tiled-gallery/tiled-gallery.php
Normal file
247
plugins/jetpack/modules/tiled-gallery/tiled-gallery.php
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<?php
|
||||
|
||||
// Include the class file containing methods for rounding constrained array elements.
|
||||
// Here the constrained array element is the dimension of a row, group or an image in the tiled gallery.
|
||||
include_once dirname( __FILE__ ) . '/math/class-constrained-array-rounding.php';
|
||||
|
||||
// Layouts
|
||||
include_once dirname( __FILE__ ) . '/tiled-gallery/tiled-gallery-rectangular.php';
|
||||
include_once dirname( __FILE__ ) . '/tiled-gallery/tiled-gallery-square.php';
|
||||
include_once dirname( __FILE__ ) . '/tiled-gallery/tiled-gallery-circle.php';
|
||||
|
||||
class Jetpack_Tiled_Gallery {
|
||||
private static $talaveras = array( 'rectangular', 'square', 'circle', 'rectangle', 'columns' );
|
||||
|
||||
public function __construct() {
|
||||
add_action( 'admin_init', array( $this, 'settings_api_init' ) );
|
||||
add_filter( 'jetpack_gallery_types', array( $this, 'jetpack_gallery_types' ), 9 );
|
||||
add_filter( 'jetpack_default_gallery_type', array( $this, 'jetpack_default_gallery_type' ) );
|
||||
}
|
||||
|
||||
public function tiles_enabled() {
|
||||
// Check the setting status
|
||||
return '' != get_option( 'tiled_galleries' );
|
||||
}
|
||||
|
||||
public function set_atts( $atts ) {
|
||||
global $post;
|
||||
|
||||
$this->atts = shortcode_atts( array(
|
||||
'order' => 'ASC',
|
||||
'orderby' => 'menu_order ID',
|
||||
'id' => isset( $post->ID ) ? $post->ID : 0,
|
||||
'include' => '',
|
||||
'exclude' => '',
|
||||
'type' => '',
|
||||
'grayscale' => false,
|
||||
'link' => '',
|
||||
'columns' => 3
|
||||
), $atts, 'gallery' );
|
||||
|
||||
$this->atts['id'] = (int) $this->atts['id'];
|
||||
$this->float = is_rtl() ? 'right' : 'left';
|
||||
|
||||
// Default to rectangular is tiled galleries are checked
|
||||
if ( $this->tiles_enabled() && ( ! $this->atts['type'] || 'default' == $this->atts['type'] ) )
|
||||
$this->atts['type'] = 'rectangular';
|
||||
|
||||
if ( !$this->atts['orderby'] ) {
|
||||
$this->atts['orderby'] = sanitize_sql_orderby( $this->atts['orderby'] );
|
||||
if ( !$this->atts['orderby'] )
|
||||
$this->atts['orderby'] = 'menu_order ID';
|
||||
}
|
||||
|
||||
if ( 'rand' == strtolower( $this->atts['order'] ) ) {
|
||||
$this->atts['orderby'] = 'rand';
|
||||
}
|
||||
|
||||
// We shouldn't have more than 20 columns.
|
||||
if ( ! is_numeric( $this->atts['columns'] ) || 20 < $this->atts['columns'] ) {
|
||||
$this->atts['columns'] = 3;
|
||||
}
|
||||
}
|
||||
|
||||
public function get_attachments() {
|
||||
extract( $this->atts );
|
||||
|
||||
if ( !empty( $include ) ) {
|
||||
$include = preg_replace( '/[^0-9,]+/', '', $include );
|
||||
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
|
||||
|
||||
$attachments = array();
|
||||
foreach ( $_attachments as $key => $val ) {
|
||||
$attachments[$val->ID] = $_attachments[$key];
|
||||
}
|
||||
} elseif ( 0 == $id ) {
|
||||
// Should NEVER Happen but infinite_scroll_load_other_plugins_scripts means it does
|
||||
// Querying with post_parent == 0 can generate stupidly memcache sets on sites with 10000's of unattached attachments as get_children puts every post in the cache.
|
||||
// TODO Fix this properly
|
||||
$attachments = array();
|
||||
} elseif ( !empty( $exclude ) ) {
|
||||
$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
|
||||
$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
|
||||
} else {
|
||||
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
|
||||
}
|
||||
return $attachments;
|
||||
}
|
||||
|
||||
public static function default_scripts_and_styles() {
|
||||
wp_enqueue_script( 'tiled-gallery', plugins_url( 'tiled-gallery/tiled-gallery.js', __FILE__ ), array( 'jquery' ) );
|
||||
if( is_rtl() ) {
|
||||
wp_enqueue_style( 'tiled-gallery', plugins_url( 'tiled-gallery/rtl/tiled-gallery-rtl.css', __FILE__ ), array(), '2012-09-21' );
|
||||
} else {
|
||||
wp_enqueue_style( 'tiled-gallery', plugins_url( 'tiled-gallery/tiled-gallery.css', __FILE__ ), array(), '2012-09-21' );
|
||||
}
|
||||
}
|
||||
|
||||
public function gallery_shortcode( $val, $atts ) {
|
||||
if ( ! empty( $val ) ) // something else is overriding post_gallery, like a custom VIP shortcode
|
||||
return $val;
|
||||
|
||||
global $post;
|
||||
|
||||
$this->set_atts( $atts );
|
||||
|
||||
$attachments = $this->get_attachments();
|
||||
if ( empty( $attachments ) )
|
||||
return '';
|
||||
|
||||
if ( is_feed() || defined( 'IS_HTML_EMAIL' ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (
|
||||
in_array(
|
||||
$this->atts['type'],
|
||||
/**
|
||||
* Filters the permissible Tiled Gallery types.
|
||||
*
|
||||
* @module tiled-gallery
|
||||
*
|
||||
* @since 3.7.0
|
||||
*
|
||||
* @param array Array of allowed types. Default: 'rectangular', 'square', 'circle', 'rectangle', 'columns'.
|
||||
*/
|
||||
$talaveras = apply_filters( 'jetpack_tiled_gallery_types', self::$talaveras )
|
||||
)
|
||||
) {
|
||||
// Enqueue styles and scripts
|
||||
self::default_scripts_and_styles();
|
||||
|
||||
// Generate gallery HTML
|
||||
$gallery_class = 'Jetpack_Tiled_Gallery_Layout_' . ucfirst( $this->atts['type'] );
|
||||
$gallery = new $gallery_class( $attachments, $this->atts['link'], $this->atts['grayscale'], (int) $this->atts['columns'] );
|
||||
$gallery_html = $gallery->HTML();
|
||||
|
||||
if ( $gallery_html && class_exists( 'Jetpack' ) && class_exists( 'Jetpack_Photon' ) ) {
|
||||
// Tiled Galleries in Jetpack require that Photon be active.
|
||||
// If it's not active, run it just on the gallery output.
|
||||
if ( ! in_array( 'photon', Jetpack::get_active_modules() ) && ! Jetpack::is_development_mode() )
|
||||
$gallery_html = Jetpack_Photon::filter_the_content( $gallery_html );
|
||||
}
|
||||
|
||||
return trim( preg_replace( '/\s+/', ' ', $gallery_html ) ); // remove any new lines from the output so that the reader parses it better
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
public static function gallery_already_redefined() {
|
||||
global $shortcode_tags;
|
||||
$redefined = false;
|
||||
if ( ! isset( $shortcode_tags[ 'gallery' ] ) || $shortcode_tags[ 'gallery' ] !== 'gallery_shortcode' ) {
|
||||
$redefined = true;
|
||||
}
|
||||
/**
|
||||
* Filter the output of the check for another plugin or theme affecting WordPress galleries.
|
||||
*
|
||||
* This will let folks that replace core’s shortcode confirm feature parity with it, so Jetpack's Tiled Galleries can still work.
|
||||
*
|
||||
* @module tiled-gallery
|
||||
*
|
||||
* @since 3.1.0
|
||||
*
|
||||
* @param bool $redefined Does another plugin or theme already redefines the default WordPress gallery?
|
||||
*/
|
||||
return apply_filters( 'jetpack_tiled_gallery_shortcode_redefined', $redefined );
|
||||
}
|
||||
|
||||
public static function init() {
|
||||
if ( self::gallery_already_redefined() )
|
||||
return;
|
||||
|
||||
$gallery = new Jetpack_Tiled_Gallery;
|
||||
add_filter( 'post_gallery', array( $gallery, 'gallery_shortcode' ), 1001, 2 );
|
||||
}
|
||||
|
||||
public static function get_content_width() {
|
||||
$tiled_gallery_content_width = Jetpack::get_content_width();
|
||||
|
||||
if ( ! $tiled_gallery_content_width )
|
||||
$tiled_gallery_content_width = 500;
|
||||
|
||||
/**
|
||||
* Filter overwriting the default content width.
|
||||
*
|
||||
* @module tiled-gallery
|
||||
*
|
||||
* @since 2.1.0
|
||||
*
|
||||
* @param string $tiled_gallery_content_width Default Tiled Gallery content width.
|
||||
*/
|
||||
return apply_filters( 'tiled_gallery_content_width', $tiled_gallery_content_width );
|
||||
}
|
||||
|
||||
/**
|
||||
* Media UI integration
|
||||
*/
|
||||
function jetpack_gallery_types( $types ) {
|
||||
if ( get_option( 'tiled_galleries' ) && isset( $types['default'] ) ) {
|
||||
// Tiled is set as the default, meaning that type='default'
|
||||
// will still display the mosaic.
|
||||
$types['thumbnails'] = $types['default'];
|
||||
unset( $types['default'] );
|
||||
}
|
||||
|
||||
$types['rectangular'] = __( 'Tiled Mosaic', 'jetpack' );
|
||||
$types['square'] = __( 'Square Tiles', 'jetpack' );
|
||||
$types['circle'] = __( 'Circles', 'jetpack' );
|
||||
$types['columns'] = __( 'Tiled Columns', 'jetpack' );
|
||||
|
||||
return $types;
|
||||
}
|
||||
|
||||
function jetpack_default_gallery_type() {
|
||||
return ( get_option( 'tiled_galleries' ) ? 'rectangular' : 'default' );
|
||||
}
|
||||
|
||||
static function get_talaveras() {
|
||||
return self::$talaveras;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a checkbox field to the Carousel section in Settings > Media
|
||||
* for setting tiled galleries as the default.
|
||||
*/
|
||||
function settings_api_init() {
|
||||
global $wp_settings_sections;
|
||||
|
||||
// Add the setting field [tiled_galleries] and place it in Settings > Media
|
||||
if ( isset( $wp_settings_sections['media']['carousel_section'] ) )
|
||||
$section = 'carousel_section';
|
||||
else
|
||||
$section = 'default';
|
||||
|
||||
add_settings_field( 'tiled_galleries', __( 'Tiled Galleries', 'jetpack' ), array( $this, 'setting_html' ), 'media', $section );
|
||||
register_setting( 'media', 'tiled_galleries', 'esc_attr' );
|
||||
}
|
||||
|
||||
function setting_html() {
|
||||
echo '<label><input name="tiled_galleries" type="checkbox" value="1" ' .
|
||||
checked( 1, '' != get_option( 'tiled_galleries' ), false ) . ' /> ' .
|
||||
__( 'Display all your gallery pictures in a cool mosaic.', 'jetpack' ) . '</br></label>';
|
||||
}
|
||||
}
|
||||
|
||||
add_action( 'init', array( 'Jetpack_Tiled_Gallery', 'init' ) );
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
/* This file was automatically generated on Oct 01 2015 20:17:19 */
|
||||
|
||||
/* =Tiled Gallery Default Styles
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery {
|
||||
clear: both;
|
||||
margin: 0 0 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tiled-gallery img {
|
||||
margin: 2px !important; /* Ensure that this value isn't overridden by themes that give content images blanket margins */
|
||||
}
|
||||
.tiled-gallery .gallery-group {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item {
|
||||
float: right;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: inherit; /* prevents ie8 bug with inline width styles */
|
||||
}
|
||||
.tiled-gallery .gallery-row {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item a { /* Needs to reset some properties for theme compatibility */
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item img,
|
||||
.tiled-gallery .tiled-gallery-item img:hover { /* Needs to reset some properties for theme compatibility */
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tiled-gallery-caption { /* Captions */
|
||||
background: #eee;
|
||||
background: rgba( 255,255,255,0.8 );
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-indent: 10px;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item-small .tiled-gallery-caption { /* Smaller captions */
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Hide galleries in widgets until they've been resized to fit.
|
||||
Gallery widgets are almost guaranteed to need resizing, and
|
||||
the jump is a little more obvious than galleries in content. */
|
||||
.widget-gallery .tiled-gallery-unresized {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* =Greyscale
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery .tiled-gallery-item img.grayscale {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item img.grayscale:hover {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =Circles Layout
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery.type-circle .tiled-gallery-item img {
|
||||
border-radius: 50% !important; /* Ensure that circles are displayed in themes that add border-radius to all images as a default */
|
||||
}
|
||||
.tiled-gallery.type-circle .tiled-gallery-caption {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
if ( defined( 'JSON_HEX_AMP' ) ) {
|
||||
// see shortcodes/slideshow.php
|
||||
// This is nice to have, but not strictly necessary since we use _wp_specialchars() below
|
||||
$extra = json_encode( $this->get_container_extra_data(), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT );
|
||||
} else {
|
||||
$extra = json_encode( $this->get_container_extra_data() );
|
||||
}
|
||||
?>
|
||||
<div
|
||||
class="tiled-gallery type-<?php echo $this->type; ?> tiled-gallery-unresized"
|
||||
data-original-width="<?php echo esc_attr( Jetpack_Tiled_Gallery::get_content_width() ); ?>"
|
||||
<?php if ( isset( $extra ) ): ?>
|
||||
data-carousel-extra='<?php echo _wp_specialchars( wp_check_invalid_utf8( $extra ), ENT_QUOTES, false, true ); ?>'
|
||||
<?php endif; ?>
|
||||
itemscope itemtype="http://schema.org/ImageGallery"
|
||||
>
|
||||
<?php $this->template( "$this->type-layout", $context ); ?>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
$this->template( 'square-layout', $context );
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<?php
|
||||
// See https://github.com/Automattic/jetpack/issues/2765
|
||||
$fuzzy_image_meta = $item->fuzzy_image_meta();
|
||||
if ( isset( $fuzzy_image_meta['keywords'] ) ) {
|
||||
unset( $fuzzy_image_meta['keywords'] );
|
||||
}
|
||||
|
||||
if ( defined( 'JSON_HEX_AMP' ) ) {
|
||||
// see shortcodes/slideshow.php
|
||||
// This is nice to have, but not strictly necessary since we use _wp_specialchars() below
|
||||
$fuzzy_image_meta = json_encode( array_map( 'strval', $fuzzy_image_meta ), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT );
|
||||
} else {
|
||||
$fuzzy_image_meta = json_encode( array_map( 'strval', $fuzzy_image_meta ) );
|
||||
}
|
||||
?>
|
||||
data-attachment-id="<?php echo esc_attr( $item->image->ID ); ?>"
|
||||
data-orig-file="<?php echo esc_url( wp_get_attachment_url( $item->image->ID ) ); ?>"
|
||||
data-orig-size="<?php echo esc_attr( $item->meta_width() ); ?>,<?php echo esc_attr( $item->meta_height() ); ?>"
|
||||
data-comments-opened="<?php echo esc_attr( comments_open( $item->image->ID ) ); ?>"
|
||||
data-image-meta="<?php echo _wp_specialchars( wp_check_invalid_utf8( $fuzzy_image_meta ), ENT_QUOTES, false, true ); ?>"
|
||||
data-image-title="<?php echo esc_attr( wptexturize( $item->image->post_title ) ); ?>"
|
||||
data-image-description="<?php echo esc_attr( wpautop( wptexturize( $item->image->post_content ) ) ); ?>"
|
||||
data-medium-file="<?php echo esc_url( $item->medium_file() ); ?>"
|
||||
data-large-file="<?php echo esc_url( $item->large_file() ); ?>"
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?php
|
||||
$add_link = 'none' !== $this->link;
|
||||
|
||||
// We do this for accessibility. Titles without alt's break screen readers.
|
||||
if ( empty( $item->image_alt ) && ! empty( $item->image_title ) ) {
|
||||
$item->image_alt = $item->image_title;
|
||||
}
|
||||
?>
|
||||
<div class="tiled-gallery-item<?php if ( isset( $item->size ) ) echo " tiled-gallery-item-$item->size"; ?>" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<?php if ( $add_link ): ?>
|
||||
<a href="<?php echo $item->link; ?>" border="0" itemprop="url">
|
||||
<?php endif; ?>
|
||||
<meta itemprop="width" content="<?php echo esc_attr( $item->image->width ); ?>">
|
||||
<meta itemprop="height" content="<?php echo esc_attr( $item->image->height ); ?>">
|
||||
<img
|
||||
<?php $this->partial( 'carousel-image-args', array( 'item' => $item ) ); ?>
|
||||
src="<?php echo esc_url( $item->img_src ); ?>"
|
||||
width="<?php echo esc_attr( $item->image->width ); ?>"
|
||||
height="<?php echo esc_attr( $item->image->height ); ?>"
|
||||
data-original-width="<?php echo esc_attr( $item->image->width ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $item->image->height ); ?>"
|
||||
itemprop="http://schema.org/image"
|
||||
title="<?php echo esc_attr( $item->image_title ); ?>"
|
||||
alt="<?php echo esc_attr( $item->image_alt ); ?>"
|
||||
style="width: <?php echo esc_attr( $item->image->width ); ?>px; height: <?php echo esc_attr( $item->image->height ); ?>px;"
|
||||
/>
|
||||
<?php if ( $add_link ): ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $this->grayscale == true ): ?>
|
||||
<?php if ( $add_link ): ?>
|
||||
<a href="<?php echo $item->link; ?>" border="0" itemprop="url">
|
||||
<?php endif; ?>
|
||||
<meta itemprop="width" content="<?php echo esc_attr( $item->image->width ); ?>">
|
||||
<meta itemprop="height" content="<?php echo esc_attr( $item->image->height ); ?>">
|
||||
<img
|
||||
class="grayscale"
|
||||
src="<?php echo esc_url( $item->img_src_grayscale ); ?>"
|
||||
width="<?php echo esc_attr( $item->image->width ); ?>"
|
||||
height="<?php echo esc_attr( $item->image->height ); ?>"
|
||||
data-original-width="<?php echo esc_attr( $item->image->width ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $item->image->height ); ?>"
|
||||
itemprop="http://schema.org/image"
|
||||
title="<?php echo esc_attr( $item->image_title ); ?>"
|
||||
align="left"
|
||||
alt="<?php echo esc_attr( $item->image_alt ); ?>"
|
||||
style="width: <?php echo esc_attr( $item->image->width ); ?>px; height: <?php echo esc_attr( $item->image->height ); ?>px;"
|
||||
/>
|
||||
<?php if ( $add_link ): ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( trim( $item->image->post_excerpt ) ): ?>
|
||||
<div class="tiled-gallery-caption" itemprop="caption description">
|
||||
<?php echo wptexturize( $item->image->post_excerpt ); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<?php
|
||||
foreach ( $rows as $row ): ?>
|
||||
<div
|
||||
class="gallery-row"
|
||||
style="width: <?php echo esc_attr( $row->width ); ?>px; height: <?php echo esc_attr( $row->height ); ?>px;"
|
||||
data-original-width="<?php echo esc_attr( $row->width ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $row->height ); ?>"
|
||||
|
||||
>
|
||||
<?php foreach ( $row->groups as $group ): ?>
|
||||
<div
|
||||
class="gallery-group images-<?php echo esc_attr( count( $group->images ) ); ?>"
|
||||
style="width: <?php echo esc_attr( $group->width ); ?>px; height: <?php echo esc_attr( $group->height ); ?>px;"
|
||||
data-original-width="<?php echo esc_attr( $group->width ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $group->height ); ?>"
|
||||
>
|
||||
<?php foreach( $group->items( $needs_attachment_link, $grayscale ) as $item ): ?>
|
||||
<?php $this->partial( 'item', array( 'item' => $item, 'link' => $link ) ); ?>
|
||||
<?php endforeach; ?>
|
||||
</div> <!-- close group -->
|
||||
<?php endforeach; ?>
|
||||
</div> <!-- close row -->
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
foreach ( $rows as $row ): ?>
|
||||
<div class="gallery-row"
|
||||
style="width: <?php echo esc_attr( $row->width ); ?>px; height: <?php echo esc_attr( $row->height ); ?>px;"
|
||||
data-original-width="<?php echo esc_attr( $row->width ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $row->height ); ?>"
|
||||
>
|
||||
<?php $add_link = 'none' !== $link; ?>
|
||||
<?php foreach ( $row->images as $item ): ?>
|
||||
<div class="gallery-group"
|
||||
style="width: <?php echo esc_attr( $row->group_size ); ?>px; height: <?php echo esc_attr( $row->group_size ); ?>px;"
|
||||
data-original-width="<?php echo esc_attr( $row->group_size ); ?>"
|
||||
data-original-height="<?php echo esc_attr( $row->group_size ); ?>"
|
||||
>
|
||||
<?php $this->partial( 'item', array( 'item' => $item, 'link' => $link ) ); ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?php
|
||||
include_once dirname( __FILE__ ) . '/tiled-gallery-square.php';
|
||||
|
||||
class Jetpack_Tiled_Gallery_Layout_Circle extends Jetpack_Tiled_Gallery_Layout_Square {
|
||||
protected $type = 'circle';
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<?php
|
||||
abstract class Jetpack_Tiled_Gallery_Item {
|
||||
public $image;
|
||||
|
||||
public function __construct( $attachment_image, $needs_attachment_link, $grayscale ) {
|
||||
$this->image = $attachment_image;
|
||||
$this->grayscale = $grayscale;
|
||||
|
||||
$this->image_title = $this->image->post_title;
|
||||
|
||||
$this->image_alt = get_post_meta( $this->image->ID, '_wp_attachment_image_alt', true );
|
||||
// If no Alt value, use the caption
|
||||
if ( empty( $this->image_alt ) && ! empty( $this->image->post_excerpt ) ) {
|
||||
$this->image_alt = trim( strip_tags( $this->image->post_excerpt ) );
|
||||
}
|
||||
// If still no Alt value, use the title
|
||||
if ( empty( $this->image_alt ) && ! empty( $this->image->post_title ) ) {
|
||||
$this->image_alt = trim( strip_tags( $this->image->post_title ) );
|
||||
}
|
||||
|
||||
$this->orig_file = wp_get_attachment_url( $this->image->ID );
|
||||
$this->link = $needs_attachment_link ? get_attachment_link( $this->image->ID ) : $this->orig_file;
|
||||
|
||||
$this->img_src = add_query_arg( array( 'w' => $this->image->width, 'h' => $this->image->height, 'crop' => true ), $this->orig_file );
|
||||
|
||||
}
|
||||
|
||||
public function fuzzy_image_meta() {
|
||||
$meta = wp_get_attachment_metadata( $this->image->ID );
|
||||
$img_meta = ( ! empty( $meta['image_meta'] ) ) ? (array) $meta['image_meta'] : array();
|
||||
if ( ! empty( $img_meta ) ) {
|
||||
foreach ( $img_meta as $k => $v ) {
|
||||
if ( 'latitude' == $k || 'longitude' == $k )
|
||||
unset( $img_meta[$k] );
|
||||
}
|
||||
}
|
||||
|
||||
return $img_meta;
|
||||
}
|
||||
|
||||
public function meta_width() {
|
||||
$meta = wp_get_attachment_metadata( $this->image->ID );
|
||||
return isset( $meta['width'] ) ? intval( $meta['width'] ) : '';
|
||||
}
|
||||
|
||||
public function meta_height() {
|
||||
$meta = wp_get_attachment_metadata( $this->image->ID );
|
||||
return isset( $meta['height'] ) ? intval( $meta['height'] ) : '';
|
||||
}
|
||||
|
||||
public function medium_file() {
|
||||
$medium_file_info = wp_get_attachment_image_src( $this->image->ID, 'medium' );
|
||||
$medium_file = isset( $medium_file_info[0] ) ? $medium_file_info[0] : '';
|
||||
return $medium_file;
|
||||
}
|
||||
|
||||
public function large_file() {
|
||||
$large_file_info = wp_get_attachment_image_src( $this->image->ID, 'large' );
|
||||
$large_file = isset( $large_file_info[0] ) ? $large_file_info[0] : '';
|
||||
return $large_file;
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Rectangular_Item extends Jetpack_Tiled_Gallery_Item {
|
||||
public function __construct( $attachment_image, $needs_attachment_link, $grayscale ) {
|
||||
parent::__construct( $attachment_image, $needs_attachment_link, $grayscale );
|
||||
$this->img_src_grayscale = jetpack_photon_url( $this->img_src, array( 'filter' => 'grayscale' ) );
|
||||
|
||||
$this->size = 'large';
|
||||
|
||||
if ( $this->image->width < 250 )
|
||||
$this->size = 'small';
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Square_Item extends Jetpack_Tiled_Gallery_Item {
|
||||
public function __construct( $attachment_image, $needs_attachment_link, $grayscale ) {
|
||||
parent::__construct( $attachment_image, $needs_attachment_link, $grayscale );
|
||||
$this->img_src_grayscale = jetpack_photon_url( $this->img_src, array( 'filter' => 'grayscale', 'resize' => array( $this->image->width, $this->image->height ) ) );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Circle_Item extends Jetpack_Tiled_Gallery_Square_Item {
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<?php
|
||||
abstract class Jetpack_Tiled_Gallery_Layout {
|
||||
// Template whitelist
|
||||
private static $templates = array( 'carousel-container', 'circle-layout', 'rectangular-layout', 'square-layout' );
|
||||
private static $partials = array( 'carousel-image-args', 'item' );
|
||||
|
||||
protected $type; // Defined in child classes
|
||||
public $attachments;
|
||||
public $link;
|
||||
public $grayscale;
|
||||
public $columns;
|
||||
public function __construct( $attachments, $link, $grayscale, $columns ) {
|
||||
|
||||
$this->attachments = $attachments;
|
||||
$this->link = $link;
|
||||
$this->needs_attachment_link = ! ( isset( $link ) && $link == 'file' );
|
||||
$this->grayscale = $grayscale;
|
||||
$this->columns = $columns;
|
||||
}
|
||||
|
||||
public function HTML( $context = array() ) {
|
||||
// Render the carousel container template, which will take the
|
||||
// appropriate strategy to fill it
|
||||
ob_start();
|
||||
$this->template( 'carousel-container', array_merge( $context, array(
|
||||
'attachments' => $this->attachments,
|
||||
'link' => $this->link,
|
||||
'needs_attachment_link' => $this->needs_attachment_link,
|
||||
'grayscale' => $this->grayscale
|
||||
) ) );
|
||||
$html = ob_get_clean();
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
private function template( $name, $context = null ) {
|
||||
if ( ! in_array( $name, self::$templates ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( isset( $context ) ) {
|
||||
extract( $context );
|
||||
}
|
||||
|
||||
require dirname( __FILE__ ) . "/templates/$name.php";
|
||||
}
|
||||
|
||||
private function partial( $name, $context = null ) {
|
||||
if ( ! in_array( $name, self::$partials ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( isset( $context ) ) {
|
||||
extract( $context );
|
||||
}
|
||||
|
||||
require dirname( __FILE__ ) . "/templates/partials/$name.php";
|
||||
}
|
||||
|
||||
protected function get_container_extra_data() {
|
||||
global $post;
|
||||
|
||||
$blog_id = (int) get_current_blog_id();
|
||||
|
||||
if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
|
||||
$likes_blog_id = $blog_id;
|
||||
} else {
|
||||
$likes_blog_id = Jetpack_Options::get_option( 'id' );
|
||||
}
|
||||
|
||||
if ( class_exists( 'Jetpack_Carousel' ) || in_array( 'carousel', Jetpack::get_active_modules() ) || 'carousel' == $this->link ) {
|
||||
$extra_data = array( 'blog_id' => $blog_id, 'permalink' => get_permalink( isset( $post->ID ) ? $post->ID : 0 ), 'likes_blog_id' => $likes_blog_id );
|
||||
} else {
|
||||
$extra_data = null;
|
||||
}
|
||||
|
||||
return $extra_data;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<?php
|
||||
require_once dirname( __FILE__ ) . '/tiled-gallery-layout.php';
|
||||
require_once dirname( __FILE__ ) . '/tiled-gallery-shape.php';
|
||||
require_once dirname( __FILE__ ) . '/tiled-gallery-item.php';
|
||||
|
||||
class Jetpack_Tiled_Gallery_Layout_Rectangular extends Jetpack_Tiled_Gallery_Layout {
|
||||
protected $type = 'rectangular';
|
||||
|
||||
public function HTML( $context = array() ) {
|
||||
$grouper = new Jetpack_Tiled_Gallery_Grouper( $this->attachments );
|
||||
Jetpack_Tiled_Gallery_Shape::reset_last_shape();
|
||||
|
||||
return parent::HTML( array( 'rows' => $grouper->grouped_images ) );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Layout_Columns extends Jetpack_Tiled_Gallery_Layout {
|
||||
protected $type = 'rectangular'; // It doesn't need separate template for now
|
||||
|
||||
public function HTML( $context = array() ) {
|
||||
$grouper = new Jetpack_Tiled_Gallery_Grouper( $this->attachments, array( 'Three_Columns', 'Two' ) );
|
||||
|
||||
return parent::HTML( array( 'rows' => $grouper->grouped_images ) );
|
||||
}
|
||||
}
|
||||
|
||||
// Alias
|
||||
class Jetpack_Tiled_Gallery_Layout_Rectangle extends Jetpack_Tiled_Gallery_Layout_Rectangular {}
|
||||
|
||||
// Image grouping and HTML generation logic
|
||||
class Jetpack_Tiled_Gallery_Grouper {
|
||||
public $margin = 4;
|
||||
|
||||
// This list is ordered. If you put a shape that's likely to occur on top, it will happen all the time.
|
||||
public $shapes = array(
|
||||
'Reverse_Symmetric_Row',
|
||||
'Long_Symmetric_Row',
|
||||
'Symmetric_Row',
|
||||
'One_Three',
|
||||
'Three_One',
|
||||
'One_Two',
|
||||
'Five',
|
||||
'Four',
|
||||
'Three',
|
||||
'Two_One',
|
||||
'Panoramic'
|
||||
);
|
||||
|
||||
public function __construct( $attachments, $shapes = array() ) {
|
||||
$content_width = Jetpack_Tiled_Gallery::get_content_width();
|
||||
$ua_info = new Jetpack_User_Agent_Info();
|
||||
|
||||
$this->overwrite_shapes( $shapes );
|
||||
$this->last_shape = '';
|
||||
$this->images = $this->get_images_with_sizes( $attachments );
|
||||
$this->grouped_images = $this->get_grouped_images();
|
||||
$this->apply_content_width( $content_width );
|
||||
}
|
||||
|
||||
public function overwrite_shapes( $shapes ) {
|
||||
if ( ! empty( $shapes ) ) {
|
||||
$this->shapes = $shapes;
|
||||
}
|
||||
}
|
||||
|
||||
public function get_current_row_size() {
|
||||
$images_left = count( $this->images );
|
||||
if ( $images_left < 3 )
|
||||
return array_fill( 0, $images_left, 1 );
|
||||
|
||||
foreach ( $this->shapes as $shape_name ) {
|
||||
$class_name = "Jetpack_Tiled_Gallery_$shape_name";
|
||||
$shape = new $class_name( $this->images );
|
||||
if ( $shape->is_possible() ) {
|
||||
Jetpack_Tiled_Gallery_Shape::set_last_shape( $class_name );
|
||||
return $shape->shape;
|
||||
}
|
||||
}
|
||||
|
||||
Jetpack_Tiled_Gallery_Shape::set_last_shape( 'Two' );
|
||||
return array( 1, 1 );
|
||||
}
|
||||
|
||||
public function get_images_with_sizes( $attachments ) {
|
||||
$images_with_sizes = array();
|
||||
|
||||
foreach ( $attachments as $image ) {
|
||||
$meta = wp_get_attachment_metadata( $image->ID );
|
||||
$image->width_orig = ( isset( $meta['width'] ) && $meta['width'] > 0 )? $meta['width'] : 1;
|
||||
$image->height_orig = ( isset( $meta['height'] ) && $meta['height'] > 0 )? $meta['height'] : 1;
|
||||
$image->ratio = $image->width_orig / $image->height_orig;
|
||||
$image->ratio = $image->ratio? $image->ratio : 1;
|
||||
$images_with_sizes[] = $image;
|
||||
}
|
||||
|
||||
return $images_with_sizes;
|
||||
}
|
||||
|
||||
public function read_row() {
|
||||
$vector = $this->get_current_row_size();
|
||||
|
||||
$row = array();
|
||||
foreach ( $vector as $group_size ) {
|
||||
$row[] = new Jetpack_Tiled_Gallery_Group( array_splice( $this->images, 0, $group_size ) );
|
||||
}
|
||||
|
||||
return $row;
|
||||
}
|
||||
|
||||
public function get_grouped_images() {
|
||||
$grouped_images = array();
|
||||
|
||||
while( !empty( $this->images ) ) {
|
||||
$grouped_images[] = new Jetpack_Tiled_Gallery_Row( $this->read_row() );
|
||||
}
|
||||
|
||||
return $grouped_images;
|
||||
}
|
||||
|
||||
// todo: split in functions
|
||||
// todo: do not stretch images
|
||||
public function apply_content_width( $width ) {
|
||||
foreach ( $this->grouped_images as $row ) {
|
||||
$row->width = $width;
|
||||
$row->raw_height = 1 / $row->ratio * ( $width - $this->margin * ( count( $row->groups ) - $row->weighted_ratio ) );
|
||||
$row->height = round( $row->raw_height );
|
||||
|
||||
$this->calculate_group_sizes( $row );
|
||||
}
|
||||
}
|
||||
|
||||
public function calculate_group_sizes( $row ) {
|
||||
// Storing the calculated group heights in an array for rounding them later while preserving their sum
|
||||
// This fixes the rounding error that can lead to a few ugly pixels sticking out in the gallery
|
||||
$group_widths_array = array();
|
||||
foreach ( $row->groups as $group ) {
|
||||
$group->height = $row->height;
|
||||
// Storing the raw calculations in a separate property to prevent rounding errors from cascading down and for diagnostics
|
||||
$group->raw_width = ( $row->raw_height - $this->margin * count( $group->images ) ) * $group->ratio + $this->margin;
|
||||
$group_widths_array[] = $group->raw_width;
|
||||
}
|
||||
$rounded_group_widths_array = Jetpack_Constrained_Array_Rounding::get_rounded_constrained_array( $group_widths_array, $row->width );
|
||||
|
||||
foreach ( $row->groups as $group ) {
|
||||
$group->width = array_shift( $rounded_group_widths_array );
|
||||
$this->calculate_image_sizes( $group );
|
||||
}
|
||||
}
|
||||
|
||||
public function calculate_image_sizes( $group ) {
|
||||
// Storing the calculated image heights in an array for rounding them later while preserving their sum
|
||||
// This fixes the rounding error that can lead to a few ugly pixels sticking out in the gallery
|
||||
$image_heights_array = array();
|
||||
foreach ( $group->images as $image ) {
|
||||
$image->width = $group->width - $this->margin;
|
||||
// Storing the raw calculations in a separate property for diagnostics
|
||||
$image->raw_height = ( $group->raw_width - $this->margin ) / $image->ratio;
|
||||
$image_heights_array[] = $image->raw_height;
|
||||
}
|
||||
|
||||
$image_height_sum = $group->height - count( $image_heights_array ) * $this->margin;
|
||||
$rounded_image_heights_array = Jetpack_Constrained_Array_Rounding::get_rounded_constrained_array( $image_heights_array, $image_height_sum );
|
||||
|
||||
foreach ( $group->images as $image ) {
|
||||
$image->height = array_shift( $rounded_image_heights_array );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Row {
|
||||
public function __construct( $groups ) {
|
||||
$this->groups = $groups;
|
||||
$this->ratio = $this->get_ratio();
|
||||
$this->weighted_ratio = $this->get_weighted_ratio();
|
||||
}
|
||||
|
||||
public function get_ratio() {
|
||||
$ratio = 0;
|
||||
foreach ( $this->groups as $group ) {
|
||||
$ratio += $group->ratio;
|
||||
}
|
||||
return $ratio > 0? $ratio : 1;
|
||||
}
|
||||
|
||||
public function get_weighted_ratio() {
|
||||
$weighted_ratio = 0;
|
||||
foreach ( $this->groups as $group ) {
|
||||
$weighted_ratio += $group->ratio * count( $group->images );
|
||||
}
|
||||
return $weighted_ratio > 0 ? $weighted_ratio : 1;
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Group {
|
||||
public function __construct( $images ) {
|
||||
$this->images = $images;
|
||||
$this->ratio = $this->get_ratio();
|
||||
}
|
||||
|
||||
public function get_ratio() {
|
||||
$ratio = 0;
|
||||
foreach ( $this->images as $image ) {
|
||||
if ( $image->ratio )
|
||||
$ratio += 1/$image->ratio;
|
||||
}
|
||||
if ( !$ratio )
|
||||
return 1;
|
||||
|
||||
return 1/$ratio;
|
||||
}
|
||||
|
||||
public function items( $needs_attachment_link, $grayscale ) {
|
||||
$items = array();
|
||||
foreach ( $this->images as $image ) {
|
||||
$items[] = new Jetpack_Tiled_Gallery_Rectangular_Item( $image, $needs_attachment_link, $grayscale );
|
||||
}
|
||||
|
||||
return $items;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<?php
|
||||
class Jetpack_Tiled_Gallery_Shape {
|
||||
static $shapes_used = array();
|
||||
|
||||
public function __construct( $images ) {
|
||||
$this->images = $images;
|
||||
$this->images_left = count( $images );
|
||||
}
|
||||
|
||||
public function sum_ratios( $number_of_images = 3 ) {
|
||||
return array_sum( array_slice( wp_list_pluck( $this->images, 'ratio' ), 0, $number_of_images ) );
|
||||
}
|
||||
|
||||
public function next_images_are_symmetric() {
|
||||
return $this->images_left > 2 && $this->images[0]->ratio == $this->images[2]->ratio;
|
||||
}
|
||||
|
||||
public function is_not_as_previous( $n = 1 ) {
|
||||
return ! in_array( get_class( $this ), array_slice( self::$shapes_used, -$n ) );
|
||||
}
|
||||
|
||||
public function is_wide_theme() {
|
||||
return Jetpack::get_content_width() > 1000;
|
||||
}
|
||||
|
||||
public function image_is_landscape( $image ) {
|
||||
return $image->ratio >= 1 && $image->ratio < 2;
|
||||
}
|
||||
|
||||
public function image_is_portrait( $image ) {
|
||||
return $image->ratio < 1;
|
||||
}
|
||||
|
||||
public function image_is_panoramic( $image ) {
|
||||
return $image->ratio >= 2;
|
||||
}
|
||||
|
||||
public static function set_last_shape( $last_shape ) {
|
||||
self::$shapes_used[] = $last_shape;
|
||||
}
|
||||
|
||||
public static function reset_last_shape() {
|
||||
self::$shapes_used = array();
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Three extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 1, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
$ratio = $this->sum_ratios( 3 );
|
||||
$has_enough_images = $this->images_left >= 3 && ! in_array( $this->images_left, array( 4, 6 ) );
|
||||
return $has_enough_images && $this->is_not_as_previous( 3 ) &&
|
||||
( ( $ratio < 2.5 ) || ( $ratio < 5 && $this->next_images_are_symmetric() ) || $this->is_wide_theme() );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Four extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 1, 1, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous() &&
|
||||
(
|
||||
( $this->sum_ratios( 4 ) < 3.5 && $this->images_left > 5 ) ||
|
||||
( $this->sum_ratios( 4 ) < 7 && $this->images_left == 4 )
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Five extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 1, 1, 1, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_wide_theme() && $this->is_not_as_previous() && $this->sum_ratios( 5 ) < 5 &&
|
||||
( $this->images_left == 5 || ( $this->images_left != 10 && $this->images_left > 6 ) );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Two_One extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 2, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 3 ) && $this->images_left >= 2 &&
|
||||
$this->images[2]->ratio < 1.6 && $this->images[0]->ratio >= 0.9 && $this->images[0]->ratio < 2.0 && $this->images[1]->ratio >= 0.9 && $this->images[1]->ratio < 2.0;
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_One_Two extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 2 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 3 ) && $this->images_left >= 2 &&
|
||||
$this->images[0]->ratio < 1.6 && $this->images[1]->ratio >= 0.9 && $this->images[1]->ratio < 2.0 && $this->images[2]->ratio >= 0.9 && $this->images[2]->ratio < 2.0;
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_One_Three extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 3 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 3 ) && $this->images_left > 3 &&
|
||||
$this->image_is_portrait( $this->images[0] ) &&
|
||||
$this->image_is_landscape( $this->images[1] ) &&
|
||||
$this->image_is_landscape( $this->images[2] ) &&
|
||||
$this->image_is_landscape( $this->images[3] );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Three_One extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 3, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 3 ) && $this->images_left > 3 &&
|
||||
$this->image_is_portrait( $this->images[3] ) &&
|
||||
$this->image_is_landscape( $this->images[0] ) &&
|
||||
$this->image_is_landscape( $this->images[1] ) &&
|
||||
$this->image_is_landscape( $this->images[2] );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Panoramic extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->image_is_panoramic( $this->images[0] );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Symmetric_Row extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 1, 2, 1 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 5 ) &&
|
||||
$this->images_left > 3 &&
|
||||
$this->images_left != 5 &&
|
||||
$this->image_is_portrait( $this->images[0] ) &&
|
||||
$this->image_is_landscape( $this->images[1] ) &&
|
||||
$this->image_is_landscape( $this->images[2] ) &&
|
||||
$this->image_is_portrait( $this->images[3] );
|
||||
}
|
||||
}
|
||||
class Jetpack_Tiled_Gallery_Reverse_Symmetric_Row extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 2, 1, 2 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 5 ) && $this->images_left > 15 &&
|
||||
$this->image_is_landscape( $this->images[0] ) &&
|
||||
$this->image_is_landscape( $this->images[1] ) &&
|
||||
$this->image_is_portrait( $this->images[2] ) &&
|
||||
$this->image_is_landscape( $this->images[3] ) &&
|
||||
$this->image_is_landscape( $this->images[4] );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Long_Symmetric_Row extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array( 3, 1, 3 );
|
||||
|
||||
public function is_possible() {
|
||||
return $this->is_not_as_previous( 5 ) && $this->images_left > 15 &&
|
||||
$this->image_is_landscape( $this->images[0] ) &&
|
||||
$this->image_is_landscape( $this->images[1] ) &&
|
||||
$this->image_is_landscape( $this->images[2] ) &&
|
||||
$this->image_is_portrait( $this->images[3] ) &&
|
||||
$this->image_is_landscape( $this->images[4] ) &&
|
||||
$this->image_is_landscape( $this->images[5] ) &&
|
||||
$this->image_is_landscape( $this->images[6] );
|
||||
}
|
||||
}
|
||||
|
||||
class Jetpack_Tiled_Gallery_Three_Columns extends Jetpack_Tiled_Gallery_Shape {
|
||||
public $shape = array();
|
||||
|
||||
public function __construct( $images ) {
|
||||
parent::__construct( $images );
|
||||
|
||||
$total_ratio = $this->sum_ratios( $this->images_left );
|
||||
$approximate_column_ratio = $total_ratio / 3;
|
||||
$column_one_images = $column_two_images = $column_three_images = $sum = 0;
|
||||
|
||||
foreach ( $this->images as $image ) {
|
||||
if ( $sum <= $approximate_column_ratio ) {
|
||||
$column_one_images++;
|
||||
}
|
||||
|
||||
if ( $sum > $approximate_column_ratio && $sum <= 2 * $approximate_column_ratio ) {
|
||||
$column_two_images++;
|
||||
}
|
||||
$sum += $image->ratio;
|
||||
}
|
||||
|
||||
$column_three_images = $this->images_left - $column_two_images - $column_one_images;
|
||||
|
||||
if ( $column_one_images ) {
|
||||
$this->shape[] = $column_one_images;
|
||||
}
|
||||
|
||||
if ( $column_two_images ) {
|
||||
$this->shape[] = $column_two_images;
|
||||
}
|
||||
|
||||
if ( $column_three_images ) {
|
||||
$this->shape[] = $column_three_images;
|
||||
}
|
||||
}
|
||||
|
||||
public function is_possible() {
|
||||
return ! empty( $this->shape );
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<?php
|
||||
require_once dirname( __FILE__ ) . '/tiled-gallery-layout.php';
|
||||
require_once dirname( __FILE__ ) . '/tiled-gallery-item.php';
|
||||
|
||||
class Jetpack_Tiled_Gallery_Layout_Square extends Jetpack_Tiled_Gallery_Layout {
|
||||
protected $type = 'square';
|
||||
|
||||
private function compute_items() {
|
||||
$content_width = Jetpack_Tiled_Gallery::get_content_width();
|
||||
$images_per_row = $this->columns;
|
||||
$margin = 2;
|
||||
|
||||
$margin_space = ( $images_per_row * $margin ) * 2;
|
||||
$size = floor( ( $content_width - $margin_space ) / $images_per_row );
|
||||
$img_size = $remainder_size = $size;
|
||||
$remainder = count( $this->attachments ) % $images_per_row;
|
||||
if ( $remainder > 0 ) {
|
||||
$remainder_space = ( $remainder * $margin ) * 2;
|
||||
$remainder_size = floor( ( $content_width - $remainder_space ) / $remainder );
|
||||
}
|
||||
|
||||
$c = 1;
|
||||
$items_in_row = 0;
|
||||
$rows = array();
|
||||
$row = new stdClass;
|
||||
$row->images = array();
|
||||
foreach( $this->attachments as $image ) {
|
||||
if ( $remainder > 0 && $c <= $remainder ) {
|
||||
$img_size = $remainder_size;
|
||||
} else {
|
||||
$img_size = $size;
|
||||
}
|
||||
|
||||
$image->width = $image->height = $img_size;
|
||||
|
||||
$item = new Jetpack_Tiled_Gallery_Square_Item( $image, $this->needs_attachment_link, $this->grayscale );
|
||||
|
||||
$row->images[] = $item;
|
||||
$c ++;
|
||||
$items_in_row++;
|
||||
|
||||
if ( $images_per_row === $items_in_row || $remainder + 1 == $c ) {
|
||||
$rows[] = $row;
|
||||
$items_in_row = 0;
|
||||
|
||||
$row->height = $img_size + $margin * 2;
|
||||
$row->width = $content_width;
|
||||
$row->group_size = $img_size + 2 * $margin;
|
||||
|
||||
$row = new stdClass;
|
||||
$row->images = array();
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! empty( $row->images ) ) {
|
||||
$row->height = $img_size + $margin * 2;
|
||||
$row->width = $content_width;
|
||||
$row->group_size = $img_size + 2 * $margin;
|
||||
|
||||
$rows[] = $row;
|
||||
}
|
||||
|
||||
return $rows;
|
||||
}
|
||||
|
||||
public function HTML( $context = array() ) {
|
||||
return parent::HTML( array( 'rows' => $this->compute_items() ) );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
/* =Tiled Gallery Default Styles
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery {
|
||||
clear: both;
|
||||
margin: 0 0 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tiled-gallery img {
|
||||
margin: 2px !important; /* Ensure that this value isn't overridden by themes that give content images blanket margins */
|
||||
}
|
||||
.tiled-gallery .gallery-group {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item {
|
||||
float: left;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: inherit; /* prevents ie8 bug with inline width styles */
|
||||
}
|
||||
.tiled-gallery .gallery-row {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item a { /* Needs to reset some properties for theme compatibility */
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item img,
|
||||
.tiled-gallery .tiled-gallery-item img:hover { /* Needs to reset some properties for theme compatibility */
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tiled-gallery-caption { /* Captions */
|
||||
background: #eee;
|
||||
background: rgba( 255,255,255,0.8 );
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-indent: 10px;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item-small .tiled-gallery-caption { /* Smaller captions */
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Hide galleries in widgets until they've been resized to fit.
|
||||
Gallery widgets are almost guaranteed to need resizing, and
|
||||
the jump is a little more obvious than galleries in content. */
|
||||
.widget-gallery .tiled-gallery-unresized {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* =Greyscale
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery .tiled-gallery-item img.grayscale {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tiled-gallery .tiled-gallery-item img.grayscale:hover {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =Circles Layout
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tiled-gallery.type-circle .tiled-gallery-item img {
|
||||
border-radius: 50% !important; /* Ensure that circles are displayed in themes that add border-radius to all images as a default */
|
||||
}
|
||||
.tiled-gallery.type-circle .tiled-gallery-caption {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/* jshint onevar:false, smarttabs:true */
|
||||
|
||||
( function($) {
|
||||
|
||||
function TiledGalleryCollection() {
|
||||
this.galleries = [];
|
||||
this.findAndSetupNewGalleries();
|
||||
}
|
||||
|
||||
TiledGalleryCollection.prototype.findAndSetupNewGalleries = function() {
|
||||
var self = this;
|
||||
$( '.tiled-gallery.tiled-gallery-unresized' ).each( function() {
|
||||
self.galleries.push( new TiledGallery( $( this ) ) );
|
||||
} );
|
||||
};
|
||||
|
||||
TiledGalleryCollection.prototype.resizeAll = function() {
|
||||
$.each(this.galleries, function(i, gallery) {
|
||||
gallery.resize();
|
||||
} );
|
||||
};
|
||||
|
||||
function TiledGallery( galleryElem ) {
|
||||
this.gallery = galleryElem;
|
||||
|
||||
this.addCaptionEvents();
|
||||
|
||||
// Resize when initialized to fit the gallery to window dimensions
|
||||
this.resize();
|
||||
|
||||
// Displays the gallery and prevents it from being initialized again
|
||||
this.gallery.removeClass( 'tiled-gallery-unresized' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector for all resizeable elements inside a Tiled Gallery
|
||||
*/
|
||||
|
||||
TiledGallery.prototype.resizeableElementsSelector = '.gallery-row, .gallery-group, .tiled-gallery-item img';
|
||||
|
||||
/**
|
||||
* Story
|
||||
*/
|
||||
|
||||
TiledGallery.prototype.addCaptionEvents = function() {
|
||||
// Hide captions
|
||||
this.gallery.find( '.tiled-gallery-caption' ).hide();
|
||||
|
||||
// Add hover effects to bring the caption up and down for each item
|
||||
this.gallery.find( '.tiled-gallery-item' ).hover(
|
||||
function() { $( this ).find( '.tiled-gallery-caption' ).stop(true, true).slideDown( 'fast' ); },
|
||||
function() { $( this ).find( '.tiled-gallery-caption' ).stop(true, true).slideUp( 'fast' ); }
|
||||
);
|
||||
};
|
||||
|
||||
TiledGallery.prototype.getExtraDimension = function( el, attribute, mode ) {
|
||||
if ( mode === 'horizontal' ) {
|
||||
var left = ( attribute === 'border' ) ? 'borderLeftWidth' : attribute + 'Left';
|
||||
var right = ( attribute === 'border' ) ? 'borderRightWidth' : attribute + 'Right';
|
||||
return ( parseInt( el.css( left ), 10 ) || 0 ) + ( parseInt( el.css( right ), 10 ) || 0 );
|
||||
} else if ( mode === 'vertical' ) {
|
||||
var top = ( attribute === 'border' ) ? 'borderTopWidth' : attribute + 'Top';
|
||||
var bottom = ( attribute === 'border' ) ? 'borderBottomWidth' : attribute + 'Bottom';
|
||||
return ( parseInt( el.css( top ), 10 ) || 0 ) + ( parseInt( el.css( bottom ), 10 ) || 0 );
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
TiledGallery.prototype.resize = function() {
|
||||
// Resize everything in the gallery based on the ratio of the current content width
|
||||
// to the original content width;
|
||||
var originalWidth = this.gallery.data( 'original-width' );
|
||||
var currentWidth = this.gallery.parent().width();
|
||||
var resizeRatio = Math.min( 1, currentWidth / originalWidth );
|
||||
|
||||
var self = this;
|
||||
this.gallery.find( this.resizeableElementsSelector ).each( function () {
|
||||
var thisGalleryElement = $( this );
|
||||
|
||||
var marginWidth = self.getExtraDimension( thisGalleryElement, 'margin', 'horizontal' );
|
||||
var marginHeight = self.getExtraDimension( thisGalleryElement, 'margin', 'vertical' );
|
||||
|
||||
var paddingWidth = self.getExtraDimension( thisGalleryElement, 'padding', 'horizontal' );
|
||||
var paddingHeight = self.getExtraDimension( thisGalleryElement, 'padding', 'vertical' );
|
||||
|
||||
var borderWidth = self.getExtraDimension( thisGalleryElement, 'border', 'horizontal' );
|
||||
var borderHeight = self.getExtraDimension( thisGalleryElement, 'border', 'vertical' );
|
||||
|
||||
// Take all outer dimensions into account when resizing so that images
|
||||
// scale with constant empty space between them
|
||||
var outerWidth = thisGalleryElement.data( 'original-width' ) + paddingWidth + borderWidth + marginWidth;
|
||||
var outerHeight = thisGalleryElement.data( 'original-height' ) + paddingHeight + borderHeight + marginHeight;
|
||||
|
||||
// Subtract margins so that images don't overflow on small browser windows
|
||||
thisGalleryElement
|
||||
.width( Math.floor( resizeRatio * outerWidth ) - marginWidth )
|
||||
.height( Math.floor( resizeRatio * outerHeight ) - marginHeight );
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Resizing logic
|
||||
*/
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
|
||||
|
||||
function attachResizeInAnimationFrames( tiledGalleries ) {
|
||||
var resizing = false;
|
||||
var resizeTimeout = null;
|
||||
|
||||
function handleFrame() {
|
||||
tiledGalleries.resizeAll();
|
||||
if ( resizing ) {
|
||||
requestAnimationFrame( handleFrame );
|
||||
}
|
||||
}
|
||||
|
||||
$( window ).resize( function() {
|
||||
clearTimeout( resizeTimeout );
|
||||
|
||||
if ( ! resizing ) {
|
||||
requestAnimationFrame( handleFrame );
|
||||
}
|
||||
resizing = true;
|
||||
resizeTimeout = setTimeout( function() {
|
||||
resizing = false;
|
||||
}, 15 );
|
||||
} );
|
||||
}
|
||||
|
||||
function attachPlainResize( tiledGalleries ) {
|
||||
$( window ).resize( function() {
|
||||
tiledGalleries.resizeAll();
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Ready, set...
|
||||
*/
|
||||
|
||||
$( document ).ready( function() {
|
||||
var tiledGalleries = new TiledGalleryCollection();
|
||||
|
||||
$( 'body' ).on( 'post-load', function() {
|
||||
tiledGalleries.findAndSetupNewGalleries();
|
||||
} );
|
||||
$( document ).on( 'page-rendered.wpcom-newdash', function() {
|
||||
tiledGalleries.findAndSetupNewGalleries();
|
||||
} );
|
||||
|
||||
// Chrome is a unique snow flake and will start lagging on occasion
|
||||
// It helps if we only resize on animation frames
|
||||
//
|
||||
// For other browsers it seems like there is no lag even if we resize every
|
||||
// time there is an event
|
||||
if ( window.chrome && requestAnimationFrame ) {
|
||||
attachResizeInAnimationFrames( tiledGalleries );
|
||||
} else {
|
||||
attachPlainResize( tiledGalleries );
|
||||
}
|
||||
|
||||
if ( wp && wp.customize && wp.customizerHasPartialWidgetRefresh() ) {
|
||||
wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
|
||||
if ( wp.isJetpackWidgetPlaced( placement, 'gallery' ) ) {
|
||||
tiledGalleries.findAndSetupNewGalleries();
|
||||
}
|
||||
} );
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in a new issue