WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Include large full width image with the_excerpt() (19 posts)

  1. jalacom
    Member
    Posted 2 years ago #

    Hi,
    Hopefully someone is able to help me with this. I'm finding my ignorance knows no bounds.
    This is my site: gtsb
    I have my site set up with the homepage displaying excerpts of the most recent posts. I would like an image to show up with that excerpt (if there is one present in the post). I would also like that image to be full width. I have a screen shot here: http://www.filedropper.com/screenshot2012-04-03at125629pm that I uploaded to filedropper. I am currently using a function called Catch That Image that I found at wprecipes.com. It sort of does what I want. But I'm unsure how to control the image so I can make the width fill the full space. Not sure if this is the best method and if I can adjust it to do what I want. This avoids using custom fields (however i'd use that method as well if i knew how to). I've heard a lot about using custom fields and a few other methods, but have not been able to figure them out either.
    If someone can lead me in the right direction i would appreciate it

  2. jalacom
    Member
    Posted 2 years ago #

    Ok so I've found this add_image_size function that might work here http://www.studiograsshopper.ch/web-development/wordpress-featured-images-add_image_size-resizing-and-cropping-demo/

    Still trying to wade through how this would work and be applied.

  3. esmi
    Forum Moderator
    Posted 2 years ago #

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    you could use css;
    example:

    img.thumbnail{width:560px;height:auto;margin: auto 0!important;}

    this will obviously stretch smaller images;

    or use:

    img.thumbnail{max-width:560px;height:auto;margin: auto 0!important;}

    and possibly give the image a more unique css class

  5. jalacom
    Member
    Posted 2 years ago #

    Thanks for the info.
    I'll try to figure this out. I don't find the WordPress Codex as being all that easy to follow and understand. But again i'm not very well versed in most of this stuff.

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    Why not just use <?php the_post_thumbnail('full');?>?

  7. jalacom
    Member
    Posted 2 years ago #

    Alchymyth,
    yeah I tried that, and it works. However as I'm handing this site off to the client i want to make sure they're not stretching their images.

  8. jalacom
    Member
    Posted 2 years ago #

    Esmi,
    I'll give it a shot. Reason for not using it? Because I've never heard of it. Let's see what happens.

  9. esmi
    Forum Moderator
    Posted 2 years ago #

    It is fully documented on the page I linked to above :-)

  10. jalacom
    Member
    Posted 2 years ago #

    Yeah I'm going through it now. the problem I have with the "full documentation" is I'm not well versed in PHP to begin with so I end up pasting in code incorrectly. All the information i'm sure is there, but I'm not sure how to interpret it. I'm given the correct snippet but not the right place to put it. I've thrown quite a few errors, crashing the site in the process, because I placed something wrong in the functions.php file. I'll be given a bit of code to place there, which is great, but i don't know where to place it.

  11. esmi
    Forum Moderator
    Posted 2 years ago #

    You say that your home (main posts) page is currently display an excerpt, yes? If so, it will probably be using <?php the_excerpt();?>. If so, all you need to do is add <?php the_post_thumbnail('full');?> either immediately above or below <?php the_excerpt();?>.

  12. jalacom
    Member
    Posted 2 years ago #

    Esmi,

    Ok. I was thinking that was correct. I did it like this

    <div class="entry-content">
    			<?php the_post_thumbnail('full');?>
    			<?php the_excerpt(); ?>
    			<p><a class="readmore" href="<?php echo get_permalink(); ?>"> Read More...</a></p>
    		</div>

    I saw that I need to add this <?php add_theme_support( $feature ); ?> to my functions.php file as well right? I have added it now....don't have any errors this time so it should be good to go...I hope :) Not getting any images showing yet. But that might be an issue with the sample image i currently have on the site.

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    Sorry - I assumed your theme already has support for featured images via add_theme_support(). Remember that you will need to specify the featured image for each post on the Add New/Edit Post page.

  14. jalacom
    Member
    Posted 2 years ago #

    Good to know. I'll give this all a try. Thanks so much for the help

  15. jalacom
    Member
    Posted 2 years ago #

    Looks like it's working! … mostly. I'm using <?php the_post_thumbnail('large');?> But I'm doing something wrong. I set the feature image as large (which i adjusted in Media to be 570 x 300, the height could be arbitrary, i'm not partial to it ) But after all that the image is sizing to 400x300. Not sure where that is being called and how to change it.

  16. yurini
    Member
    Posted 2 years ago #

    jalacom

    It maybee gets the picture of 400x300 pixles because it did crop and set the sizes at the moment you uploaded it to WordPress. If you changed the "large" thumbnail sizes under "Media" recently you have to remove and reupload your picture again to make WordPress crop and/or resize your pictures to the new sizes you set under Media. It should then pull the correct size if you call for 'large'.

    This might be the problem in your case?

  17. yurini
    Member
    Posted 2 years ago #

    You can also make the image clickable and link it to the article.

    Here is an example how to use an a-link with the the_post_thumbnail command:

    <?php if ( has_post_thumbnail()) : ?>
       <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
       <?php the_post_thumbnail(); ?>
       </a>
     <?php endif; ?>
  18. jalacom
    Member
    Posted 2 years ago #

    Ok fixed it using the codex link from above and referencing the Post Thumbnail Linking to Large Image Size section.

  19. jalacom
    Member
    Posted 2 years ago #

    Yurini,
    Great thanks. That's actually ideal to have it link to the article.

    I think the image needing to be reuploaded was the issue as you mentioned.

    Is there a way to set just the width of a given size so the image will always be 560px wide? I'm not as concerned about the height. The problem I have is that currently I have the height set to 300px with the width at 560px, the resized image (since it's not cropping) resizes to either 300px tall or 560px wide, which ever it hits first while resizing proportionally. One solution would be to just upload the correct dimension, however I'd like to make it a little more fool proof with less work for my client.

    Thanks so much for your input. The a img link to the article is great.

Topic Closed

This topic has been closed to new replies.

About this Topic