How to use ‘get attached media’ with a custom fancybox?

  • emergingideas

    (@emergingideas)


    7 years ago

    Hi,

    I’m quite new to much of this, but so far going ok…but really held up on a snag.

    I’m stuck on getting my images within my post to appear properly in a fancybox lightbox (which is installed on my theme, not a plugin).

    I am using the “get_attached_media”, along with the shortcode “data-fancybox=”images”” ….images appear all well and good on the page, but on clicking them lightbox appears as the overlay, but doesn’t load the images.

    I’m sure i’m doing something fundamental and basic wrong – if anybody can see what it is that would be awesome

    This is the code I am currently using on my single page:

    <div class="img_div">

<?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
    foreach($media as $media_id => $media_file){
        $full = wp_get_attachment_url( $media_id );
        echo '<img class="image-2" data-fancybox="images" src="'.$full.'" alt="'.$media_file->post_title.'" />';
    }
}
?>
</div>

    and if it helps…this are the directions from Fancybox documentation…what it should look like if it were static html:

    <a href="image.jpg" data-fancybox="images">
    <img src="thumbnail.jpg" />
</a>
Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years ago

    You’re not looping through the $media array quite right. The $media as $media_id => $media_file style is for associative arrays with elements as key => value pairs. What you get in $media is an indexed array with WP_Post objects as elements, so your loop should be more like foreach ( $media as $attachment ) { Then as with any post object, you get the ID with $attachment->ID.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    Thanks bcworkz! – ok, would it then be something like this?

    <div class="img_div">

<?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
    foreach ( $media as $attachment ) {
        $full = wp_get_attachment_url( $attachment->ID );
        echo '<img class="image-2" data-fancybox="images" src="'.$full.'" alt="'.$media_file->post_title.'" />';
    }
}
?>
</div>

    But I tried this but have the same problem…the overlay opens but doesn’t load the image. What I see is the black overlay, the number of images and the ability to scroll through, but all that has loaded is a white band where the image should be, which, according to the output code seems to be an empty Iframe?

    I’m totally at a loss…

    Moderator bcworkz

    (@bcworkz)

    7 years ago

    Better! Not that it’ll solve the problem, but you also need $attachment->post_title in the img tag alt attribute.

    I think your img tags each need to wrapped with an associated anchor/link tag to the large image. It is this href that fancybox uses to determine the image source, since the img tag src can be completely unrelated.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    Ok – thanks for this…have changed the img tag alt attribute.

    Yeah, I thought the same about needing the href for the fancybox to use.
    But, quite honestly, I just don’t know how to do this…i’m sure this is basic stuff, sorry for sounding dum…i’m slowly getting somewhere…

    Could you point me in the write direction?…I haven’t found this through the WordPress documentation, or managed to pieced it together through further searches…

    Moderator bcworkz

    (@bcworkz)

    7 years ago

    No worries, everyone started off being clueless at one time or another 🙂

    There’s actually a number of ways to do this, they’re all equivalent, the differences are mostly coder stylistic choices. Here’s mine, replace your one echo line with all of this:

    $medium = wp_get_attachment_image_url( $attachment->ID, 'medium');
echo "\n<a href=\"$full\" data-fancybox=\"images\">\n";
echo '  <img class="image-2" src="'.$medium.'" alt="'.$media_file->post_title.'" />';
echo "\n</a>";

    Your initial image was full sized, which seemed odd to then link it to fancybox, so I rearranged things a bit so a medium image is initially shown, linked to full size in fancybox. If you want a different size for the initial image, just change ‘medium’ at the end of my first line to whatever size you want. You can also supply array( $width, $height ) instead, replacing the variables with integer values.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    Thanks so much for this!…slowly starting to make sense…I will get there one day!

    Although, I tried it out…and I am still having the same problem – the image doesn’t appear in the lightbox overlay. I have made a error here maybe?

    <div class="img_div">
<?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
    foreach ( $media as $attachment ) {
        $medium = wp_get_attachment_image_url( $attachment->ID, 'medium');
echo "\n<a href=\"$full\" data-fancybox=\"images\">\n";
echo '  <img class="image-2" src="'.$medium.'" alt="'.$media_file->post_title.'" />';
echo "\n</a>";
    }
}
?>
</div>

    I was tinkering with another area – images from metabox uploads…to see if I could get that to work…well, hoping also to see if it’s the Fancybox file actually.I got the metabox area to work fine (or at least show the image on the lightbox), with the below code…tried to do something similar with the “get_attached_media” but no joy. (I also don’t want to use metabox image uploads if I can help it)

    This is the metabox version:

    <?php
	 $images = rwmb_meta( 'hp_img_1', 'size=medium' );
	 $images = rwmb_meta( 'hp_img_1', 'type=medium' );
	 if ( !empty( $images ) ) {
			 foreach ( $images as $image ) {
				 ?>

				<?php 
				 echo "<a href='{$image['url']}' data-fancybox='images' />";
				?> 
				<?php
				 echo "<img src='{$image['url']}' class='featured-img' alt='{$image['alt']}' />";
				 ?><?php
			 }
	 }
 ?>
    Moderator bcworkz

    (@bcworkz)

    7 years ago

    Just a miscommunication this time, I intended that you retain this line:
    $full = wp_get_attachment_url( $attachment->ID );

    I see now it would make more sense if I had included it in my example. I’m pretty sure inserting this will get it all working. No meta data image references! That would be awful.

    Writing some extra code is not the worst thing though 🙂 BTW though, you left out the closing </a> tag in your meta test. Interesting that fancybox still worked despite the lack. I guess browsers are quite tolerant of malformed markup.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    C’est magnifique! – this works a treat. Thanks so much for your help!

    Moderator bcworkz

    (@bcworkz)

    7 years ago

    Superb! You’re welcome.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    Hi bcworkz – this really works fantastically – thanks again!

    …however, i’ve been unable to get the captions to display. Sorry if you can’t help me with this…I’ve been plugging away to do myself..but no luck and hit a wall, and wondered if you could help…

    How would you do this…my approach doesn’t seem to work.

    I added a little bit to the code we were working on to include:
    $caption = wp_get_attachment_url( $media_file->post_excerpt );

    and in the href included: data-caption=\"$caption\"

    in full this is:

    <?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
    foreach ( $media as $attachment ) {
        $full = wp_get_attachment_url( $attachment->ID );
        $medium = wp_get_attachment_image_url( $attachment->ID, 'medium');
        $caption = wp_get_attachment_url( $media_file->post_excerpt );
echo "\n<a href=\"$full\" data-caption=\"$caption\" data-fancybox=\"images\">\n";
echo '  <img class="image-2" src="'.$medium.'" alt="'.$media_file->post_title.'" />';
echo "\n</a>";
    }
}
?>

    Thanks…i know my novice status is showing…trying to learn quickly, but not mastering it all so far.

    Moderator bcworkz

    (@bcworkz)

    7 years ago

    No worries at all! I’m assuming you are correct that the data-caption attribute is what fancybox needs to display captions, I’ve no idea myself.

    wp_get_attachment_url() is inappropriate because you do not want an URL, you just want the caption string. This function also requires an ID be passed, you are passing a string with $media_file->post_excerpt. Furthermore, $media_file appears to be undefined. Even if it is, it probably has the wrong object assigned.

    You should be able to simply use this:
    $caption = $attachment->post_excerpt;

    Or you could just use the property right in the echo statement. Omit the $caption line and code the data-caption part like so:
    data-caption=\"{$attachment->post_excerpt}\"

    We need to use the curly braces in such situations because we are using a complex object property, not a simple variable (the same applies for array element references). PHP generally knows where a simple variable name ends due to whitespace or other disallowed characters. -> [] are disallowed characters, so we need to tell PHP where our variable actually ends by using curly braces.

    Thread Starter emergingideas

    (@emergingideas)

    7 years ago

    Ah! – ok, interesting. I am slowly learning…thank you for all the info. This works superbly too. Thanks for your help!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to use ‘get attached media’ with a custom fancybox?’ is closed to new replies.