single-detail.php

<div class="product-thumbnail-container clr">
    <div class="product-thumbnail-wrap">
        <img data-big="<?php echo $url ?>" title="<?php the_field('colour'); ?>" tray="A.1.C" class="product-thumb product-thumb-active" src="<?php the_field('featured_image_a_thumbnail'); ?>" />
        <div class="product-thumbnail-name"><?php the_field('colour'); ?></div>
    </div>
    
    <?php if(get_field('featured_image_b')) { ?>
        <div class="product-thumbnail-wrap">
            <img data-big="<?php the_field('featured_image_b'); ?>" tray="B.1.B" title="<?php the_field('featured_image_b_thumbnail_name'); ?>" class="product-thumb" src="<?php the_field('featured_image_b_thumbnail'); ?>" />
            <div class="product-thumbnail-name"><?php the_field('featured_image_b_thumbnail_name'); ?></div>
        </div>
    <? } ?>
</div>
<div class="tray-reference">
    <?php $value = get_field('product_tray'); ?>
    <div class="tray-wrap" data-table="A" style="<?php if (substr($value, 0, 1) !== 'A'): ?>display: none<?php endif; ?>">
        <h6><h6>Tray A</h6></h6>
        <table>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.1.A') !== false) { echo 'tray-active'; } ?>" data-tray="A.1.A">A.1.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.1.B') !== false) { echo 'tray-active'; } ?>" data-tray="A.1.B">A.1.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.1.C') !== false) { echo 'tray-active'; } ?>" data-tray="A.1.C">A.1.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.1.D') !== false) { echo 'tray-active'; } ?>" data-tray="A.1.D">A.1.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.2.A') !== false) { echo 'tray-active'; } ?>" data-tray="A.2.A">A.2.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.2.B') !== false) { echo 'tray-active'; } ?>" data-tray="A.2.B">A.2.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.2.C') !== false) { echo 'tray-active'; } ?>" data-tray="A.2.C">A.2.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.2.D') !== false) { echo 'tray-active'; } ?>" data-tray="A.2.D">A.2.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.3.A') !== false) { echo 'tray-active'; } ?>" data-tray="A.3.A">A.3.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.3.B') !== false) { echo 'tray-active'; } ?>" data-tray="A.3.B">A.3.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.3.C') !== false) { echo 'tray-active'; } ?>" data-tray="A.3.C">A.3.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.3.D') !== false) { echo 'tray-active'; } ?>" data-tray="A.3.D">A.3.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.4.A') !== false) { echo 'tray-active'; } ?>" data-tray="A.4.A">A.4.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.4.B') !== false) { echo 'tray-active'; } ?>" data-tray="A.4.B">A.4.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.4.C') !== false) { echo 'tray-active'; } ?>" data-tray="A.4.C">A.4.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'A.4.D') !== false) { echo 'tray-active'; } ?>" data-tray="A.4.D">A.4.D</td>
          </tr>
        </table>
    </div>
    <div class="tray-wrap" data-table="B" style="<?php if (substr($value, 0, 1) !== 'B'): ?>display: none<?php endif; ?>">
        <h6><h6>Tray B</h6></h6>
        <table>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.1.A') !== false) { echo 'tray-active'; } ?>" data-tray="B.1.A">B.1.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.1.B') !== false) { echo 'tray-active'; } ?>" data-tray="B.1.B">B.1.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.1.C') !== false) { echo 'tray-active'; } ?>" data-tray="B.1.C">B.1.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.1.D') !== false) { echo 'tray-active'; } ?>" data-tray="B.1.D">B.1.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.2.A') !== false) { echo 'tray-active'; } ?>" data-tray="B.2.A">B.2.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.2.B') !== false) { echo 'tray-active'; } ?>" data-tray="B.2.B">B.2.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.2.C') !== false) { echo 'tray-active'; } ?>" data-tray="B.2.C">B.2.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.2.D') !== false) { echo 'tray-active'; } ?>" data-tray="B.2.D">B.2.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.3.A') !== false) { echo 'tray-active'; } ?>" data-tray="B.3.A">B.3.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.3.B') !== false) { echo 'tray-active'; } ?>" data-tray="B.3.B">B.3.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.3.C') !== false) { echo 'tray-active'; } ?>" data-tray="B.3.C">B.3.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.3.D') !== false) { echo 'tray-active'; } ?>" data-tray="B.3.D">B.3.D</td>
          </tr>
          <tr>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.4.A') !== false) { echo 'tray-active'; } ?>" data-tray="B.4.A">B.4.A</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.4.B') !== false) { echo 'tray-active'; } ?>" data-tray="B.4.B">B.4.B</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.4.C') !== false) { echo 'tray-active'; } ?>" data-tray="B.4.C">B.4.C</td>
            <td align="center" valign="middle" class="<?php if (strpos($value,'B.4.D') !== false) { echo 'tray-active'; } ?>" data-tray="B.4.D">B.4.D</td>
          </tr>
        </table>
    </div>
    <div class="tray-wrap" data-table="None" style="<?php if (strpos($value,'None Selected') === false): ?>display: none<?php endif; ?>">
        <span style='color:#6e6e6e;'>There is currently no tray reference for this colour.</span>
    </div>  
</div>