Home › Forums › General Issues › Get term ACF Image Field
I have code to load the last 6 terms and only use terms without children so I get the months and not the years which are both part of the same Taxonomy as terms. I can already load the titles as links, but I am trying to load the attached ACF image field which I am failing to do.
I use $summaryimage = get_field('summary_preview_image');
inside this block.php
file to then use it for wp_get_attachment_image( $summaryimage, $size )
. But it seems that the variable is not loading anything and so my term image is not being loaded. Question is why this is not working inside wp-content/themes/theme/blocks/spotlight/block.php
I am guessing cause I perhaps need to indicate more in the get_field request to grab the image from the specific group which is used to attach a custom filed to the term.. But how?
$args = array( 'hide_empty=0',
'childless' => 1,
'number' => 6,
'orderby' => 'ID',
'order' => 'ASC'
);
$terms = get_terms( 'molecules_of_the_month', $args );
if ( ! empty( $terms ) ) :
$summaryimage = get_field('summary_preview_image');
print_r($summaryimage);
$size = 'full'; // (thumbnail, medium, large, full or custom size)
$count = count( $terms );
$i = 0;
$term_list = '<p class="molecule-of-the-month">';
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="slider mobile-slider splide" data-splide='{ "type" : "loop", "perPage": "3", "arrows": 0, "breakpoints": { "99999": { "destroy": 1 }, "767": { "perPage": "1" } } }'>
<div class="splide__track">
<ul class="post-grid splide__list">
<?php
if($term_list):
foreach ( $terms as $term ) {
$i++;
$term_list .= '<a href="' . esc_url( get_term_link( $term ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'drughunter' ),
$term->name ) ) . '">' . $term->name . '</a><figure class="post-featured-image">' .
wp_get_attachment_image( $summaryimage, $size )
. '</figure>';
if ( $count != $i ) {
$term_list .= ' · ';
}
else {
$term_list .= '
';
}
}
echo $term_list;
endif; ?>
</ul>
</div>
</div>
</div>
<?php endif;?>
Did try
$terms = get_terms( 'molecules_of_the_month', $args );
if ( ! empty( $terms ) ) :
$termid = get_queried_object()->term_id;
print_r($termid);
$summaryimage = get_field('summary_preview_image', $termid);
// print_r($summaryimage);
$size = 'full'; // (thumbnail, medium, large, full or custom size)
$count = count( $terms );
but also do not get the term id . Perhaps I need to do another query on top, not sure yet…
Would the get field not need the taxonomy name? As per the docs
For example:
$summaryimage = get_field('summary_preview_image', 'tax_name_'.$termid);
Assuming the image is assigned to the taxonomy.
Thanks for the feedback @jarvis . When I Use this updated code:
$terms = get_terms( 'molecules_of_the_month', $args );
if ( ! empty( $terms ) ) :
$termid = get_queried_object()->term_id;
var_dump($termid);
$summaryimage = get_field('summary_preview_image', 'tax_name_'.$termid);
// print_r($summaryimage);
$size = 'full'; // (thumbnail, medium, large, full or custom size)
$count = count( $terms );
$i = 0;
$term_list = '<p class="molecule-of-the-month">';
?>
does however not work … yet either. The var_dump
shows me string(0) “”
. So besides me not specifying the taxonomy (month here though acf group with field preview_image
is attached to term month and year) something else is still needed I think.
I tried
<?php $args = array( 'hide_empty=0',
'childless' => 1,
'number' => 6,
'orderby' => 'ID',
'order' => 'ASC'
);
$terms = get_terms( 'molecules_of_the_month', $args );
if ( ! empty( $terms ) ) :
// $termid = get_queried_object()->term_id;
// var_dump($termid);
$summaryimage = get_field('summary_preview_image', 'tax_name_', 'molecules_of_the_month');
// print_r($summaryimage);
$size = 'full'; // (thumbnail, medium, large, full or custom size)
$count = count( $terms );
$i = 0;
$term_list = '<p class="molecule-of-the-month">';
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="slider mobile-slider splide" data-splide='{ "type" : "loop", "perPage": "3", "arrows": 0, "breakpoints": { "99999": { "destroy": 1 }, "767": { "perPage": "1" } } }'>
<div class="splide__track">
<ul class="post-grid splide__list">
<?php
if($term_list):
foreach ( $terms as $term ) {
$i++;
$term_list .= '<a href="' . esc_url( get_term_link( $term ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'theme' ),
$term->name ) ) . '">' . $term->name . '</a><figure class="post-featured-image">' .
wp_get_attachment_image( $summaryimage, $size )
. '</figure>';
if ( $count != $i ) {
$term_list .= ' · ';
}
else {
$term_list .= '</p>';
}
}
echo $term_list;
endif; ?>
</ul>
</div>
</div>
</div>
<?php endif;?>
and the var_dump
for summary_image
is NULL
. Do not get it. And the ACF field is there:
if( function_exists('acf_add_local_field_group') ):
acf_add_local_field_group(array(
'key' => 'group_612651d5d04ad',
'title' => 'Molecule Archive Fields',
'fields' => array(
array(
'key' => 'field_6126521430c38',
'label' => 'Slide Deck',
'name' => 'slide_deck',
'type' => 'file',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'array',
'library' => 'all',
'min_size' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'field_6126525730c39',
'label' => 'Slide Deck Preview Image',
'name' => 'preview_image',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'id',
'preview_size' => 'medium',
'library' => 'all',
'min_width' => '',
'min_height' => '',
'min_size' => '',
'max_width' => '',
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'field_6131b9c9bedc9',
'label' => 'Summary',
'name' => 'summary',
'type' => 'file',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'array',
'library' => 'all',
'min_size' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'field_6131b9e1bedca',
'label' => 'Summary Preview Image',
'name' => 'summary_preview_image',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'id',
'preview_size' => 'medium',
'library' => 'all',
'min_width' => '',
'min_height' => '',
'min_size' => '',
'max_width' => '',
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
),
'location' => array(
array(
array(
'param' => 'taxonomy',
'operator' => '==',
'value' => 'molecules_of_the_month',
),
),
array(
array(
'param' => 'taxonomy',
'operator' => '==',
'value' => 'molecules_of_the_year',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
));
endif;
<?php if( $molecules_of_the_month = get_terms( array( 'taxonomy' => 'molecules_of_the_month' ) ) ) :
foreach( $molecules_of_the_month as $month ) :
$summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id );?>
<?php print_r($summaryimage);?>
<?php endforeach;
endif;
?>
Try that on its own, if it works, integrate it into your code
@jarvis I used your code with foreach loops:
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="slider mobile-slider splide" data-splide='{ "type" : "loop", "perPage": "3", "arrows": 0, "breakpoints": { "99999": { "destroy": 1 }, "767": { "perPage": "1" } } }'>
<div class="splide__track">
<ul class="post-grid splide__list">
<?php
if( $molecules_of_the_month = get_terms( array( 'taxonomy' => 'molecules_of_the_month' ) ) ) :
foreach( $molecules_of_the_month as $month ) :
$summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id );
$size = 'full'; // (thumbnail, medium, large, full or custom size)
print_r($summaryimage);
// $molecules_of_the_month .= '<a href="' . esc_url( get_term_link( $month ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'theme' ),
// $month->name ) ) . '">' . $month->name . '</a><figure class="post-featured-image">' .
// wp_get_attachment_image( $summaryimage, $size ) . '</figure>';
endforeach;
endif; ?>
</ul>
</div>
</div>
</div>
and I know get 328235043514
or this using var_dump
NULL int(3282) bool(false) bool(false) bool(false) int(3504) int(3514) bool(false) NULL bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false)
so I am getting something now. So I guess I needed to load the image in the foreach loop. But I also see you used:
<?php $summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id );?>
with term_ .$month->term_id
which I am clearly not familiar enough with. Besides understanding this better I also need to load the image url so guess I do not want ID numbers only. How would I do that?
@jarvis I used your code with foreach loops:
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="slider mobile-slider splide" data-splide='{ "type" : "loop", "perPage": "3", "arrows": 0, "breakpoints": { "99999": { "destroy": 1 }, "767": { "perPage": "1" } } }'>
<div class="splide__track">
<ul class="post-grid splide__list">
<?php
if( $molecules_of_the_month = get_terms( array( 'taxonomy' => 'molecules_of_the_month' ) ) ) :
foreach( $molecules_of_the_month as $month ) :
$summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id );
$size = 'full'; // (thumbnail, medium, large, full or custom size)
print_r($summaryimage);
// $molecules_of_the_month .= '<a href="' . esc_url( get_term_link( $month ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'theme' ),
// $month->name ) ) . '">' . $month->name . '</a><figure class="post-featured-image">' .
// wp_get_attachment_image( $summaryimage, $size ) . '</figure>';
endforeach;
endif; ?>
</ul>
</div>
</div>
</div>
and I know get 328235043514
or this using var_dump
NULL int(3282) bool(false) bool(false) bool(false) int(3504) int(3514) bool(false) NULL bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false) bool(false)
so I am getting something now. So I guess I needed to load the image in the foreach loop. But I also see you used:
<?php $summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id );?>
with term_ .$month->term_id
which I am clearly not familiar enough with. Besides understanding this better I also need to load the image url so guess I do not want ID numbers only. How would I do that?
NB had to post this 3 times to make it stick on the forum
Okay, using this code
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="slider mobile-slider splide" data-splide='{ "type" : "loop", "perPage": "3", "arrows": 0, "breakpoints": { "99999": { "destroy": 1 }, "767": { "perPage": "1" } } }'>
<div class="splide__track">
<ul class="post-grid splide__list">
<?php
if( $molecules_of_the_month = get_terms( array( 'taxonomy' => 'molecules_of_the_month', $args ) ) ) :
foreach( $molecules_of_the_month as $month ) :
$summaryimage = get_field('summary_preview_image', 'term_' .$month->term_id ); // field, id and format value
// $summaryimage = get_field('summary_preview_image', 'term_name_', 'molecules_of_the_month'); // NULL++
$size = 'full'; // (thumbnail, medium, large, full or custom size)
// var_dump($summaryimage);
echo '<a href="' . esc_url( get_term_link( $month ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'drughunter' ), $month->name) ) . '">'
. $month->name . '</a>';
endforeach;
endif; ?>
</ul>
</div>
</div>
</div>
I have the summaryimage
loading ids but not in use yet as I need image url. This so I can load the image, title and short description and link it all.
I also can still load term links using this loop and an echo
so that is fine. But need to work out loading image first.
Furthermore I need to include the $args
I had before. Not sure how with current setup. Doing some trials still.
Wait, echo wp_get_attachment_image( $summaryimage, $size );
does seem to try to load images now like:
<img width="1191" height="1684" src="https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug.png" class="attachment-full size-full" alt="" loading="lazy" srcset="https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug.png 1191w, https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug-212x300.png 212w, https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug-724x1024.png 724w, https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug-768x1086.png 768w, https://site.test/wp-content/uploads/2021/10/2021-MOTM-Aug-1086x1536.png 1086w" sizes="(max-width: 1191px) 100vw, 1191px">
so I am making progress and thanks to you @jarvis . Thanks a lot so far.
Now I just need to add proper html, include $args
, load part of text or excerpt and then I will be done.
Seems that I need to use WP_Query
to loads arguments
$args = array( 'hide_empty=0',
'childless' => 1,
'number' => 6,
'orderby' => 'ID',
'order' => 'ASC'
);
if I want to use these in get_terms
. See https://developer.wordpress.org/reference/classes/wp_term_query/get_terms/#user-contributed-notes
example:
<ul>
<?php
$args = array(
'taxonomy' => 'category',
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false,
);
$the_query = new WP_Term_Query($args);
foreach($the_query->get_terms() as $term){
?>
<li><?php echo $term->name." (".$term->count.")"; ?></li>
<?php
}
?>
</ul>
Will look into that.
Had to use
<?php
$args = array( 'hide_empty=0',
'taxonomy' => 'molecules_of_the_month',
'childless' => 1,
'number' => 6,
'orderby' => 'ID',
'order' => 'ASC'
);
$the_query = new WP_Term_Query($args);
foreach($the_query->get_terms() as $term) :
// foreach( $molecules_of_the_month as $month ) : ?>
<!-- Post Content goes here -->
<li class="post-grid-post splide__slide">
<?php
$summaryimage = get_field('summary_preview_image', 'term_' .$term->term_id ); // field, id and format value
to make it work. Well, that seems to make most of what I want do. Need to limit description, tweak html to work on mobile. But will work well soon.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.