Support » Fixing WordPress » ordering blog image+meta in archive

  • Resolved arsm

    (@arsenalemusica)


    In my blog archives, I just wish to move the post’s image above the meta tags, but if I do move the image portion then the meta disappears (it becomes hidden).

    The template has this html

    <div class="container">
    <div class="content">
    <div class="date-month">[...]</div>
    <h2 class="title"></h2>
    <div class="blog-meta-data">[...]</div>
    <?php if ( has_post_thumbnail() ) {?>
    <a class="blog-img-search" href="<?php echo esc_url( get_permalink() );?>" class="blog-image"><?php the_post_thumbnail( 'large' );?></a>
    <?php }?>
    </div>
    </div>

    and I modified it as follows

    <div class="container">
    <?php if ( has_post_thumbnail() ) {?>
    <a class="blog-img-search" href="<?php echo esc_url( get_permalink() );?>" class="blog-image"><?php the_post_thumbnail( 'large' );?></a>
    <?php }?>
    <div class="content">
    <div class="date-month">[...]</div>
    <h2 class="title"></h2>
    <div class="blog-meta-data">[...]</div>
    </div>
    </div>

    What is wrong? Can I not move IF statements like that?

    • This topic was modified 1 week, 4 days ago by Yui.
    • This topic was modified 1 week, 3 days ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You can, but you’ve altered the CSS relationships in doing so. Selectors that had previously applied likely no longer apply. The meta is probably still in the HTML output, but it had become hidden by other elements. You can try using your browser’s element inspector tool to sort out where the meta is and how to make it visible again.

    BTW, it might be possible to move elements about with CSS alone, depending on the actual HTML structure. It may not require altering the template code. For example by using the flex box model’s “order” property.

    Thread Starter arsm

    (@arsenalemusica)

    …as you said, the image portion can be moved and by doing so the CSS made the title+metatags hide rightly by the new image position itself. So I have modified the CSS of that elements .blog-img-search {display:contents;float:none;} and the title+tags magically moved below the image.
    So I assume the procedure is correct, but is the CSS above actually correct?
    (I’m not used to Flex yet)

    Moderator bcworkz

    (@bcworkz)

    The syntax is fine. If it works as intended then it’s correct 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.