Get different size images from gallery images WordPress
- SOLVED
Hello, I've asked this question previously and it expired early, plus I did not post much code which was probably not of any help.
<strong>MY PROBLEM</strong>
I'm using [[LINK href="http://fancyapps.com/fancybox/"]]fancyapps fancybox plugin[[/LINK]]. Which is working fine.
I have two types of fancybox styles I want to implement:
<strong>The first one is this...</strong>
$(".entry a").fancybox();
<a title="rc212_stoner_front" href="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN.jpg">
<img width="188" height="118" title="rc212_stoner_front" alt="rc212_stoner_front" class="attachment-thumbnail" src="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN-550x366.jpg">
</a>
As you can see the link in this a tag is the full size image, I need it to open the large image size in fancy box.
<strong>and the second one is this...</strong>
$(".downloads a").fancybox();
Both of these work OK, but my problem is, the images they are loading are monumentally big. This is because when you add a post gallery with link thumbnails to file: The default image file it uses is the full size image.
<strong>MY IMAGES</strong>
Please see below my registered images...
add_image_size( 'archive-thumb', 266, 174, true ); //(cropped)
add_image_size( 'mini-thumb', 48, 48, true ); //(cropped)
...and also the default image sizes:
thumbnail
small
medium
large
full-size
<strong>WHAT I NEED TO DO - PART 1</strong>
For this code below, I need it open the 'Large' image size, not the 'Full Size' in fancybox mode
$(".entry a").fancybox();
<strong>WHAT I NEED TO DO - PART 2</strong>
For this code below, please see my [[LINK href="http://jsfiddle.net/motocomdigital/U7Mj4/2/"]]jsFiddle[[/LINK]]
$(".downloads a").fancybox();
As you can see in the fiddle, when you hover over a thumbnail, you get more options.
Preview Photo - <em>I need this to open the 'Large' image with fancybox</em>
Low-res - <em>I need this open the 'Medium' image in a new window</em>
Medium-res - <em>I need this open the 'Large' image in a new window</em>
High-res - <em>I need this open the 'Full Size' image in a new window</em>
I totally understand In my fiddle, it's dodgy markup, appending spans to the inside of an a tag.
However, I don't mind adding my post gallery with no link 'thumbnails, then it would be just img's, instead of img's wrapped with a tag. But I can't figure out how to append a wrapping div.
Ideally, the download wrap mark-up needs to look like this, but generated by jquery...
<em>Before jQuery...</em>
<img width="188" height="118" title="rc212_stoner_front" alt="rc212_stoner_front" class="attachment-thumbnail" src="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN-550x366.jpg">
<em>After jQuery...</em>
<div class="download-thumb">
<img width="188" height="118" title="rc212_stoner_front" alt="rc212_stoner_front" class="attachment-thumbnail" src="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN-550x366.jpg">
<div class="slideover">
<a href="Large Image URL" class="fancybox">Preview Photo</a>
<a href="Medium Image URL" class="download-medium" target="_blank">Low-res (right click save as)</a>
<a href="Large Image URL" class="download-large" target="_blank">Medium-res (right click save as)</a>
<a href="Full Size Image URL" class="download-fullsize" target="_blank">High-res (right click save as)</a>
</div>
</div>
See this [[LINK href="http://jsfiddle.net/motocomdigital/U7Mj4/3/"]]jsFiddle[[/LINK]] of how this looks, it appears the same as my first fiddle, but cleaner mark-up. But I'm not sure how to write this a jQuery.
That's the basic idea. If you look at the image link's href in the code above, I've marked which images they have to fetch.
Any help would be hugely helpful thanks, money will go to person who solves with simplest working code.
Josh
<strong>LINKS</strong>
[[LINK href="http://jsfiddle.net/motocomdigital/U7Mj4/2/"]]http://jsfiddle.net/motocomdigital/U7Mj4/2/[[/LINK]]
[[LINK href="http://jsfiddle.net/motocomdigital/U7Mj4/3/"]]http://jsfiddle.net/motocomdigital/U7Mj4/3/[[/LINK]]
Answers (3)
Christianto answers:
Hi Josh,
if this related to your question before, Have you tried my code before?
It change the image link which fancybox used to "large" version by using ajax.
this the js code:
jQuery(document).ready(function($){
var raw_class, image_id = new Array();
$('.single-mod-content a img').each(function(i){
var img_class = $(this).attr('class');
if(img_class && img_class != undefined){
raw_class = $(this).attr('class').split(" ");
for(j=0;j<=raw_class.length-1;j++){
if(raw_class[j].match(/wp-image-/))
image_id[i]= raw_class[j].slice(9);
}
}
});
var image_ids = image_id.toString();
var data = { type: 'get_data', action: 'wp_get_large_image_url', data: image_ids }
$.post( wp_ajax, data, function(message){
if(message){
var raw_data = message.split(',');
for(i=0;i<=raw_data.length-1;i++){
var image_data = raw_data[i].split('%-');
$('.wp-image-'+image_data[1]).parent('a').attr('href', image_data[0]);
}
}
});
});
If you want to change it only on specific mobile browser just wrap it with browser logical test:
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/)
){
// your js code
}
and this is php code which serve when ajax request perform, put this on functions.php:
function wp_large_image_data(){
unset( $_POST['action'] );
if($_POST['type'] == 'get_data'){
$data = $_POST['data'];
$image_ids = explode( ',', $data );
$image_large_url = array();
foreach($image_ids as $image_id){
if($image_id){
$attachment_data = wp_get_attachment_image_src( $image_id, 'large' );
$image_large_url[] = $attachment_data[0].'%-'.$image_id;
}
}
$image_data = implode( "," , $image_large_url);
echo $image_data;
}
die;
}
add_action('wp_ajax_wp_get_large_image_url', 'wp_large_image_data');
add_action('wp_ajax_nopriv_wp_get_large_image_url', 'wp_large_image_data');
I tested it on my localhost, if it doesn't work on your site it could be selector that is different
Or there is no wp-image-("your-attachment-id") class that printed for each image, for example this image with class "wp-image-165":
<img src="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour-233x350.jpg" alt="" title="ABS new colour" width="233" height="350" class="alignright size-medium <strong>wp-image-165</strong>">
The class automatically printed when you add image, but could be remove if you customize the image tag/size etc. Like your code output above isn't contain any image id data as on its class attribute:
<a title="rc212_stoner_front" href="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN.jpg">
<img width="188" height="118" title="rc212_stoner_front" alt="rc212_stoner_front" class="attachment-thumbnail" src="http://motogpbook.com/wp/wp-content/uploads/2011/10/Stoner_11GP16_1761_AN-550x366.jpg">
</a>
be sure to define wp ajaxurl on <head>.
<script type="text/javascript">
<?php echo "var wp_ajax = '".admin_url('admin-ajax.php')."';" ?>
</script>
<strong>For your second problem</strong>, if you create gallery by uploading/adding image to post and using wordpress [gallery] shortcode. You can overwrite default wordpress gallery by post_gallery hook.
Below is your custom gallery code on pastebin that will create html element with div class "download-thumb" and div class "slideover" with medium, large and full size image inside the element.
[[LINK href="http://pastebin.com/kdS2k0kr"]]http://pastebin.com/kdS2k0kr[[/LINK]]
Put on functions.php
create gallery and called it with attribute customgal set to true, for example
[gallery <strong>customgal="true"</strong> link="file" columns="3"]
Josh Cranwell comments:
cool I will check it out when I get home tonight. Thanks.
Josh Cranwell comments:
Sorry for my longness - I've tested the top one, soooooo clever. I will use this all the time. I've yet to do the bottom one but I'm sure it will work.
Thank you for your help Christianto
Josh Cranwell comments:
Christianto,
Hands up to you for this second part you wrote, it is amazing! I've just got round to putting the multiple images part on, thanks for all your work on this, it's really good!!!
Cant believe it take me this long to get round to it :/
Though I do have one small question? if you think it requires a another paid question, please let me know.
Currently you have created the function so it applies the new gallery markup by using this...
[gallery <strong>customgal="true"</strong> link="file"]
Which is cool, but it's a little tricky for a new wordpress user with no html experience.
Is it possible to automatically change the gallery markup using your function, but apply it depending a post-type.
So for example if it is a custom post-type called <strong>download</strong> then all download galleries, using this shortcode...
[gallery]
...automatically uses your function gallery mark-up.
Do you think this is this possible?
Thanks
Josh
Ross Wilson answers:
For part 1 here is your solution: change your fancybox code to this
$(".entry a").each(function(){
$(this).attr('href',$(this).children('img').attr('src'));
}).fancybox();
Josh Cranwell comments:
Hi Ross,
In my live code, the img's will be thumbnails. So won't be much use opening the thumbnail in the fancybox, it needs to be large image which wordpress generates from my full size.
Thanks
Josh
Ross Wilson comments:
Are you doing this in a template? What does the php code look like?
Josh Cranwell comments:
Template? I'm building a custom theme from scratch.
The php is what I'm what I after really, I'm not great with php at the best of times so that's the main bit I need help with, and how to append my mark-up around an img, not to the inside of it. Then combining the php with my jquery.
:/
Josh Cranwell comments:
I'm guessing the php will go in my functions so it works global, and my jquery in the header/footer.
Kannan C answers:
i have a question, are you inserting one thumbnail per post or multiple thumbnails per post?
Josh Cranwell comments:
multiple thumbnails in a gallery format
Kannan C comments:
Christianto already posted a similar code that what i thought to offer you for gallery format. You should first try that.
Kannan C comments:
I see your question updated. Here is a simple function which will extract the gallery images from the post and i've initialized the image sizes in separate variables. You can use as shortcode [custom_gallery numbers=10] anywhere in your content.
function ck_custom_gallery($atts, $content = null) {
global $post;
extract(shortcode_atts(array("numbers" => $numbers), $atts));
//get images from the gallery
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => $numbers, 'order' => 'ASC', 'orderby' => 'menu_order') );
if(isset($attachments)) {
foreach ( $attachments as $attachment_id => $attachment ) :
$full = wp_get_attachment_image_src($attachment_id, 'full', false);
$large = wp_get_attachment_image_src($attachment_id, 'large', false);
$medium = wp_get_attachment_image_src($attachment_id, 'medium', false);
$thumbnail = wp_get_attachment_image_src($attachment_id, 'thumbnail', false);
?>
<a title="<?php echo $attachment->post_title; ?>" href="<?php echo $large[0]; ?>" class="fancybox">
<img width="188" height="118" alt="<?php echo $attachment->post_title; ?>" class="attachment-thumbnail" src="<?php echo $medium[0]; ?>">
</a>
<div class="download-thumb">
<img width="188" height="118" title="<?php echo $attachment->post_title; ?>" alt="<?php echo $attachment->post_title; ?>" class="attachment-thumbnail" src="<?php echo $thumbnail[0]; ?>">
<div class="slideover">
<a href="<?php echo $large[0]; ?>" class="fancybox">Preview Photo</a>
<a href="<?php echo $medium[0]; ?>" class="download-medium" target="_blank">Low-res (right click save as)</a>
<a href="<?php echo $large[0]; ?>" class="download-large" target="_blank">Medium-res (right click save as)</a>
<a href="<?php echo $full[0]; ?>" class="download-fullsize" target="_blank">High-res (right click save as)</a>
</div>
</div>
<?php
endforeach;
}
//reset WP query
wp_reset_query();
}
add_shortcode( 'custom_gallery', 'ck_custom_gallery' );