I'm working on a site built on wordpress and trying to update the company team page. The section is a horizontal container with images of each member.
However, I run into an issue where some images don't appear on a desktop viewport, i.e. the first and last images show but not the ones in the middle. The rest of the images only populate when I resize the screen width to a mobile screen size.
My php template:
<div id="team-container" class="uk-column-1-1#s uk-column-1-3#m uk-column-1-5#l">
<?php if ( have_rows( 'team_members' ) ) : ?>
<?php while ( have_rows( 'team_members' ) ) : the_row(); ?>
<a href="<?php the_sub_field('linkedin_url'); ?>">
<div class="team-members">
<?php if ( get_sub_field( 'image' ) ) { ?>
<img class="team-members-img" alt data-src="<?php the_sub_field( 'image' ); ?>" data-srcset="<?php the_sub_field( 'image' ); ?>" uk-img>
<?php } ?>
<div class="team-members-name-layer">
<h4 class="team-members-name"><strong><?php the_sub_field('name'); ?></strong><br><span class="team-members-positions"><?php the_sub_field('positions'); ?></span></h4>
</div>
</div>
</a>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
Related
I'm having trouble getting images shown with a repeater in Wordpress.
For some reason it only shows the alt text instead of the image itself?
example
the upper images are my thumbnail posts and are showing correctly.
Does anyone know whats causing this?
my code
<div class="row">
<div class="col-sm-6 left"><h1>COMMERCIAL</h1><br>
<div class="page-header">
<?php $mymovies = new WP_Query(array(
'post_type' => 'my_movies'
)); ?>
<?php while($mymovies->have_posts()) : $mymovies->the_post(); ?>
<div class="movie-colums">
<div class="thumbtitle group">
<div class="preview">
<?php the_post_thumbnail('thumbnail'); ?>
<h1><?php the_title(); ?><br>
<?php the_field('year'); ?>
<?php
// check if the repeater field has rows of data
if( have_rows('images_rep') ):
// loop through the rows of data
while ( have_rows('images_rep') ) : the_row();
// display a sub field value
the_sub_field('image');
endwhile;
else :
// no rows found
endif;
?>
</h1>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
thanks in advance
Your PHP bit for the repeater stuff should be:
<?php if( have_rows('images_rep') ): ?>
<?php while( have_rows('images_rep') ): the_row();
$image = get_sub_field('image');
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
<?php endwhile; ?>
<?php endif; ?>
It looks like your example is outputting the image object so just wrap the image URL in an image tag.
Ref: https://www.advancedcustomfields.com/resources/image/
I am creating a news centre which pulls in the newest wordpress post, of a specified category. It includes the post image and title. The div group has a hover animation, and i want that class, when clicked, to link to the post its pulling the title and image from.
Currently it only links if you click on the title itself, i want to be able to click the entire block and it link to the post. Any ideas? here is the code as it stands...
<?php query_posts('cat=1 &posts_per_page=1'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="block-1">
<div class="news-center-overlay transition">
<p>VIEW FULL STORY</p>
<div id="news-line-box">
<div id="part-1"></div><div id="part-2"><img src="<?php echo get_stylesheet_directory_uri()?>/img/star.png"/> </div><div id="part-3"></div>
</div>
<h4>COMETS BASKETBALL</h4>
</div>
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
<p class="news-center-title animation"><?php echo get_the_title( $ID ); ?></p>
</div>
<?php endwhile; endif; ?>
From my understanding, You are looking to click a Block with the link to the post that resides under the Block
If this is the case, The Block can be wrapped in a href link or the href link can be wrapped to the news-center-overlay class
<?php query_posts('cat=1 &posts_per_page=1'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="block-1">
<div class="news-center-overlay transition">
<p>VIEW FULL STORY</p>
<div id="news-line-box">
<div id="part-1"></div><div id="part-2"><img src="<?php echo get_stylesheet_directory_uri()?>/img/star.png"/> </div><div id="part-3"></div>
</div>
<h4>COMETS BASKETBALL</h4>
</div>
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
<p class="news-center-title animation"><?php echo get_the_title( $ID ); ?></p>
</div>
</a>
<?php endwhile; endif; ?>
got another question to ask:
I would like to display post thumbnails with the post title underneath. I have managed to work that out through asking on here, however now I would like to add a function that checks for a thumbnail and if none is available displays a dummy image.
Here is my try, which does display the thumbnail (if there) but not the dummy (if no thumbnail is attached):
<div class="gallery_container_wrapper">
<?php query_posts( $args ); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="gallery_image_container">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<div class="gallery_image_thumb">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail'); }
else {
echo
'<img src="http://www.kunstamkasten.de/wp-content/uploads/2014/08/gallery_dummy.jpg" />'
; } ?>
</div>
<div class="gallery_title">
<h2>
<?php the_title(); ?>
</h2>
</div>
</a>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
What am I doing wrong here?
This code works for me. Yours is virtually identical.
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/sunlit_path_banner.jpg" alt="Sunlit Path" />
<?php endif; ?>
Note: I also cut and pasted your code and tested on my WP install, and it worked fine.
Or... try this alternative to the if condition:
<?php if ( get_the_post_thumbnail( get_the_ID() ) ) {
the_post_thumbnail('thumbnail'); }
else {
echo
'<img src="http://www.kunstamkasten.de/wp-content/uploads/2014/08/gallery_dummy.jpg" />'
; } ?>
I have this php code that displays the first image from a post on my main page. The images sizes seem to be random. I would like to make them all the same size.
You can see the three images at the bottom of the page:http://www.wha2wear.com/
And this is the code:
<div class="blog">
<h2><span>Sneak peak</span></h2>
<ul>
<?php query_posts('orderby=comment_count&posts_per_page=6'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<h3 class="short_title"><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php echo ShortTitle(get_the_title()); ?> </a></h3>
<?php getImage('1'); ?>
<?php endwhile; ?></li>
<?php else : ?>
<p>Sorry, no posts were found.</p>
<?php endif; ?>
</ul>
</div>
Thank you
Using HTML, you would need to use CSS to resize an image. You could use:
<img src="/page-to-image" style="width:100px; hight:200px" />
I use a template that generates thumbnails on the content.php page like so:
<article <?php post_class('single-entry clearfix'); ?>>
<?php
// Test if post has a featured image
if( has_post_thumbnail() ) {
// Get resize and show featured image : refer to functions/img_defaults.php for default values
$wpex_entry_img = aq_resize( wp_get_attachment_url( get_post_thumbnail_id(), 'full' ), wpex_img( 'blog_entry_width' ), wpex_img( 'blog_entry_height' ), wpex_img( 'blog_entry_crop' ) );
?>
<div class="single-entry-thumbnail">
<img src="<?php echo $wpex_entry_img; ?>" alt="<?php echo the_title(); ?>" />
</div><!-- /single-entry-thumbnail -->
<?php } ?>
<div class="entry-text clearfix">
<header>
<h3><?php the_title(); ?></h3>
</header>
</div><!-- /entry-text -->
I am just starting with Wordpress and php and I want to add a parameter to this so only posts with category 'showcase' i.e. will show up. Anyone an idea?
You can use in_category() function to test that post belongs to it.
if ( in_category( 'showcase' ) ) {
...
}
in_category() docs - http://codex.wordpress.org/Function_Reference/in_category