0

EDIT: I've narrowed this down to the img tags within a tags getting stripped out at some point. They show up in the Page Source, but not in inspect element.

I've added a custom category.php, and my images aren't working despite being called in the header.php file. They work in index.php, archives templates, etc.

My code for my category.php is the same as index.php, except I add the category to the WP query.

header.php starting at the body tag:

<body <?php body_class(); ?>>
    <?php
    $options = get_option( 'magazine_options' );
    $cat_id = get_query_var('cat');
    $cat_name = get_cat_name($cat_id);
    if(($cat_name !== $options['magazine_field_current_issue']) && $cat_name !== ''): ?>
        <div class="banner">
            <p>
                Archived Issue: <?php echo $cat_name; ?>
            </p>
        </div>
    <?php endif; ?>
<div id="content" class="site-content">

<div class="navigation">
    <div class="logo">
        <?php
            $custom_logo_id = get_theme_mod( 'custom_logo' );
            $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
            echo '<a href="'.  get_bloginfo('wpurl') . '"><img src="' . $image[0] . '" / /></a>';
        ?>
    </div>
    <div class="mobile-only">
        <a href="" class="mobile-menu"><div class="icon-mobile-menu"></div></a>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'header-mobile-menu' ) ); ?>
    </div>

<?php
    if ( has_nav_menu( 'social' ) ) : ?>
        <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
            <?php
                wp_nav_menu( array(
                    'theme_location' => 'social',
                    'menu_class'     => 'social-links-menu',
                    'depth'          => 1,
                    'link_before'    => '<span class="screen-reader-text">',
                    'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
                ) );
            ?>
            <?php echo do_shortcode('[Wow-Modal-Windows id=1]');?>
        </nav><!-- .social-navigation -->

    <?php endif; ?>
    <div class="search desktop-only">
        <?php get_search_form(); ?>
    </div>
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'header-menu desktop-only' ) ); ?>
</div>
</div>

category.php:

<?php get_header(); ?>

    <div id="primary" class="content-area">
      <?php
        $cat_id = get_query_var('cat');
        $args = array( 'post_type' => 'cover-story', 'posts_per_page' => 1, 'orderby' => 'menu_order', 'order' => 'ASC', 'cat' => $cat_id );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <?php
        $attachment_id = get_post_thumbnail_id( $post->ID);
        $img_src = wp_get_attachment_image_url( $attachment_id, 'full' );
        $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'full' );
        ?>
        <img class="featured-story tablet-only" src="<?php echo esc_url( $img_src ); ?>"
         srcset="<?php echo esc_attr( $img_srcset ); ?>"
         sizes="(max-width: 50em) 87vw, 680px">
         <img class="featured-story mobile-only" src="<?php echo esc_url( $img_src ); ?>"
          srcset="<?php echo esc_attr( $img_srcset ); ?>"
          sizes="(max-width: 50em) 87vw, 680px">
        <div class="cover-story-text mobile-only">
          <p>
            Cover Story
          </p>
          <h2><?php the_title(); ?></h2>
          <a href="<?php the_permalink(); ?>">Read More</a>
        </div>
      <div class="featured-story desktop-only" style="background: url(<?php the_post_thumbnail_url( 'full' ); ?>);">
          <div class="cover-story-text">
            <p>
              Cover Story
            </p>
            <h2><?php the_title(); ?></h2>


            <a href="<?php the_permalink(); ?>">Read More</a>
          </div>
      </div>

      <?php endwhile; ?>
</div>
        </div>
      </div>
      </div>
    </div>

  </main><!-- .site-main -->


<?php get_footer(); ?>

Edit: The admin bar also has a lack of SVGs... This is so odd. WP Admin Bar missing icons

  • 1
    Hi! Unfortunately, it is going to be very hard helping you without seeing some code... Could you show us the custom.php source code, where you modify the WP_Query object and the header.php file so we can see how those images are inserted in the page? – MacPrawn Feb 6 '17 at 20:37
  • I've added the code. – Heather Feb 6 '17 at 21:39
0

Good morning!

So this sounds like unbalanced html tags...

And indeed, if I concatenate your header file with your category.php file, there are a few closing and a closing tags at the end that don't seem to belong there...

I'd suggest a good tag cleanup: make sure everything you open is closed, and you don't have any orphaned closing tags.

Also, but I doubt this relates to your problem here, your logo in the header.php file has an extra backslash:

echo '<a href="'.  get_bloginfo('wpurl') . '"><img src="' . $image[0] . '" / /></a>';

It should be

echo '<a href="'.  get_bloginfo('wpurl') . '"><img src="' . $image[0] . '" /></a>';

UPDATE

Wait, ok, so you added the whole loop at the top for cover-story posts? If that's the case, then you want to call wp_reset_postdata after your loop, otherwise you have affected the normal page's current, main loop. You should also check and only reset the loop if you actually had posts to show. Changing that top part, then, it becomes: (new lines indicated)

<?php
    $cat_id = get_query_var('cat');
    $args = array( 'post_type' => 'cover-story', 'posts_per_page' => 1, 'orderby' => 'menu_order', 'order' => 'ASC', 'cat' => $cat_id );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) { // <-------------
        while ( $loop->have_posts() ) : $loop->the_post();
            $attachment_id = get_post_thumbnail_id( $post->ID);
            $img_src = wp_get_attachment_image_url( $attachment_id, 'full' );
            $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'full' );
?>
<img class="featured-story tablet-only" src="<?php echo esc_url( $img_src ); ?>"
    srcset="<?php echo esc_attr( $img_srcset ); ?>"
    sizes="(max-width: 50em) 87vw, 680px">
<img class="featured-story mobile-only" src="<?php echo esc_url( $img_src ); ?>"
    srcset="<?php echo esc_attr( $img_srcset ); ?>"
    sizes="(max-width: 50em) 87vw, 680px">
<div class="cover-story-text mobile-only">
    <p>
    Cover Story
    </p>
    <h2><?php the_title(); ?></h2>
    <a href="<?php the_permalink(); ?>">Read More</a>
</div>
<div class="featured-story desktop-only" style="background: url(<?php the_post_thumbnail_url( 'full' ); ?>);">
    <div class="cover-story-text">
        <p>
          Cover Story
        </p>
        <h2><?php the_title(); ?></h2>
        <a href="<?php the_permalink(); ?>">Read More</a>
    </div>
</div>

<?php
        endwhile;
        wp_reset_postdata(); // <-------------
    endif; // <-------------
?>

Hope this helps!

  • Updated all of my tags, No luck. My index.php file works and they are the same code except for the added category to the wp query. I also updated that image tag, but that did nothing. Thanks for your help. I'm going to keep digging. – Heather Feb 7 '17 at 15:08
  • Just noticed something - I've updated my answer... – MacPrawn Feb 7 '17 at 15:30
  • That's still not it. This is such a weird bug. – Heather Feb 7 '17 at 15:49
  • Hmmm - indeed it is. And $cat_id is set to a valid category ID? – MacPrawn Feb 7 '17 at 17:50
  • Yup. When I write it to the error log it prints the correct id. – Heather Feb 8 '17 at 14:11

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.