0

Im using the following code on my WordPress custom theme home page to display the latest three portfolio posts:

<?php query_posts('post_type=portfolio&showposts=3'); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" <?php post_class() ?> id="post-<?php the_ID(); ?>">
                <a href="<?php the_permalink() ?>" class="portfolio-box">

                    <?php if ( has_post_thumbnail() ) {
                            $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
                             echo '<img width="100%" src="'.$image_src[0].'" alt="'.$image_alt.'" title="'.$image_title.'">';
                        } else { ?>
                        <img src="<?php bloginfo('template_directory'); ?>/img/fallback.jpg" class="img-responsive" />
                    <?php } ?>

                   <div class="portfolio-box-caption portfolio-box-caption-blue">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                <!-- <?php the_category( ', ' ); ?> -->
                            </div>
                            <div class="project-name-work">
                                <?php the_title(); ?>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

        <?php endwhile; endif; ?>

However the image alt text isn't appearing the in the final page source. Could someone be kind enough to show me where I've gone wrong?

Thanks

0

You need to define $image_alt and $image_title. I don't see where you did it in your code.

You need to change/add like this

<?php if ( has_post_thumbnail() ) {
      $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
      $attachment_meta = get_post(get_post_thumbnail_id());
      echo '<img width="100%" src="'.$image_src[0].'" alt="'.$attachment_meta->post_excerpt.'" title="'.$attachment_meta->post_title.'">';
      } else { ?>
        <img src="<?php bloginfo('template_directory'); ?>/img/fallback.jpg" class="img-responsive" />
    <?php } ?>

Image's 'alt' text is stored as a string in wp_postmeta with the meta_key of '_wp_attachment_image_alt'.

That you can grab like this

$img_alt =  get_post_meta($thumb_id, '_wp_attachment_image_alt', true);

EDIT:

<?php if ( has_post_thumbnail() ) {
      $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'thumbnail' );
      $attachment_meta = get_post(get_post_thumbnail_id());
      $img_alt =  get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);
      echo '<img width="100%" src="'.$image_src[0].'" alt="'.$img_alt.'" title="'.$attachment_meta->post_title.'">';
      } else { ?>
        <img src="<?php bloginfo('template_directory'); ?>/img/fallback.jpg" class="img-responsive" />
    <?php } ?>
9
  • Thanks for your reply. It doesn't really do what I want though. Ideally, I'd like the alt text for the image to be included, not the post_excerpt. Same for the tittle, I'd like the actual image title, not the post_title. All of my images in the media repository have alt text and title text so that's what I'd like to display in the source code.
    – QJD
    Nov 10 '16 at 16:52
  • Each media attachment store it's title in post_title and caption in post_excerpt. The alt is just an example. For the post_title it is the title of the attachment, not the loop post title (for most it will be the filename).try post_content too.
    – Benoti
    Nov 10 '16 at 16:59
  • I edit my answer. Hope you will place it where it must be.
    – Benoti
    Nov 10 '16 at 17:06
  • Where does $img_alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true); need to be placed?
    – QJD
    Nov 10 '16 at 17:15
  • Before the echo to be available in it.
    – Benoti
    Nov 10 '16 at 17:20
0

<?php if ( has_post_thumbnail() ) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ ); $img_alt = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true); $attachment_meta = get_post(get_post_thumbnail_id()); echo '<img width="100%" src="'.$image_src[0].'" alt="'.$img_alt.'" title="'.$attachment_meta->post_title.'">'; } else { ?> <img src="<?php bloginfo('template_directory'); ?>/img/fallback.jpg" class="img-responsive" /> <?php } ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.