Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Single Page

Customizing the html of the uploaded images

I'm trying to change the html output of the custom field. I can't seem to figure out how this is accomplished.

Here is the code in my single-portfolio.php file:

<?php get_header(); ?>

          <?php

          $header_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );       

          ?>

          <!-- Content Wrapper -->
          <div class="content-wrapper large-12 columns clearfix" data-equalizer-watch>
          <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  

            <?php if (get_the_post_thumbnail()): ?>
              <div id="content-header" style="background-image: url('<?php echo $header_image[0]; ?>');">
                <h1><?php the_title(); ?></h1>  
              </div>
            <?php endif; ?>  

            <div id="content">

              <?php if (get_the_post_thumbnail() == TRUE ): ?>

                <h1 class="hide-title"><?php the_title(); ?></h1>

              <?php else: ?>

                <h1><?php the_title(); ?></h1>  

              <?php endif; ?>

              <?php the_field('description'); ?>  

            </div>          
            <!-- End Content -->

            <aside id="sidebar_right">
              <h4>Sidebar</h4>


              <img src="<?php $image_url; ?>">             

              <ul class="content_gallery">

                <?php

                 $args = array(
                   'post_type' => 'attachment',
                   'numberposts' => -1,
                   'post_status' => null,
                   'post_parent' => $post->ID
                  );

                  $attachments = get_posts( $args );
                     if ( $attachments ) {
                        foreach ( $attachments as $attachment ) {
                          $image_src = wp_get_attachment_url( $attachment->ID);
                           echo '<li>';
                           echo '<a class="th" href="' . $image_src . '">';
                           echo '<img src="' . $image_src . '">';
                           echo '</a>';
                           echo '</li>';
                          }
                     }

                ?>              

              </ul>
            </aside>                         
            <?php endwhile; endif; ?> 
<?php get_footer(); ?>

Here is the HTML that I need output in the sidebar:

<aside id="sidebar_right">
          <ul class="content_gallery clearing-thumbs" data-clearing>
            <li><a class="th" href="img/checkered_past_postcard_large.jpg"><img src="img/checkered_past_postcard.jpg" alt=" "></a></li>
            <li><a class="th" href="img/postcard_final_back.jpg"><img src="img/checkered_past_postcard_back.jpg" alt=" "></a></li>
          </ul> 
</aside>

I noticed something interesting and I am not sure why this is happening, but I did print_r with the attachments array and when I have jpg uploaded, the array is empty. However, if I upload png then the array returns the information that I need. I didn't set the mime type in the $args variable. I am a little confused.

Edit:

So, some of the jpg files do work and some don't. This is very confusing.

1 Answer

Tom Bedford
Tom Bedford
15,645 Points

Hi Eric

With the JPG images check the file extension on them - is it lowercase or uppercase?

i.e. .jpg or .JPG?

I've had problems with uppercase file extensions on some hosting and had to change the extensions to lowercase.

If that doesn't help then is there a big difference in file size with the image that work and those that don't?

Hi Tom,

The extensions are all lowercase.

Recently I deleted all of the portfolio entries and the images that went with them, making sure the uploads directory was empty of images and started over. It seems to be working now. I am not sure why though.

Thanks for the help!