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.
Related
<?php
$featured_posts = get_field('director');
if( $featured_posts ): ?>
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo get_the_post_thumbnail_url($featured_post->ID, 'thumbnail');?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Guys how to output like this.
If has thumbnail then post thumbanil
else if no thumnail then print this this image (no image)
You want to check if the thumbnail is empty, and if there is no thumbnail, display a default image.
So you use get_the_post_thumbnail_url() and check if it is empty.
if ( empty(get_the_post_thumbnail_url( $featured_post->ID)) ):
echo 'https://your-default-image_url.jpg';
else:
echo get_the_post_thumbnail_url( $featured_post->ID, 'thumbnail' );
endif;
If you like it a bit more readable, your code can look like:
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<?php $featured_image = get_the_post_thumbnail_url($featured_post->ID, 'thumbnail') ?: 'https://your-default-image_url.jpg'; ?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo $featured_image;?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
Here is your working code:
<?php
$featured_posts = get_field('director');
if( $featured_posts ): ?>
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo get_the_post_thumbnail_url($featured_post->ID, 'thumbnail');?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
.... here your code for "else"
<?php endif; ?>
I'm trying to create a two column element using ACF repeater fields. The only thing is I'm trying to alternate this so that the content in the two columns switches left/right depending on the row being even or odd.
The output will look something like:
This is how I looped:
<section id="projects" class="container specific-margin-1">
<!-- Repeater -->
<div class="row">
<?php $i=0 ; if(get_field( 'featured_projects')): ?>
<?php while(has_sub_field( 'featured_projects')): $i++; ?>
<div class="row">
<?php
/*
* Loop through post objects (assuming this is a multi-select field) ( setup postdata )
* Using this method, you can use all the normal WP functions as the $post object is temporarily initialized within the loop
* Read more: http://codex.wordpress.org/Template_Tags/get_posts#Reset_after_Postlists_with_offset
*/
$post_objects = get_field('featured_projects');
if($post_objects ): ?>
<ul>
<?php foreach( $post_objects as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<div class="repeater_row <?php if (($i % 2)==0 ): ?>col-lg-3 col-md-4 col-sm-6<?php else: ?>col-lg-9 col-md-8 col-sm-6<?php endif; ?>">
<?php if (($i % 2)==0 ): ?>
<li>
<h3><?php the_title(); ?></h3>
<h3><?php the_field('project_location'); ?></h3>
<br>
<span><?php the_field('project_area'); ?></span><br>
<span><?php the_field('project_scale'); ?></span><br>
<br>
<span style="color:#EE1601;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
</li>
<?php else:
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php endif; ?>
</div>
<div class="repeater_row <?php if (($i % 2)==0 ): ?>col-lg-9 col-md-8 col-sm-6<?php else: ?>col-lg-3 col-md-4 col-sm-6<?php endif; ?>">
<?php if (($i % 2)==0 ): ?>
<?php // check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php else: ?>
<li>
<?php // check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h3><?php the_title(); ?></h3>
<h3><?php the_field('project_location'); ?></h3>
<br>
<span><?php the_field('project_area'); ?></span><br>
<span><?php the_field('project_scale'); ?></span><br>
<br>
<span style="color:#EE1601;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
</li>
<?php endif; ?>
</div>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif;?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!-- Repeater -->
</section>
My Current Output looks like this:
This is the minimal logic for having alternate image and text row wise.
<div class="container">
<div class="row">
<?php
for ($i = 1; $i <= 10; $i++)
{
//even counter will have right image
if ($i % 2 == 0)
{
?>
<div class="col-md-12">
<div class="col-md-4">
Title Number: <?php echo $i; ?>
</div>
<div class="col-md-8">
<img src="" class="img-responsive"/>
</div>
</div>
<?php
}
//odd counter will have left image
else
{
?>
<div class="col-md-12">
<div class="col-md-8">
<img src="" class="img-responsive"/>
</div>
<div class="col-md-4">
Title Number: <?php echo $i; ?>
</div>
</div>
<?php
}
}
?>
</div>
</div>
Hope this will give you an idea.
I'm having trouble switching an ACF Image field from the default fullsize to the thumbnail image in the HTML output.
I have an Image type sub-field ID 'homepage_custom_navigation_image' within a Repeater field ID 'homepage_custom_navigation'. Any advice will be greatly appreciated.
Here's the code I have so far, which is displaying the fullsize image OK but making the download time of my page pretty long:
<div id="homepage-navigation-container">
<?php
$rows = get_field('homepage_custom_navigation');
if($rows)
{
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . $row['homepage_custom_navigation_link'] . '><img src=' . $row['homepage_custom_navigation_image'] . ' alt=' . $row['homepage_custom_navigation_title'] . '></a>
</div>
<div class="homepage-navigation-item-title">
<a href=' . $row['homepage_custom_navigation_link'] . '><h2>' . $row['homepage_custom_navigation_title'] . '</h2></a>
</div>
</div>';
}
}
?>
</div>
If you'd like to control the size of an image, I can show you how I normally output them using ACF.
<div id="homepage-navigation-container">
<?php
if(get_field('homepage_custom_navigation'))
{
while(has_sub_field){
}
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . get_sub_field('homepage_custom_navigation_link'). '>'. wp_get_attachment_image(get_sub_field('homepage_custom_navigation_image'), 'thumbnail'). '</a></div>
<div class="homepage-navigation-item-title">
<a href=' . get_sub_field('homepage_custom_navigation_link') . '><h2>' . get_sub_field('homepage_custom_navigation_title') . '</h2></a>
</div>
</div>';
}
}
?>
This is assuming that 'homepage_custom_navigation_title', 'homepage_custom_navigation_link', and 'homepage_custom_navigation_image' are all subfields within your repeater. The key is to using wp_get_attachment_image. This will use the WordPress function, that creates an image based on the ID and size value input in the parameters. 'Thumbnail' is one of the WordPress default sizes though they can be tweaked and customized in your functions.php file.
Thanks everyone for your help a guidance. I took a bit of info from each of your suggestions and came up with this as an answer:
<!-- Homepage custom navigation here -->
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$thumb = wp_get_attachment_image_src(get_sub_field('homepage_custom_navigation_image'), 'thumbnail');
$desc = get_sub_field('homepage_custom_navigation_title');
$link = get_sub_field('homepage_custom_navigation_link');
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image" style="background-image: url(<?php echo $thumb[0]; ?>); background-size: 120px auto; background-repeat: no-repeat; ">
</div>
<div class="homepage-navigation-item-title">
<h2><?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Try this:
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$gal = get_sub_field('homepage_custom_navigation_image');
$desc = get_sub_field('homepage_custom_navigation_title');
$url = $gal['url'];
$title = $gal['title'];
$alt = $gal['alt'];
$size = 'thumbnail';
$thumb = $gal['sizes'][ $size ];
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" /></div>
<div class="homepage-navigation-item-title">
<?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Just make sure that in "Return Value" you have selected "Image Object" and it should work (I have added alt for proper HTML5 and you can even add the image size if you want)
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>
In one of my wordpress templates, the content code seems to keep the subpage menu from displaying in the sidebar. When ever I remove all code from the content div, the subpage menu appears as expected.
Could anyone point out where the code goes wrong?
Any help would be greatly appreciated!
<div id="content">
<div class="pageinfo clearfix">
<div class="info">
<h1><?php the_title();?></h1>
</div>
</div>
<?php
global $more;
// set $more to 0 in order to only get the first part of the post
$more = 0;
global $post;
$myposts = query_posts("category_name=intern&posts_per_page=3");
foreach($myposts as $post) :
setup_postdata($post);
?>
<div class="postitem clearfix">
<div class="new"></div>
<div class="info">
<h2><?php the_title()?></h2>
<?php the_date()?> | Skrevet af <?php the_author_posts_link(); ?> | Gemt under:
<?php
// heres just the name and permalink:
foreach((get_the_category()) as $category) {
$category_name = $category->category_nicename . ' ';
$category_link = get_category_link($category->cat_ID);
echo "<a href='$category_link'>$category_name</a>";
}
?>
</div>
<?php
$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];?>
<?php if($thumb != NULL) { ?>
<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumb ?>&h=110&w=110&zc=1" alt="<?php the_title(); ?>" width="110" height="110" class="leftImage" >
</a>
<?php } ?>
<?php the_content('<br />Læs resten her » '); ?>
<div class="clearBoth"></div>
</div><!-- /postitem -->
<?php endforeach; ?>
</div><!-- /content -->
try rewind_posts(); or wp_reset_query(); somewhere before your sidebar is loaded up (and after the endforeach).