I have some ACF(advanced Custom Fields) image values that I display in an include file outside of the main loop. The ACF image is stored as an array, so I would like to display the array values, for example URL, alt tag, size , ect..
This is my code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_post_meta($postid, 'callout_image', true);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
the error is
Warning: Illegal string offset 'url' in
What am I doing wrong?
UPDATE: Fixed code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_field('callout_image', $postid);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
https://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
// Thumbnail size attributes.
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
// Begin caption wrap.
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>
<?php
// End caption wrap.
if( $caption ): ?>
<p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
</div>
<?php endif; ?>
<?php endif; ?>
I am trying to output all client logos, but limit each section <section> to 16 logos. At the moment, the HTML outputted isn't correct but for the life of me I cannot figure our where my code is wrong.
Any help would be greatly appreciated:
<?php $logototal = count( get_sub_field('bp_client_logos') ); //Get a total count of the logos ?>
<?php
$count = "0";
if( have_rows('bp_client_logos') ) :
$i = 1;
while ( have_rows('bp_client_logos') ) : the_row(); ?>
<?php
$clientindex = $i;
if( $clientindex == "1" || ($clientindex-1) %16 == "0" ) :
?>
<div class="section general-section section-<?php echo $title; ?> section-count-<?php echo $count; ?>" data-anchor="section-<?php echo $count; ?>" style="<?php echo $bg_background; ?>">
<div class="row small-up-4 medium-up-8 large-up-8 align-middle">
<?php endif; ?>
<div class="column client-logo-grid">
<?php
$image = get_sub_field('bp_client_logo');
// Vars
$url = $image['url'];
$thistitle = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
$size = 'ClientLogo' ;
$thumb = $image['sizes'][ $size ];
?>
<?php if ( get_sub_field('bp_client_link') ) : ?>
<a target="_blank" href="<?php the_sub_field('bp_client_link'); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
</a>
<?php else: ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
<?php endif; ?>
</div><!-- .column -->
<?php if( ($clientindex) %16 == "0") : $count = $count+1; ?>
<?php if($logototal > ($count*16)) : ?>
<div class="show-for-medium more-down-icon">
<span class="more-text">More</span> <span class="more-arrow"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/arrow-down.png" alt="arrow-down-icon" /></span>
</div>
<?php endif; ?>
</div><!-- .row -->
</div><!-- .section -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php endif; ?>
In the code below I am trying to extract the exactly featured image of the post_id = 25 but instead, it is pulling new images of the different post.
<?php
$post_ID= 25;
$post_url= get_permalink($post_ID);
$queried_post = get_post($post_ID);
?>
<img class="img-circle" src="<?php
if (has_post_thumbnail($post_ID)) {
the_post_thumbnail('medium');
}
?>"
<h2><a href="<?php get_permalink($post_url) ?>"</a><?php echo $queried_post->post_title; ?></h2>
<p><?php
query_posts('p=25');
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="entry">
<?php echo substr(get_the_excerpt(), 0, 300); ?><span>[...]</span>
</div>
<?php
endwhile;
endif;
?>
<p><a class="btn btn-default" href="#" role="button" >View details »</a></p>
You'll need to use get_the_post_thumbnail in order to pass in the id.
if (has_post_thumbnail($post_ID)) {
echo get_the_post_thumbnail($post_ID,'medium');
}
the_post_thumbnail actually does this:
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
echo get_the_post_thumbnail( null, $size, $attr );
}
get_the_post_thumbnail in turn uses the current post id if null is passed in.
EDIT
You just need to change this:
<?php
$post_ID= 25;
$post_url= get_permalink($post_ID);
$queried_post = get_post($post_ID);
?>
<img class="img-circle" src="<?php
if (has_post_thumbnail($post_ID)) {
the_post_thumbnail('medium');
}
?>"
To this:
<?php
$post_ID= 25;
$post_url= get_permalink($post_ID);
$queried_post = get_post($post_ID);
?>
<img class="img-circle" src="<?php
if (has_post_thumbnail($post_ID)) {
echo get_the_post_thumbnail($post_ID,'medium');
}
?>"
i have this code
<?php $project_taxonomy_select = get_post_meta( $post->ID, '_ep_project_taxonomy_select', true );
$theCatSlug = get_term_by( 'id', $project_taxonomy_select[0], 'project_filter' );
$theCatSlug = $theCatSlug->slug;
echo $theCatSlug; ?>
how to put the php above in "project_filter=" inside my query in the below php code
<div id="project">
<?php $my_query = new WP_Query('post_type=project&posts_per_page=-1&project_filter=the php here');
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a class="all project-item <?php echo $tax ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php if ( has_post_thumbnail()) { ?><?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'project-thumb-main', true); echo $thumb_url[0]; ?><?php } else { ?><?php echo esc_url(home_url('/')); ?>assets/img/no-project-thumb-main.jpg<?php } ?>">
<div class="magnifier">
<span class="text"><?php the_title(); ?></span>
</div>
</a>
<?php endwhile; wp_reset_query(); ?>
</div>
im using Custom-Metaboxes-and-Fields-for-WordPress
Please Help.. :)
You'd just use simple string concatentation:
WP_Query('post_type=project&posts_per_page=-1&project_filter='.$theCatSlug);
I have a custom field named "Thumbnail" that I use currently to display thumbnails for my posts on my Wordpress site. I recently bought a new template and can't seem to get the code to display this to work. I think it's because the new template is using an array instead.
Currently, I just have to put:
<img src="<?php echo get_post_meta($post->ID, Thumbnail, true); ?>"/>
and it displays perfectly. So here is the code I believe I need to change in the new site:
<?php if($counter <= $big_count): ?>
<?php if($counter == $big_count) { $last = ‘block-item-big-last’; } else { $last = ”; }?>
<div class="block-item-big <?php echo $last; ?>">
<?php if($images && has_post_thumbnail()): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘widget-image’); ?>
<div class="block-image"><a href=’<?php the_permalink(); ?>’ title=’<?php the_title(); ?>’><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width=’290′ height=’160′ />
Looks like it’s using an array? But I don’t know enough about code to get this to work. I tried to put my code in the img tag of the last line above but pretty sure I need to change something else.
Please help! Thanks.
**UPDATE**
Thanks for the info #Ehs4n and #Tim! Still no luck but I decided to try a simpler approach by removing that part of the code that checks for the array. I feel like I am close. Here is what I have now.
<?php if (in_category('movies') ): ?>
<div class="block-item-big-<?php echo $last; ?>">
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo get_post_meta($post->ID, Thumbnail, true); ?>" alt="<?php the_title(); ?>"/></a><?php echo $icon; ?></div>
But the still no thumbnail shows up? Not sure what I am missing, I have a Custom Field called Thumbnail with the appropriate link to the picture on the server on that post. It even works correctly when I put in the actual URL in for the img src to that picture but when I put in the code...
<?php echo get_post_meta($post->ID, Thumbnail, true); ?>
it is like it does not understand that. Firebug tells me that the src is empty, it is like it is not returning Thumbnail Custom Field as it should be?
Below is the entire file which is an include via a Widget to display a category layout on the index of the site.
<?php
add_action('widgets_init', 'pyre_homepage_1col_load_widgets');
function pyre_homepage_1col_load_widgets()
{
register_widget('Pyre_Homepage_1col_Widget');
}
class Pyre_Homepage_1col_Widget extends WP_Widget {
function Pyre_Homepage_1col_Widget()
{
$widget_ops = array('classname' => 'pyre_homepage_1col', 'description' => 'Homepage 1-column recent posts widget.');
$control_ops = array('id_base' => 'pyre_homepage_1col-widget');
$this->WP_Widget('pyre_homepage_1col-widget', 'Avenue Theme: Home 1-column', $widget_ops, $control_ops);
}
function widget($args, $instance)
{
extract($args);
$title = $instance['title'];
$post_type = 'all';
$categories = $instance['categories'];
$posts = $instance['posts'];
$images = true;
$rating = true;
$show_excerpt = isset($instance['show_excerpt']) ? 'true' : 'false';
echo $before_widget;
?>
<?php
$post_types = get_post_types();
unset($post_types['page'], $post_types['attachment'], $post_types['revision'], $post_types['nav_menu_item']);
if($post_type == 'all') {
$post_type_array = $post_types;
} else {
$post_type_array = $post_type;
}
?>
<div class="block full">
<h3><?php echo $title; ?> <span class="arrows">»</span></h3>
<?php
$recent_posts = new WP_Query(array(
'showposts' => $posts,
'cat' => $categories,
));
?>
<?php
$big_count = round($posts / 4);
if(!$big_count) { $big_count = 1; }
?>
<?php $counter = 1; while($recent_posts->have_posts()): $recent_posts->the_post(); ?>
<?php
if(has_post_format('video') || has_post_format('audio') || has_post_format('gallery')) {
$icon = '<span class="' . get_post_format($post->ID) . '-icon"></span>';
} else {
$icon = '';
}
?>
<?php if($counter <= $big_count): ?>
<?php if($counter == $big_count) { $last = 'block-item-big-last'; } else { $last = ''; }?>
<!-- Movies Category -->
<?php if (in_category('movies') ): ?>
<div class="block-item-big-Movies <?php echo $last; ?>">
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?> movie review'><img src="<?php echo get_post_meta($post->ID, Thumbnail, true); ?>"/></a><?php echo $icon; ?></div>
<h2><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?> movie review'><?php the_title(); ?></a></h2>
<span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
<?php if($show_excerpt == 'true'): ?><p><?php echo string_limit_words(get_the_excerpt(), 15); ?> ...</p><?php endif; ?>
</div>
<!-- END Movies Category -->
<!-- Music Category -->
<?php elseif (in_category('music') ): ?>
<div class="block-item-big <?php echo $last; ?>">
<?php if($images && has_post_thumbnail()): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'widget-image'); ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
<?php else: ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
<?php endif; ?>
<h2><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h2>
<span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
<?php if($show_excerpt == 'true'): ?><p><?php echo string_limit_words(get_the_excerpt(), 15); ?> ...</p><?php endif; ?>
</div>
<!-- END Music Category -->
<!-- Else Default Display -->
<?php else: ?>
<div class="block-item-big <?php echo $last; ?>">
<?php if($images && has_post_thumbnail()): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'widget-image'); ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
<?php else: ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
<?php endif; ?>
<h2>MUSIC<a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h2>
<span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
<?php if($show_excerpt == 'true'): ?><p><?php echo string_limit_words(get_the_excerpt(), 15); ?> ...</p><?php endif; ?>
</div>
<!-- END Normal Display -->
<?php endif; ?>
<?php else: ?>
<div class="block-item-small">
<?php if($images && has_post_thumbnail()): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'widget-image-thumb'); ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='50' height='50' /></a><?php echo $icon; ?></div>
<?php else: ?>
<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=50&h=50" alt="<?php the_title(); ?>" width='50' height='50' /></a><?php echo $icon; ?></div>
<?php endif; ?>
<h2><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><?php the_title(); ?></a></h2>
<span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
</div>
<?php endif; ?>
<?php $counter++; endwhile; ?>
</div>
<?php
echo $after_widget;
}
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
$instance['post_type'] = 'all';
$instance['categories'] = $new_instance['categories'];
$instance['posts'] = $new_instance['posts'];
$instance['show_images'] = true;
$instance['show_rating'] = true;
$instance['show_excerpt'] = $new_instance['show_excerpt'];
return $instance;
}
function form($instance)
{
$defaults = array('title' => 'Recent Posts', 'post_type' => 'all', 'categories' => 'all', 'posts' => 4, 'show_excerpt' => null);
$instance = wp_parse_args((array) $instance, $defaults); ?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
<input class="widefat" style="width: 216px;" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('categories'); ?>">Filter by Category:</label>
<select id="<?php echo $this->get_field_id('categories'); ?>" name="<?php echo $this->get_field_name('categories'); ?>" class="widefat categories" style="width:100%;">
<option value='all' <?php if ('all' == $instance['categories']) echo 'selected="selected"'; ?>>all categories</option>
<?php $categories = get_categories('hide_empty=0&depth=1&type=post'); ?>
<?php foreach($categories as $category) { ?>
<option value='<?php echo $category->term_id; ?>' <?php if ($category->term_id == $instance['categories']) echo 'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
<?php } ?>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('posts'); ?>">Number of posts:</label>
<input class="widefat" style="width: 30px;" id="<?php echo $this->get_field_id('posts'); ?>" name="<?php echo $this->get_field_name('posts'); ?>" value="<?php echo $instance['posts']; ?>" />
</p>
<p>
<input class="checkbox" type="checkbox" <?php checked($instance['show_excerpt'], 'on'); ?> id="<?php echo $this->get_field_id('show_excerpt'); ?>" name="<?php echo $this->get_field_name('show_excerpt'); ?>" />
<label for="<?php echo $this->get_field_id('show_excerpt'); ?>">Show excerpt</label>
</p>
<?php }
}
?>
Throw in a print_r($image) to find out if Image is an array. What result is coming out of using image[0]?
If you are using custom fields to store thumbnail paths, why are you confused with the code used in your template.
You can still use your old code to get the image
<?php echo get_post_meta($post->ID, Thumbnail, true); ?>
Looking at your template's code, it uses Wordpress function wp_get_attachment_image_src() which takes three parameters, $attachement_id - to pass id of that media, $size - media size / image size to display & third optional $icon to display an icon to represent the attachment. Here you are passing $attachment_id of the image set as your post thumbnail in the post and the size. The function in turn returns an array containing url, width and height, url being the first one, so using $image[0] will return the url of the image, which is fine.
If the image is still not being displayed, you need to confirm whether you have attached image as post thumbnail in your post and that the $images variable returns true on if clause.