Created
May 14, 2012 22:24
-
-
Save dcoxall/2697824 to your computer and use it in GitHub Desktop.
Use Riloadr and wordpress to create a theme that displays responsive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The names are used to fit into wordpress's naming convention | |
var featuredImage = new Riloadr({ | |
breakpoints: [ | |
{name: '-466x155', maxWidth: 466}, | |
{name: '-700x233', maxWidth: 700, minWidth: 467}, | |
{name: '-940x313', maxWidth: 940, minWidth: 701}, | |
{name: '', minWidth: 940} | |
] | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Declare the different multiple image resolutions | |
*/ | |
function prepare_theme() { | |
add_theme_support('post-thumbnails'); | |
add_image_size('full-feature', 1200, 400, true); | |
add_image_size('large-feature', 940, 313, true); | |
add_image_size('medium-feature', 700, 233, true); | |
add_image_size('mobile-feature', 466, 155, true); | |
} | |
add_action('after_setup_theme', 'prepare_theme'); | |
/** | |
* Load Wordpress's bundled jQuery, Riloadr and a breakpoints.js file to store the Riloadr config | |
*/ | |
function add_scripts() { | |
wp_enqueue_script( | |
'riloadr', | |
get_template_directory_uri() . 'jquery.riloadr.min.js', | |
array('jquery') | |
); | |
wp_enqueue_script( | |
'breakpoints', | |
get_template_directory_uri() . 'breakpoints.js', | |
array('riloadr') | |
); | |
} | |
add_action('wp_enqueue_scripts', 'add_scripts'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
<!-- Within the wordpress loop --> | |
<?php if (has_post_thumbnail()) : ?> | |
<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full-feature'); | |
$info = pathinfo($thumbnail[0]);?> | |
<a class="image" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"> | |
<img class="responsive" data-base="<?php echo $info['dirname']; ?>/" data-src="<?php echo $info['filename']; ?>{breakpoint-name}.<?php echo $info['extension']; ?>" /> | |
</a> | |
<?php endif; ?> | |
... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can omit the
data-base
attribute and set the full path on thedata-src
attribute: