Get the permalink from a loop displaying custom taxonomy titles and images - php

Question

I have a custom post type called projects and a custom taxonomy attached to that called sectors. I have also added the ability to add an image to each taxonomy using Advanced Custom Fields.
I'm displaying a list of the sectors on the homepage of my site which consists of the title of the taxonomy along with its image here:
So far, so good...
I'm struggling with surrounding either the image or title with the permalink for the taxonomy. I'd like to be able to click on it and it takes me to a page showing all of the projects inside that sector.
My loop is as follows:
<div class="container">
<div class="row no-gutters">
<?php
// loop through terms of the Sectors Taxonomy
$getArgs = array(
'parent' => 0,
'order' => 'DESC',
'orderby' => 'count',
'hide_empty' => false,
);
// get the taxonomy we are going to loop through.
$taxonomy = get_terms('sectors', $getArgs);
$terms = get_terms($taxonomy);
// Start the loop through the terms
foreach ($taxonomy as $term) {
// Get acf field Name
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// which size?
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<div class="box-overlay"><?php echo $term->name; ?></div><!-- box overlay -->
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</a>
</div>
</div>
<?php } // end foreach ?>
</div>
</div>
I've tried adding tags like this around the elements I want to be clickable:
<a href="<?php the_permalink(); ?>">
</a>
or
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
</a>
But they don't seem to pull the links through...
Can anyone see what I'm doing wrong? I appreciate any insight at all :)
***** EDIT ***************
This seems to show a list of the taxonomies and also apply the link to them... so it's somehow a mix of both I need I think, this following code works but without the images!...
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) { ?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
<div>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('page-thumb-mine');
}
?>
<?php
$image = get_field('sector_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>

Answer 1

This is from the codex on https://developer.wordpress.org/reference/functions/get_term_link/.
$terms = get_terms( 'species' );
echo '<ul>';
foreach ( $terms as $term ) {
// The $term is an object, so we don't need to specify the $taxonomy.
$term_link = get_term_link( $term );
// If there was an error, continue to the next term.
if ( is_wp_error( $term_link ) ) {
continue;
}
// We successfully got a link. Print it out.
echo '<li>' . $term->name . '</li>';
}
echo '</ul>';
For your specific case, try swapping the above with this: $terms = get_terms( 'sectors' );
Edit:
As for your images, retrieve them with get_field('sector_image', $id_of_term_or_post_or_whatever); Be sure to echo it.
$image = get_field('sector_image', id_of_term_or_post_or_whatever);
echo $image; //this might be $image['url'] or whatever, depending on how you set up ACF

Answer 2

Ok, I think I actually managed to combine the two bits of code like this and it seems to work!
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) {
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<div>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>