I am pretty new at this and tried to search a lot about this, breaking my site down numerous times because of wrong PHP code, so here is the deal.
I have a Wordpress page with portfolio posts. In those posts the only image displayed is the featured image. Due to that my prettyPhoto plugin won't show the lightbox when I click on that featured photo.
First I had this code ...
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
... which showed the featured image but didn't show the lightbox so it was not clickable. Then I played around and created this:
<?php if ( has_post_thumbnail()) : ?>
<a class="lightbox_single_portfolio" title="<?php echo esc_attr($title); ?>"
href="<?php echo esc_url($image_src); ?>" data-
rel="prettyPhoto[single_pretty_photo]">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
So the featured image got clickable, the lightbox started opening but there is an error that states "Image cannot be loaded. Make sure the path is correct and image exists". Due to that I said to myself that the problem could be that lightbox isn't loading the right image source.
I tried playing a bit more and tried to do this ...
<?php
if ( has_post_thumbnail()) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo '<a class="lightbox_single_portfolio" href="'.esc_url($image_src).'" data-rel="prettyPhoto[single_pretty_photo]">';
the_post_thumbnail('thumbnail');
echo '</a>';
endif;?>
... aaaand it breaks my site.
What could be the problem?
You are not closing the If statement,
change endif; to }
Well, I'm gonna post an answer as I found out something on the internet and it made my code work. Although the above answer (change endif; to }) did make my code work, it still showed the same error that the path couldn't be found.
I played around again a little bit, and this did the trick:
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
So the PHP calls a $large_image_url instead of the post thumbnail url.
This did the trick, and it works! It shows my featured image in a lightbox :)
Related
I am trying to create my own Wordpress theme with assistance of Advanced Custom Fields. I have run into an issue that I cannot find the answer for.
I am trying to create a loop of images and text where the image is a thumbnail that when clicked shows full size through the usage of magnific popup. I can get the images to display statically without the lightbox effect but not with it. From the following code it only produces the link:
<?php
if( have_rows('content') ):
while ( have_rows('content') ) : the_row(); ?>
<div class="loopcontainer">
<?php if( get_row_layout() == 'text_with_image' ): ?>
<?php
$images = the_sub_field('text_image');
if( !empty( $images ) ): ?>
<a class="post-img" href="<?php echo $images['sizes']['blog-large'];?>">
<img src="<?php echo $images['sizes']['blog-small'];?>" class="img-fluid img-thumbnail">
</a>
<?php endif; ?>
<?php endif;
endwhile;
else :
endif; ?>
How would I go around getting the lightbox effect to work within this Flexible Content solution? And where am I going wrong?
Thanks!
I'm trying to set my page so that when a user clicks the thumbnail of the current post, it expands in a Fancybox popup.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image" data-fancybox="gallery" href="<?php $featured_img_url ?>"
<?php the_post_thumbnail(); ?>
</div>
<?php } ?>
This works, in that the image opens as expected when it's clicked. But when I click off the overlay, the thumbnail has disappeared. display: none has been added to it inline.
I have also tried wrapping the div in an <a> tag and using that, but this has the same outcome.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php $featured_img_url ?>" class="fancybox" data-fancybox="gallery">
<div class="featured-image bShadow">
<?php the_post_thumbnail(); ?>
</div>
</a>
<?php } ?>
I have other images on the page assigned with Advanced Custom Fields that work fine with Fancybox, so I'm assuming the issue is with how I'm trying to get the thumbnail image using php.
Edit: Here's a video of the current outcome: https://www.useloom.com/share/f525f4f0e4c642c8800e82532a99e326
It looks like you have not correct url for your featured link and it is treated as "inline" content instead of "image".
Anyway, you could follow this demo - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - and use "trigger element" feature by adding data-fancybox-trigger attribute for featured link.
I am new to Wordpress. i have issue with Feature image. just i need to add URL to feature image(when we click on that feature image , it should redirect to that particular URL).
also is it possible to give URL to Title of the Portfolio categories page which i used in normal page.
You need to add this code in your php file :
<?php if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail();
echo '</a>';
}?>
<?php the_title(); ?>
<?php the_post_thumbnail( 'large' ); ?>
instead of this <?php the_permalink(); ?> you can assign your own url
use <?php the_permalink(); ?> for add Url link to feature image in portfolio in wordpress.
This worked finally.
<a href="<?php echo get_post_meta($post->ID, $sr_prefix.'_portfolio_externalurl', true); ?>"><?php } the_post_thumbnail('portfolio-crop-thumb');
i am having a blog page in my website... There are different posts ... on left side blog image is displayed , on right side text is written..when i click on particular blog, the main page of that post appears with image on the top and text down the image.
The issue is that on my blog page the left side images are not displayed rather default image is displayed.. bt when i click on post.. the main page of that particular post is having image...
<div class="blog-img mainimg" style="">
<?php $blogmainimg = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?>
<?php if($blogmainimg[0] == '') : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php else : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
</div>
only "if" is working.... else is not working
on blog page, all the posts are having NOIMG.png.. which is wrong
???
Let's try a more simplified solution. This uses the has_post_thumbnail() to check if a featured image is specified, since you really do not need to utilize the wp_get_attachment_image_src() in the provided code.
<div class="blog-img mainimg" style="">
<?php if(has_post_thumbnail($post->ID)) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php endif; ?>
</div>
This uses has_post_thumbnail() to see if the post has one specified, if it does, it will display it uses the_post_thumbnail(). If not, it will revert to the default.
If this doesn't work, than it could be an issue of using the_post_thumbnail(), this would mostly depend on your loop that's displaying the blog posts. If that is the case, try this:
<div class="blog-img mainimg" style="">
<?php if(has_post_thumbnail($post->ID)) : ?>
<?php echo get_the_post_thumbnail( $post->ID, 'single-post-thumbnail' ); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php endif; ?>
</div>
If this still does not solve the issue, please post the loop for your page as well, and I can further troubleshoot it.
Spent a while on this now with little to no avail.
I'm trying to alter the loop so that it checks each article for a featured image and if it finds one it displays that instead of the truncated article and link.
So basically (in logic)
Check for featured image
if there is a featured image display the featured image (and nothing else).
else display a truncated version of the article.
Can anybody help?
Here you go;
<?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) { ?>
<?php $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array( 960,960 )); ?>
<img src="<?php echo $img_src[0]; ?>" alt="My image" />
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>
Have a look at the following in the codex for more info;
Wordpress Featured images
Wordpress Excerpts