Support

Account

Home Forums ACF PRO Display Image for each entry on Tag Archive

Solved

Display Image for each entry on Tag Archive

  • Hi, I’m creating a sponsor directory using ACF Pro and a custom post type. You can see an example at:
    http://njcai.pairserver.com/online-directory/

    It’s broken down into a taxonomy (Sponsor Level) and then each entry will have tags that are used to identify the industry the entry is in.

    The problem I’m running into is that I cannot seem to get my custom field images (the field is called ‘sponsor-logo’, which I have set to output as a URL) to display on the tag archive.

    In this particular template, the URL for the image is always blank. For example, 2 of the 3 listings on this page have images that won’t display:
    http://njcai.pairserver.com/tag/asphaltmaintenanceseal-coating/

    Here’s the code I’m using to pull it into my tag.php archive:

    <?php 
    // Get the logo, if it exists.
    $image = get_field('sponsor-logo');
    if( get_field('sponsor_logo') ): ?>
    <img class="sponsorlogo" src="<?php echo $image['url']; ?>" width="120" height="120" alt="<?php the_field('sponsor_company_name'); ?>">
    <?php endif; ?>
    

    Any ideas of where I’m going wrong?

  • If you have the image field set to return a url, then using you’re above code you should change the image tag to

    
    <img class="sponsorlogo" src="<?php 
        echo $image; ?>" width="120" height="120" alt="<?php 
        the_field('sponsor_company_name'); ?>">
    
  • Hi John, thanks for your help! So, I noticed I had an inconsistency here with the field name:

    <?php 
    // Get the logo, if it exists.
    $image = get_field('sponsor-logo');
    if( get_field('sponsor_logo') ): ?>

    Having fixed that and changing the image tag to your suggestion now seems to put the image ID in the SRC – for example:

    <img class="sponsorlogo" src="266" width="120" height="120" alt="Hillcrest Paving & Excavating">

    I’ve checked the field setup itself and it is set to output a URL, and does so in other templates. I’m guessing that because this template is for tags of a custom post type, it might require something else?

  • There must be some reason that it’s returning an id instead of the URL. There’s been another question with the same problem recently… in the last few months.

    but I can’t find it. If the same field is returning a url in one place but an id in another then you’re got some kind of compatibility issue. You should deactivate other plugins and see what’s causing it because it will just keep giving you problems. The last time I’m pretty sure it had to do with a woocommerce add on, but it could be anything.

  • I went in and disabled everything except ACF and Custom Post Type UI (since I’m using this for the custom post type) and the problem is still there. However, it made me think of what I had to do to get the tag archives working in the first place. Apparently there is an issue with WordPress archives grabbing tags from custom posts types, so I had to use this code in my functions.php file:

    //Tag Archive
    function namespace_add_custom_types( $query ) {
      if( is_category() || is_tag() && empty( $query->query_vars['suppress_filters'] ) ) {
        $query->set( 'post_type', array(
         'post', 'nav_menu_item', 'sponsors'
    		));
    	  return $query;
    	}
    }
    add_filter( 'pre_get_posts', 'namespace_add_custom_types' );

    And, for the heck of it, here are the other custom scripts I’m running in the functions.php file:

    /*
    * Allows extra HTML items in to the_excerpt instead of stripping them like WordPress does
    */
    function theme_t_wp_improved_trim_excerpt($text) {
    global $post;
    if ( '' == $text ) {
    $text = get_the_content('');
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
    $text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);
    $text = strip_tags($text, '<p>,<ul>,<li>,<ol>,<b>,<strong>,<br>,<a>,<br />');
    $excerpt_length = 70;
    $words = explode(' ', $text, $excerpt_length + 1);
    if (count($words)> $excerpt_length) {
    array_pop($words);
    array_push($words, '[...]');
    $text = implode(' ', $words);
    }
    }
    return $text;
    }
    
    remove_filter('get_the_excerpt', 'wp_trim_excerpt');
    add_filter('get_the_excerpt', 'theme_t_wp_improved_trim_excerpt');
    
    //Drop Down Menu for Tags
    function drop_tags()
    {
    echo "<select class=taglist onChange=\"document.location.href=this.options[this.selectedIndex].value;\">";
    echo "<option>Select a Category:</option>\n";
    foreach (get_tags() as $tag)
    {
    echo "<option value=\"";
    echo get_tag_link($tag->term_id);
    echo "\">".$tag->name."</option>\n";
    }
    echo "</select>";
    }
    
    // Custom Footer Menu Walker
    class example_nav_walker extends Walker_Nav_Menu {
    
        var $current_menu = null;
        var $break_point  = 6;
    
        function start_el(&$output, $item, $depth, $args) {
    
            global $wp_query;
    
            if( !isset( $this->current_menu ) )
                $this->current_menu = wp_get_nav_menu_object( $args->menu );
    
            if( !isset( $this->break_point ) )
                $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;    
    
            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    
            $class_names = $value = '';
    
            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = 'menu-item-' . $item->ID;
    
            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            $class_names = ' class="' . esc_attr( $class_names ) . '"';
    
            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
    
            if( $this->break_point == $item->menu_order )
                $output .= $indent . '</li></ul><ul id=menu-main-menu-2><li' . $id . $value . $class_names .'>';
            else
                $output .= $indent . '<li' . $id . $value . $class_names .'>';
    
            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    
            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;
    
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
    }
    
    I'm not certain that this is the cause of the conflict, but I figured it would be relevant since it's helping create the archive pages.
  • Basically you’re using the standard WP tags taxonomy on your custom post type. So when you’re grabbing posts for your tag you’re getting posts from both your custom post type and Posts?

  • Technically it could work that way. In this case, I’m not actively using the regular Posts area at all.

  • I’m not sure I can help you because I’ve never seen this and don’t know what’s causing the conflict, probably one of those filters you have in place.

    
    $image = get_field('sponsor-logo');
    if (intval($image) == $image) {
      $image = wp_get_attachment_image_src(intval($image), 'full');
      $image = $image[0];
    }
    

    If you’re not too deep into the project to change I’d use a custom taxonomy instead of tags. Even when I’m not using the blog I never touch the standard WP category or tag taxonomies. Custom post type always get custom taxonomies, saves a lot of headaches.

  • John, you’re a genius (even if you didn’t realize it)! That code did the trick:
    http://njcai.pairserver.com/tag/asphaltmaintenanceseal-coating/

    What I ended up with is:

    <?php 
    // Get the logo, if it exists.
    if( get_field('sponsor_logo') ):
    $image = get_field('sponsor_logo');
    if (intval($image) == $image) {
      $image = wp_get_attachment_image_src(intval($image), 'full');
      $image = $image[0];
    }
    ?>
    <img class="sponsorlogo" src="<?php echo $image ; ?>" width="120" height="120" alt="<?php the_field('sponsor_company_name'); ?>">
    <?php endif; ?>

    Thanks so much for your help with this!

  • Well, it’s a hack to get around the problem, not something I generally like doing, but sometimes they are necessary. I figured that’s what you’d need to do when I asked about the using the post tags on a cpt.

  • I should probably explain in. If get_field returns the url the way it should the code won’t do anything but if it returns the id it will get the url.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Display Image for each entry on Tag Archive’ is closed to new replies.