PIEN-8524: Display API image (#152)

Display API image instead of default image

Author: Ville

CHANGELOG.MD

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- PIEN-8524: Display API image #152
+
 ## [1.8.0] - 2023-04-11
 
 - PIEN-8157: PHP 8.1

models/single.php

@@ -89,15 +89,18 @@ public function related() : ?array {
                     ? wp_get_post_terms( $item->ID, Category::SLUG )
                     : [];
 
+                $item->api_image_url = get_field( 'image_url', $item->ID );
+                $has_image           = $item->image_id !== 0 || ! empty( $item->api_image_url );
+
+                if ( ! $has_image ) {
+                    $item->image_id = Images::get_default_image_id();
+                }
+
                 if ( ! empty( $categories ) ) {
                     $item->category      = $categories[0]->name;
                     $item->category_link = get_category_link( $categories[0]->ID );
                 }
 
-                $item->image_id = $item->image_id === 0
-                    ? Images::get_default_image_id()
-                    : $item->image_id;
-
                 if ( ! has_excerpt( $item->ID ) ) {
                     $item->post_excerpt = $this->get_related_excerpt( $item );
                 }

partials/views/single/single-related.dust

@@ -14,13 +14,21 @@
             {#related.posts}
                 <div class="column is-6 is-3-widescreen">
                     <div class="related-posts__item mb-4 mb-0-tablet">
-                        {?image_id}
+                        {?api_image_url}
                             <div class="image is-4by3">
                                 <a href="{permalink|url}" aria-hidden="true" tabindex="-1">
-                                    {@image id=image_id size="large" class="objectfit-image" /}
+                                    <img src="{api_image_url|url}" class="objectfit-image" loading="lazy" alt=""/>
                                 </a>
                             </div>
-                        {/image_id}
+                        {:else}
+                            {?image_id}
+                                <div class="image is-4by3">
+                                    <a href="{permalink|url}" aria-hidden="true" tabindex="-1">
+                                        {@image id=image_id size="large" class="objectfit-image" /}
+                                    </a>
+                                </div>
+                            {/image_id}
+                        {/api_image_url}
 
                         {?post_title}
                             <h3 class="h4 mt-5 mb-5">