- This topic has 9 replies, 2 voices, and was last updated 6 years, 10 months ago by
.
-
Posts
-
-
Hello,
I have a site where the homepage displays image posts. Theres a thumbnail for the featured image of each post and the post are just a bunch of attached images. I would like to be able to click on these thumbnail and have a gallery pop up with all the attached images in that post including the featured image. I have tried to follow your instructions from “Can I use ONE thumbnail to open a complete gallery ?” but when i click on the thumbnails they still go to the image gallery link. I was wondering if there are any backend coding i would have to change inorder to do this? Please help.
thanks,
-
Hi Alex, welcome on these forums 🙂
It sounds like you will have to customize your theme to get it like you want.
The first question is: Are you using a custom theme or is it one of the themes from the WordPress.org theme repository? Or a theme bought at ThemeForest maybe?
And also: do you have some coding experience? Enough to do some theme template file modifications?
.Rolf
-
hi Rolf,
Thank you for your quick reply. I am using the uploader theme on wordpress. I am new to wordpress so i dont have any experience with the template files but from browsing around i believe this is the code it has for the thumbnail posts that i need help modifying.
while ( have_posts() ) : the_post(); ?> <?php $post_id = get_the_ID(); $masonry_class = ( $is_masonry ) ? 'mason-item' : 'grid-item'; ?> <li <?php post_class( $masonry_class );?> data-media_id="<?php echo $post_id;?>"> <div class="thumbnail"> <?php if ( has_post_thumbnail() ):?> <figure class="image"> <?php $thumb = ( isset( $settings['thumb_size'] ) ) ? $settings['thumb_size'] : 'large'; $attachment_id = get_post_thumbnail_id(); $attachment = wp_get_attachment_image_src( $attachment_id, $thumb );?> <a href="<?php echo esc_url( get_permalink() );?>"> <img src="<?php echo esc_url( $attachment[0] );?>" alt="<?php echo esc_attr( get_the_title() ); ?>" /> </a> <?php endwhile;?> -
Is that the theme called “Uploader – Advanced Media Sharing Theme” available on ThemeForest?
If so, please be aware that if you modify any theme files, these modifications will be overwritten on the next update. To prevent this, you could consider creating a Child Theme but I could not tell you if the Uploader theme can serve as a Parent Theme at all. Some themes are just not suitable for that… You might consider asking the theme developer if the theme can serve as a Parent Theme and if they can give you a basic tutorial which you can follow.
Next step will indeed be to modify that snippet that you gave above.
Let’s concentrate on these lines:
$attachment = wp_get_attachment_image_src( $attachment_id, $thumb );?> <a href="<?php echo esc_url( get_permalink() );?>"> <img src="<?php echo esc_url( $attachment[0] );?>" alt="<?php echo esc_attr( get_the_title() ); ?>" /> </a>The first step will be to change the href from the post URL to the full-size image URL. I suggest replacing those lines with:
$link = wp_get_attachment_image_src( $attachment_id, 'full' ); $attachment = wp_get_attachment_image_src( $attachment_id, $thumb ); ?> <a href="<?php echo esc_url( $link[0] );?>"> <img src="<?php echo esc_url( $attachment[0] );?>" alt="<?php echo esc_attr( get_the_title() ); ?>" /> </a>Once you have done that, please test and let me know the result. Clicking the thumb image should open the same image full size in FancyBox but not the other images yet. That will be step 2: getting the post content in a hidden div…
-
yes i am using the Uploader – Advanced Media Sharing Theme. Also thanks for the tips about the child theme =). The theme supports a child theme and that is where i am making my changes. I have added your code above and it works perfectly! When i click on the thumbnail i get the same picture full sized in fancybox. Please help me with getting the post content in a hidden div.
-
The theme supports a child theme and that is where i am making my changes.
OK excellent, we can safely proceed then 🙂
The next steps depend on how your FancyBox Auto-gallery settings are. I’ll assume here that the option Autogallery is set to “Galleries per Section (below)”.
1. Go to Setting > Media and add
, li.mason-item, li.grid-itemto the Section(s) field.2. Next we’ll have to add some lines to produce a hidden div with the post content (which should contain all the other images) but I see there is a problem with the code snippet you pasted above. There is a line with
<?php endif; ?>missing and many HTML tags are not closed. I suppose you left out some lines before the final<?php endwhile; ?>there?This is not a problem but I cannot exactly tell you where to put the next code. I would suggest to search for the closing
</li>tag (should be there just before the<?php endwhile; ?>) and place the following snippet just before it.<div style="display:none"> <?php the_content(); ?> </div>This should add each complete post content while keeping it hidden. Only when opening the image in the light box, it should be possible to click through to all the related post images…
If it’s not working, please provide a link to your site so I can take a look. If you prefer not to share it publicly on this forum, you can use the contact form.
-
Hey Rolf, thank you so much again for your help. It works great. the pictures show up when i add them to the post as a gallery but the images are attachments to the post and they dont show in the gallery. Is it possible or is there a way to add the attachments from a imagepost to the fancybox? Thanks
-
-
-
I see you have replaced the
shortcodes in your posts with simple images but FancyBox cannot work with embedded images, it needs links to images. The easiest would be to edit your posts and insert basic WordPress galleries. Choose the option “Link to: Media file” and Size: Thumbnail (to keep the embedded images, which you actually do not need, as light as possible) while doing so.
Another way would be to manually create text links (the actual text does not matter) that link to each image you want to add to the light box gallery…
-
- You must be logged in to reply to this topic.