SDCCS: Accreditation

Documentation:

HTML:

<!-- Accreditation --> <div id="accreditation"> <div id="accreditation-inner"> <div id="accreditation-title"> <h4>Accreditation</h4> </div> <div id="accreditation-divider"> </div> <div id="accreditation-logo-container"> <?php if( have_rows('accreditation', 'option') ): $counter = 0; while( have_rows('accreditation', 'option') ): the_row(); $image = get_sub_field('accreditation_image'); $link = get_sub_field('accreditation_link'); $custom_width = get_sub_field('accreditation_custom_width'); // vars $url = $image['url']; $title = $image['title']; $alt = $image['alt']; $caption = $image['caption']; // thumbnail $size = 'thumbnail'; $width = $image['sizes'][ $size . '-width' ]; if ($link) { echo '<a href="' . $link . '">'; } ?> <div class="accreditation-logo-single" style="background-image: url(<?php echo $url ?>); width: <?php if ($custom_width) { echo $custom_width; } else { echo $width; } ?>px"></div> <?php if ($link) { echo '</a>'; } endwhile; endif; ?> </div> </div> </div>

CSS:

/* Accreditation */ #accreditation { float: left; width: 100%; padding: 40px 0; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; h4 { text-transform: uppercase; font-weight: 300; margin: 0; } } #accreditation-inner { > div { display: inline-block; float: left; } } div#accreditation-title { height: 100px; display: flex; justify-content: center; align-items: center; } #accreditation-divider { background-color: #000; height: 100px; margin: 0 50px; width: 1px; } #accreditation-logo-container { & > .accreditation-logo-single:last-child { margin: 0; } } .accreditation-logo-single { display: inline-block; width: 100px; height: 100px; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-right: 30px; } @media (max-width: 992px) { #accreditation-title, #accreditation-logo-container { width: 100% !important; text-align: center; } div#accreditation-divider { display: none; } .accreditation-logo-single { width: 200px !important; display: block; text-align: center; margin: 0 auto 20px; } #accreditation-logo-container { & > .accreditation-logo-single:last-child { margin: 0 auto; } } }

PHP:

function acf_options_add_accreditation() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_585ff5419a6f0', 'label' => 'Accreditation', 'name' => '', 'type' => 'tab', 'parent' => 'theme_settings', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'key' => 'field_58d5d0dfc665a', 'parent' => 'theme_settings', 'label' => 'Accreditation', 'name' => 'accreditation', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'collapsed' => '', 'min' => 0, 'max' => 5, 'layout' => 'block', 'button_label' => '', 'sub_fields' => array ( array ( 'key' => 'field_58d5dfeec665b', 'label' => 'Accreditation Image', 'name' => 'accreditation_image', 'type' => 'image', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'return_format' => 'array', 'preview_size' => 'medium', 'library' => 'all', 'min_width' => '', 'min_height' => '', 'min_size' => '', 'max_width' => '', 'max_height' => '', 'max_size' => '', 'mime_types' => '', ), array ( 'key' => 'field_58d5dafe1272f', 'label' => 'Accreditation Link', 'name' => 'accreditation_link', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', ), array ( 'key' => 'field_58d5fa521272e', 'label' => 'Accreditation Custom Width', 'name' => 'accreditation_custom_width', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', ), ), )); endif; } add_action( 'acf/init', 'acf_options_add_accreditation' );