I have two different methods for displaying Wordpress Thumbnails
What I would like to do is, display the first method, and if it is not available then to display thumbs using the second method.
Below are the Two Methods for displaying Post Thumbnails.
Method 1
<!--Begin WordPress Featured post thumbnail-->
<div class="postthumbcon">
<?php
// check if the post has a featured image assigned to it.
if ( has_post_thumbnail() ) {
// get the src of the large size featured image
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$thumbnailSrc = $src[0];
// output image resized with timthumb
?>
<div class="postthumb">
">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=125&w=165" alt="">
</div>
<?php } ?>
</div>
<!--end WordPress Featured post thumbnail-->
Here is the second method.
<!--Begin Timthumb thumbnail-->
<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
<div class="postthumb">
" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
</div>
<?php } ?>
<!--End Timthumb thumbnail-->
Try something like this:
<div class="postthumbcon">
<?php
if ( has_post_thumbnail() ) {
// method one
} else if ( get_post_meta($post->ID, 'thumb', true) ) {
// Method two
}
?>
</div>
This will see if the post has a thumbnail, which you were already doing, but if it doesn't exist it will run the else clause meaning the second if statement will run only if the first fails.
Also, you appear to have the first part of what I am guessing to be a link in method two, see this line:
" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
Here's how your code could look in full:
<div class="postthumbcon">
<?php
if ( has_post_thumbnail() ) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$thumbnailSrc = $src[0];
?>
<div class="postthumb">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=125&w=165" alt="" />
</div>
<?php } else if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
<div class="postthumb">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
</a>
</div>
<?php } ?>
</div>
Related
I am trying to display an image in a while loop that uses a custom image size set-up in the functions.php file.
The code below is:
<?php
elseif(get_row_layout() == 'services_list'):
$image = get_sub_field('image');
// Image variables
$url = $image['url'];
// Thumbnail size attributes
$size = 'services-image';
$thumb = $image['sizes'][$size];
$width = $image['sizes'][$size . '-width'];
$height = $image['sizes'][$size . '-height'];
?>
<section class="content">
<div class="row">
<div class="columns medium-12">
<ul class="medium-block-grid-4" data-equalizer data-options="equalize_on_stack: true">
<?php
if(have_rows('services_list')):
$count = 0;
while (have_rows('services_list')) : the_row();
$count++;
?>
<li>
<a href="<?php echo get_sub_field('link'); ?>">
<img src="<?php echo get_sub_field('image'); ?>" />
<div class="service_title">
<p><?php echo get_sub_field('text'); ?></p>
</div>
</a>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
</div>
</section>
<?php endif; ?>
However, the image path returns 'Array' in the code?
Change in your custom field return format in Image array to Image URL.
I have created a custom Gutenberg block that is basically a link. When I click the block in the editor I immediately get sent to the page the block links to instead of being able to edit the block. How do I stop this from happening? I've already tried putting pointer-events: none as a style on it but that doesn't do anything surprisingly.
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
</a>
Since this may help others in the future, wrap your <a> tag in an if statement to check if your in the admin area. If you are, then it won't output those tags.
<?php if ( ! is_admin() ) : ?>
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<?php endif; ?>
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
<?php if ( ! is_admin() ) : ?>
</a>
<?php endif; ?>
My fonction should be very simple but it's not so easy for me, I need help for that.
Here is my website
and I use Custom fields so display into a modal box :
- either an image, when there is any
- or a soundcloud embed track, when there is any
Never both! But both shown by a thumbnail on homepage.
This is my code which is working actually but there is some bug like, why is there a souncloud box on the page, it should be on the lightbox.
<div id="post">
<a href="#" data-featherlight="#fl3">
<?php
if ( get_field('music') and get_field('music') != '' ) {
?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php } else { ?>
<div
<?php $image = get_field('image');
if( !empty($image) ): ?>
class="img"
href="<?php $image = get_field('image');if( !empty($image) ): ?> <?php echo $image['url']; ?>"
alt="<?php echo $image['alt']; ?> <?php endif; ?>"
data-featherlight="image" >
<?php endif; ?>
<?php } ?>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</div>
</a>
</div>
The idea is simply :
If
there is a music, get the music.
else
Get the image
any idea?
Sorry if my code is a bit dirty, I'm not a developper.
If you use php code inside of a html 'template' I would recommend the Alternative syntax for control structures.
See:
http://php.net/manual/en/control-structures.alternative-syntax.php
Then it will be something like this (it needs to be cleaned though):
<?php $image = get_field('image') ?>
<div id="post">
<?php if ( get_field('music') and get_field('music') != '' ): ?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?> &color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php elseif( !empty($image) ): ?>
<a href="<?php echo $image['url']; ?>">
<img
class="img"
alt="<?php echo $image['alt']; ?>
data-featherlight="image" />
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</a>
</div>
<?php endif; ?>
</div>
This is probably not totally correct, but there is much wrong with the structure of your HTML. class="img" alt="<?php echo $image['alt']; ?> data-featherlight="image" is not added to a tag. So I assumed it had to be and img-tag. Also there are mixed attributes that belong to an a-tag.
Also the $image variable is defined twice.
I have tried to code my wordpress theme as simple as possible but I don't really understand why I can't display an image from Advanced Custom Field into a modal box using Featherlight.js (http://noelboss.github.io/featherlight/)
Here is my online page http://www.skuar.com
This is my single.php code, which simply display the image custom field
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
and this is the wp loop content
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>" data-featherlight="image">
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
</div>
I just would like to open the image in a lightbox...
Is that make sense?
Thanks!
In invalid double quotes in your code. Try this code:
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php $image = get_field('image');
if( !empty($image) ): ?>
<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
<?php endif; ?>" data-featherlight="image">
</div>
</a>
</div>
Any idea why the code below is only loading the thumbnail into the fancybox overlay? The image array within .portfolio-slideshow is loading in the background fine, it's just not being triggered correctly with fancybox.
Wordpress code:
<a class="fancybox" href="<?php print $slideshow['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<img src="<?php print $img['guid']; ?>" />
<?php } ?>
</div>
<h4><?php the_title(); ?></h4>
</a>
I had to wrap the array of images in the fancybox link + the rel title, this did the trick:
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>"><img src="<?php print $img['guid']; ?>" /></a>
<?php } ?>
</div>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?></h4></a>