Skip to content

Commit 0beca16

Browse files
chriscoyierchriscoyier
committed
Merge pull request #1 from CSS-Tricks/master
making work with media uploader output
2 parents 564717a + 898012f commit 0beca16

File tree

4 files changed

+150
-91
lines changed

4 files changed

+150
-91
lines changed

‎js/picturefill-dev.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
2+
3+
(function( w ){
4+
5+
// Enable strict mode
6+
"use strict";
7+
8+
w.picturefill = function() {
9+
var ps = w.document.getElementsByTagName( "span" );
10+
11+
// Loop the pictures
12+
for( var i = 0, il = ps.length; i < il; i++ ){
13+
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
14+
15+
var sources = ps[ i ].getElementsByTagName( "span" ),
16+
matches = [];
17+
18+
// See if which sources match
19+
for( var j = 0, jl = sources.length; j < jl; j++ ){
20+
var media = sources[ j ].getAttribute( "data-media" );
21+
// if there's no media specified, OR w.matchMedia is supported
22+
if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
23+
matches.push( sources[ j ] );
24+
}
25+
}
26+
27+
// Find any existing img element in the picture element
28+
var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
29+
30+
if( matches.length ){
31+
var matchedEl = matches.pop();
32+
if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
33+
picImg = w.document.createElement( "img" );
34+
picImg.alt = ps[ i ].getAttribute( "data-alt" );
35+
}
36+
else if( matchedEl === picImg.parentNode ){
37+
// Skip further actions if the correct image is already in place
38+
continue;
39+
}
40+
41+
picImg.src = matchedEl.getAttribute( "data-src" );
42+
matchedEl.appendChild( picImg );
43+
picImg.removeAttribute("width");
44+
picImg.removeAttribute("height");
45+
}
46+
else if( picImg ){
47+
picImg.parentNode.removeChild( picImg );
48+
}
49+
}
50+
}
51+
};
52+
53+
// Run on resize and domready (w.load as a fallback)
54+
if( w.addEventListener ){
55+
w.addEventListener( "resize", w.picturefill, false );
56+
w.addEventListener( "DOMContentLoaded", function(){
57+
w.picturefill();
58+
// Run once only
59+
w.removeEventListener( "load", w.picturefill, false );
60+
}, false );
61+
w.addEventListener( "load", w.picturefill, false );
62+
}
63+
else if( w.attachEvent ){
64+
w.attachEvent( "onload", w.picturefill );
65+
}
66+
67+
}( this ));

‎readme.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
This plugin tells WordPress to create three additional sizes for images you upload. Then it outputs special HTML (via a shortcode) that works with the Picturefill library to achieve responsive images in content.
2+
3+
### Usage
4+
5+
[responsive imageid="12" size1="0" size2="500" size3="1000"]
6+
7+
### Prereqs
8+
9+
Make sure your current theme has
10+
11+
'add_theme_support( 'post-thumbnails' );'
12+
13+
in the `functions.php` file.
14+
15+
### Tutorial
16+
17+
Here: http://css-tricks.com/hassle-free-responsive-images-for-wordpress

‎readme.txt

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎wp-tevko-responsive-images.php

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,70 @@
11
<?php
22

3-
/*
4-
Plugin Name: WP Tevko Responsive Images
5-
Plugin URI: http://timevko.com
6-
Description: Fully responsive image solution using picturefill and the ID of your image.
7-
Version: 0.2.0
8-
Author: Tim Evko
9-
Author URI: http://timevko.com
10-
License: Creative Commons
11-
*/
12-
13-
14-
//first we get picturefill
15-
16-
function get_picturefill() {
17-
wp_enqueue_script( 'picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));
18-
}
19-
20-
21-
add_action('init','get_picturefill');
22-
23-
//add support for our desired image sizes - if you add to these, you may have to adjust your shortcode function
24-
add_image_size( 'large-img', 1000, 702);
25-
add_image_size( 'medium-img', 700, 372);
26-
add_image_size( 'small-img', 300, 200);
27-
28-
function getPictureSrcs($image, $mappings)
29-
{
30-
$arr = array();
31-
32-
foreach ($mappings as $size => $type)
33-
{
34-
$imageSrc = wp_get_attachment_image_src($image, $type);
35-
$arr[] ='<span data-src="'. $imageSrc[0] . ' "data-media="(min-width:'. $size .'px)"></span>';
36-
}
37-
return implode($arr);
38-
}
39-
40-
// Yes you can use it as a short code
41-
function responsiveShortcode( $atts ) {
42-
43-
44-
45-
extract( shortcode_atts( array(
46-
'imageid' => 1,
47-
// you can add more sizes for your shortcodes here
48-
'size1' => 0,
49-
'size2' => 600,
50-
'size3' => 1000,
51-
), $atts ) );
52-
53-
$mappings = array(
54-
$size1 => 'small-img',
55-
$size2 => 'medium-img',
56-
$size3 => 'large-img'
57-
);
58-
59-
return '<span data-picture>'
60-
. getPictureSrcs($imageid, $mappings) .
61-
'<noscript>' . wp_get_attachment_image( $imageid, $size2 ) . ' </noscript>
62-
</span>';
63-
}
64-
add_shortcode( 'responsive', 'responsiveShortcode' );
3+
/*
4+
Plugin Name: WP Tevko Responsive Images
5+
Plugin URI: http://timevko.com
6+
Description: Fully responsive image solution using picturefill and the ID of your image.
7+
Version: 0.2.0
8+
Author: Tim Evko
9+
Author URI: http://timevko.com
10+
License: Creative Commons
11+
*/
12+
13+
14+
// First we queue the polyfill
15+
function get_picturefill() {
16+
wp_enqueue_script('picturefill', plugins_url('/js/picturefill.js', __FILE__ ));
17+
}
18+
add_action('init', 'get_picturefill');
19+
20+
21+
// Add support for our desired image sizes - if you add to these, you may have to adjust your shortcode function
22+
// TODO: Add UI for adjusting?
23+
add_image_size('large-img', 1000, 702);
24+
add_image_size('medium-img', 700, 372);
25+
add_image_size('small-img', 300, 200);
26+
27+
28+
function getPictureSrcs($image, $mappings) {
29+
$arr = array();
30+
31+
foreach ($mappings as $size => $type) {
32+
$imageSrc = wp_get_attachment_image_src($image, $type);
33+
$arr[] ='<span data-src="'. $imageSrc[0] . ' "data-media="(min-width:'. $size .'px)"></span>';
34+
}
35+
return implode($arr);
36+
}
37+
38+
function responsiveShortcode($atts) {
39+
extract( shortcode_atts( array(
40+
'imageid' => 1,
41+
// You can add more sizes for your shortcodes here
42+
'size1' => 0,
43+
'size2' => 600,
44+
'size3' => 1000,
45+
), $atts ) );
46+
47+
$mappings = array(
48+
$size1 => 'small-img',
49+
$size2 => 'medium-img',
50+
$size3 => 'large-img'
51+
);
52+
53+
return
54+
'<span data-picture>'
55+
. getPictureSrcs($imageid, $mappings) .
56+
'<noscript>' . wp_get_attachment_image($imageid, $size2) . ' </noscript>
57+
</span>';
58+
}
59+
// TODO: It this the best name? responsive_img? picture?
60+
add_shortcode('responsive', 'responsiveShortcode');
61+
62+
// Alter Media Uploader output to output shortcode instead
63+
// TODO: Make optional?
64+
// TODO: Make this know what sizes are chosen, rather than hardcoded
65+
function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
66+
return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";
67+
}
68+
add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);
6569

6670
?>

0 commit comments

Comments
 (0)