WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Formatting Featured Image so it shows in posts they way I want (4 posts)

  1. anoctave
    Member
    Posted 1 year ago #

    I have never before used the Featured Image. I've always used the add media feature, which I like because it lets me style the image the way I want. But the widgets I am using for the front page which puts a random post in the widget box requires the Featured Image(FI) if you want an image to show.

    When I use the FI in the post, the image does not show in the wysiwyg area. When I publish the page with only the FI, the picture displays above the text.

    When I did not see the FI in the wysiwyg area, I re-inserted the picture from the add media feature. This page shows what happens when I have both an FI and an inserted image. The upper picture is the FI in exactly the position it would be without the inserted image. The inserted image is exactly where I mean the image to be with the styling I want.

    When I looked at the HTML source code, only the picture I inserted is shown in the code. So there's nothing there to suggest how I can deal with this issue.

    I want to have thumbnails in my Advance Random Posts widget and the only images it processes are FI.

    So I have a problem. Do you have a solution?

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    If you add an image to your post using the Featured Image panel and then add another image into the editor, then yep, you'll get exactly what you see on your link. You'll have 2 images displayed.

    By default, the featured image will try to resize your uploaded file to 792 x 300px. If you have a look at my demo theme, you'll see exactly how this looks.

    If you want to specify a Featured Image, but not actually have it displayed, so that you can add an image in your content area, then you'll need to remove the following lines from content.php

    <?php if ( has_post_thumbnail() && !is_search() ) { ?>
       <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to %s', 'quark' ), the_title_attribute( 'echo=0' ) ) ); ?>">
          <?php the_post_thumbnail( 'post_feature_full_width' ); ?>
       </a>
    <?php } ?>

    This will stop the Featured Image from displaying in your std post format. If you happen to also be using the other Post Formats, you'll need to remove those lines from those template files as well.

  3. anoctave
    Member
    Posted 1 year ago #

    Thanks for your help, once again.

    I knew what I was doing when I placed both images in the post, one via direct insert and one via Featured Image. I wanted you to see what the problem is.

    I'm very happy with your response and solution. It gives me the flexibility I want and I will try it out tomorrow.

    With regard to styling the positioning, I think one problem may be that you're putting the FI in the header rather than the post. That would make sense if you were using the FI as a banner picture for the post but since it follows the post meta information,rather than the title, it appears at the top of the content and just sits there. I have tried every which way to style this with no success.

    The styling I have done to wp-caption only applies itself to the inserted image.

    So you may want to visit this as a css issue to provide users of your theme with a way to format the FI.

    Thanks again. I hope you don't mind my comments. I never got far enough in any other theme to be able to make such a critique, so for me it's a real step forward.

    After I do the changes tomorrow - if there's no other issue, I'll mark this resolved.

  4. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Thanks for your comments. A Featured Image, often called a Post/Page Thumbnail, is usually some sort of image that is representative for that particular Page or Post. How these images are displayed is dependent entirely on the Theme that is currently in use.

    You're trying to style the .wp-caption class, which is a css class given to images embedded within page content, with a caption. These are semantically different to Featured Images. If you want to style the Featured Image, you have a number of options. You can style the header img tags or alternatively, you can style either the .attachment-post_feature_full_width or .wp-post-image classes.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.