Making custom field image attachment work - WordPress

Question

I am working on adding some functionality to a pre-existing WordPress site. This site was not written by me, I am simply tweaking the pre-existing code.

I'm trying to add an image that sits above some accordion dropdowns on one of our templates. I've been able to add the custom field to the custom_fields.php file, and it is showing up on the WP Admin side, but I cannot figure out how to make the image show up in the browser.

The image I'm trying to add I am naming "accordion_image"

Custom Field:

Carbon_Container::factory('custom_fields', __('Info Page Titles', 'domain'))
    ->show_on_post_type('page')
    ->show_on_template('template-info.php')
    ->add_fields(array(
        Carbon_Field::factory('text', 'info_subtitle'),
    ));

Carbon_Container::factory('custom_fields', __('Accordions Section', 'domain'))
    ->show_on_post_type('page')
    ->show_on_template('template-info.php')
    ->add_fields(array(
        Carbon_Field::factory('text', 'acc_section_title', 'Section Title'),
        Carbon_Field::factory('complex', 'accordions')
            ->add_fields(array(
                Carbon_Field::factory('text', 'accordions_title'),
                Carbon_Field::factory('complex', 'accordion')
                    ->add_fields(array(
            Carbon_Field::factory('attachment', 'accordion_image')
              ->set_required(true),
                        Carbon_Field::factory('text', 'accordion_head')
                            ->set_required(true),
                        Carbon_Field::factory('textarea', 'accordion_content')
                            ->set_required(true),
                    )),
            )),
    ));

Markup from template:

            <?php 
            $acc_section_title = carbon_get_the_post_meta('acc_section_title');
            $section_accordions = carbon_get_the_post_meta('accordions', 'complex');

            if (!empty($section_accordions) && is_array($section_accordions)): ?>
                <div class="col-right">
                    <?php if ($acc_section_title): ?>
                        <h4><?php echo esc_html($acc_section_title); ?></h4>
                    <?php endif ?>

                    <div class="faq">                       
                        <?php foreach ($section_accordions as $counter => $accordions): 
                            $accordions_title = $accordions['accordions_title'];

                            if ($accordions_title): ?>
                                <h5><?php echo esc_html($accordions_title) ?></h5>
                            <?php endif ?>

                            <?php if (!empty($accordions['accordion']) && is_array($accordions['accordion'])): ?>
                                <div class="accordion">
                                  <?php foreach ($accordions['accordion'] as $acc_counter => $accordion): ?>
                                      <div class="accordion-section">
                                        <?php 
                  $accordion_image = $accordion['accordion_image'];
                                        $accordion_head = $accordion['accordion_head'];
                                        $accordion_content = $accordion['accordion_content'];

                   if ($accordion_image): ?>
                     <div class="accordion-img">
                      <?php echo esc_html($accordion_image) ?>
                    </div><!-- /.accordion-img -->
                  <?php endif ?>


                                        if ($accordion_head): ?>
                                            <div class="accordion-head">
                                                <?php echo esc_html($accordion_head) ?>
                                            </div><!-- /.accordion-head -->
                                        <?php endif ?>

                                        <?php if ($accordion_content): ?>
                                            <div class="accordion-body">
                                                <?php echo wpautop($accordion_content); ?>
                                            </div><!-- /.accordion-body -->
                                        <?php endif ?>
                                      </div><!-- /.accordion-section -->
                                  <?php endforeach ?>
                                </div><!-- /.accordion -->
                            <?php endif ?>
                        <?php endforeach ?>
                    </div><!-- /.faq -->
                </div><!-- /.col-right -->
            <?php endif ?>

I'm just learning php, so I apologize if this is a silly question. Thanks for your help everyone!

Answer 1

Looks like the issue is a mix of syntax issues...and a simple problem where you're echoing the ID of the image, but not outputting the image itself. Rather than echo esc_html($accordion_image);, you want to use the wp_get_attachment_image() function to echo wp_get_attachment_image( esc_html($accordion_image), 'full' ); like so:

$acc_section_title = carbon_get_the_post_meta('acc_section_title');
$section_accordions = carbon_get_the_post_meta('accordions', 'complex');

if (!empty($section_accordions) && is_array($section_accordions)): ?>
    <div class="col-right">
        <?php if ($acc_section_title): ?>
            <h4><?php echo esc_html($acc_section_title); ?></h4>
        <?php endif; ?>

        <div class="faq">                       
            <?php foreach ($section_accordions as $counter => $accordions): 
                $accordions_title = $accordions['accordions_title'];

                if ($accordions_title): ?>
                    <h5><?php echo esc_html($accordions_title); ?></h5>
                <?php endif; ?>

                <?php if (!empty($accordions['accordion']) && is_array($accordions['accordion'])): ?>
                    <div class="accordion">
                      <?php foreach ($accordions['accordion'] as $acc_counter => $accordion): ?>
                          <div class="accordion-section">
                                <?php 
                                $accordion_image = $accordion['accordion_image'];
                                $accordion_head = $accordion['accordion_head'];
                                $accordion_content = $accordion['accordion_content'];

                                if ($accordion_image): ?>
                                    <div class="accordion-img"> 
                                        <?php echo wp_get_attachment_image( esc_html($accordion_image), 'full' ); ?>
                                    </div><!-- /.accordion-img -->
                                <?php endif; ?>

                                <?php if ($accordion_head): ?>
                                    <div class="accordion-head">
                                        <?php echo esc_html($accordion_head); ?>
                                    </div><!-- /.accordion-head -->
                                <?php endif; ?>

                                <?php if ($accordion_content): ?>
                                    <div class="accordion-body">
                                        <?php echo wpautop($accordion_content); ?>
                                    </div><!-- /.accordion-body -->
                                <?php endif; ?>
                          </div><!-- /.accordion-section -->
                      <?php endforeach; ?>
                    </div><!-- /.accordion -->
            <?php endif; endforeach; ?>
        </div><!-- /.faq -->
    </div><!-- /.col-right -->
<?php endif; ?>