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

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><a href="' . esc_url( $term_link ) . '">' . $term->name . '</a></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(); ?>