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" />
Related
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>
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 try to insert the value of a custom field in a background-image property ( therefore not in img src="..."').
In my category.php; I can display the custom field linked to each post; but when I put the variable in my style ( inline css ), wordpress always displays the same image.
The code :
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<style type="text/css">
.photo_interview {
background-image: url(<?php echo $photo_interview; ?>);
}
</style>
<div class="photo_interview"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
Any idea ? My page here : http://www.overso.me/category/interview/
Your code should be this:
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<!-- You don't need style tags if you only want to set the background image -->
<div style="background-image: url(<?php echo $photo_interview; ?>)"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
For what I can see you haven't set the global $post, so get_field do not know which is needed to display. in this case it will be better to use the_ID() to get the current post ID inside the while loop.
Cheers
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 a few snippets of code where I want to check if the category is correct and if post actually exist, at the moment I have an if_category() function that then queries my required category but I think these are clashing so none of my posts for the category are being displayed, can anyone advise how I can fix this code?
PHP
<?php if(is_category('Rainwater Harvesting Product')) { ?>
<!-- Related Projects -->
<?php query_posts('category_name=rainwater-harvesting-project&showposts=5'); ?>
<?php if (have_posts()) { ?>
<div class="aside-mod related-projects">
<div class="curved-ctn">
<h2 class="module-header">Related Projects</h2>
<ul class="project-list clearfix">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="project">
<a href="<?php the_permalink();?>" class="project">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} ?>
<h3><?php the_title(); ?></h3>
<!-- <i class="icon-project"></i> -->
</a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
</div>
<?php } ?>
<?php } ?>
<?php wp_reset_query(); ?>
It does not work because in your
<?php query_posts('category_name=Greywater Recycling Project&showposts=5'); ?>
you are giving to category_name, the Name instead of the category slug, the query_posts parameter, category_name takes only the slug. eg: it must be
<?php query_posts('category_name=greywater-recycling-project&showposts=5'); ?>
More info here: http://codex.wordpress.org/Function_Reference/query_posts