WordPress.org

Ready to get started?Download WordPress

Forums

Coraline
[resolved] Featured image (39 posts)

  1. Marcihess
    Member
    Posted 6 months ago #

    I'm working on http://www.driftlessprairies.org It seems this topic should be super simple -- click of the "featured image" button, but that's not working. I have the image in the media catalog and it even shows the image as the featured image under Beekeeping/Interesting Facts in the edit pages, but when I refresh and view the page, the image doesn't show up. Can you help me figure out why mine isn't showing up? Thanks a bunch for your help!

  2. The only place Coraline displays featured images is in the header area. If you upload a featured image that meets a certain minimum size - 990px by 400px high, as I mentioned in your other thread a while back - that featured image will be displayed as a custom header on the individual page or post. This featured image would be displayed instead of the default randomizing headers that it looks like you've set up under Appearance > Header.

    If you're looking to display featured images in another location in your theme, I try to could help point you in the right direction by using a child theme with some theme edits. Let me know what you had in mind.

  3. Marcihess
    Member
    Posted 6 months ago #

    I'm totally embarrassed that you've had to repeat yourself. So so sorry. I went thru the process, didn't have success, then was sidetracked. So, I'm back to "git r dun" this time!

    Yes, I'm wanting the featured image to be instead of the random images in the header. I worked thru the process again, double checking everything and reloading the image resized to 990x400 and I'm still not having success. http://driftlessprairies.org/?page_id=5853

    Thanks for the help!

  4. No worries!

    I'm not sure why your page isn't picking up the featured image if it meets the minimum size requirements.

    I just tested on my end, setting the images to randomize under Appearance > Header, and setting a specific featured image to one specific page. That specific page showed the test image, while the images randomized everywhere else.

    Would you be able to provide a link to the image you're trying to set as the featured image on that page so I can take a look at it directly? Maybe it'll provide some clues. Thanks!

  5. Marcihess
    Member
    Posted 6 months ago #

  6. What I mean is a a direct link to the image itself, which you'll find in the Media Library at the top right, in the File URL field. For example:

    https://cloudup.com/ctpOPgnjytX

    The path should start with http:// and end with the image extension, likely jpg or png.

  7. Marcihess
    Member
    Posted 6 months ago #

    http://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-13-1featpic-sized.jpg

    As I was looking for this, I notice the pic size is 533x400. I have no idea how that happens when I specifically sized it to 990x400. Could that be the problem? If so, how can I make the sizing "stick"?

  8. Yes, that's the problem - the image doesn't meet the minimum size.

    How are you doing the resizing? I recommend using an image-editing program outside of WordPress - here's an article that lists a few programs you might want to try:
    http://webtrainingwheels.com/image-editing-tools-web-wordpress/

    Just a heads-up that if you try to stretch out that image to 990 x 400 it will look completely distorted, so I recommend trying to find a wider image to work with - you'll get much better results.

  9. Marcihess
    Member
    Posted 6 months ago #

    OK-- figured it out so I can be certain I get the 990 x400 size!! I'm gonna work on this tomorrow and hopefully will have it "mastered"!!! Again, many thanks!!

  10. Marcihess
    Member
    Posted 6 months ago #

    Whoopsy -- still distorted. http://driftlessprairies.org/?page_id=5853

    I'm not understanding how to find a "wider" image than one taken as a landscape. I'm not understanding why a cropped and resized image would appear distorted here when it doesn't in my files. Is this a Lightroom question?

  11. The image is distorted because the aspect ratio between the height and width isn't being preserved when you are resizing the image: you're telling the image to stretch without keeping the relationship between the height and width intact.

    Most image-editing programs have an option to "constrain proportions" or something similar when you resize an image. You want to make sure that option is selected so the height and width ratio doesn't get distorted.

    Given that your original image is really small, it may also appear pixillated when you stretch it out, even if you preserve the height and width ratio, which is why I suggested you try to find an image that's larger to begin with.

  12. Marcihess
    Member
    Posted 6 months ago #

    I'm so sorry this isn't working and is taking so much of your time. It's definitely something quirky with WordPress. The picture was originally 4000x1616 so I was a substantial size. It this isn't large, then what would be considered a large picture? When I cropped it, I did constrain proportions.

    The photo is not distorted or pixillated in the library: http://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-14featpic.jpg

    It's only distorted when it's on the website. http://driftlessprairies.org/?page_id=5853

    I tried another photo, originally sized 5184x3456. Still the same results.
    Here's the link to the media: http://driftlessprairies.org/wp-content/uploads/2014/02/IMG_6394featpic.jpg
    And the link to the webpage:http://driftlessprairies.org/?page_id=5923

    There is definitely something wrong. I'm following all the steps and using the correction dimensions. The only time the pic is distorted is when it's on the website.

    Then I wondered if there was something with the CSS entry I did. I went to the CSS Stylsheet Editor (is this the right place to have put it?) and have checked the entry:
    #branding img {
    width: 990px;
    height: 400px !important;
    }
    I keep telling myself....we will prevail, we will prevail!

  13. The image set as the header on the page we're looking at seems to be 990x180:

    http://driftlessprairies.org/wp-content/uploads/2014/02/Bee-emerging-14featpic-990x180.jpg

    It's being distorted because it's being stretched out vertically to 400px high.

    Could you try removing the featured image and reuploading/resetting the larger one as the featured image for that page again? Perhaps give it a really distinctive filename so you can select the right one more easily. perfect-bees.jpg? ;-)

  14. Marcihess
    Member
    Posted 6 months ago #

    I'm not sure what you mean by the right one. I've been deleting them from the Media Library each time and reuploading them each time so I could recheck the dimensions and I've even picked a different photo, thinking it would be a clean start. I did give it the name you suggested but that doesn't change any of the settings. I see now where the 990x180 is showing up -- I had not clicked on the photo once it was on the site to see that. When in the photo edit software, it shows 990x400 and in the Media Library is shows 990x400 but once it's uploaded as the Feature Pic, it becomes 990x180. Somewhere between the Media Library, which shows it at 990x400 it gets changed to 990x180. How could this be?

  15. Marcihess
    Member
    Posted 6 months ago #

    I went checking on things and see that the header image is supposed to be 990x180. At least now I know where the 990x180 comes from. What's the possibility that the designated size for the header as become mixed up with the featured pic sizing in the code?? Again, I don't know code so I'm just throwing out thoughts.

  16. I'm not sure why this is happening, and why only on this one page - it's strange indeed.

    As a test, could you try creating a brand new page, and try uploading the same bee photo as featured image there, so I can have a look?

    For comparison, here's what the page source looks like for your About page, where the image is OK:

    <div id="branding">
    <a href="http://driftlessprairies.org/">
    <img src="http://driftlessprairies.org/wp-content/uploads/2013/07/cropped-IM003632.jpg" width="990" height="383" alt="" /></a>
    </div><!-- #branding -->

    And here it is for the bee page:

    <div id="branding">
    <a href="http://driftlessprairies.org/">
    <img width="990" height="180" src="http://driftlessprairies.org/wp-content/uploads/2014/02/Perfect-bees-990x180.jpg" class="attachment-post-thumbnail wp-post-image" alt="Perfect bees" /></a>
    </div><!-- #branding -->

    You see how the height and width parameters are being added right on the img tag?

    width="990" height="180"

    I'm not sure where that's coming from, and why only on this one page.

    Let's see what happens when you do the test I mentioned above!

  17. Ah, I figured it out!

    There is a function that is setting non-default headers to 990 x 180, and we need to override it. Stand by while I post some instructions for you. :-)

  18. Alright, I did a multi-file search for the number 180 and found a function in /inc/custom-header.php where the 180px height is being set for custom headers. That's what was changing the height when featured images were used as custom headers.

    In order to override the 180px height, you're going to need to set up a child theme, so your tweaks won't be overwritten when updating the theme. Here are some guides in case you haven't made one before:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    Once your child theme is set up, create an empty, plain-text file and name it functions.php. Copy this code into the file:

    <?php
    function childtheme_header_image_height() {
    return 400; /* height in px */
    }
    add_filter( 'coraline_header_image_height', 'childtheme_header_image_height' );
    ?>

    This will override the 180px default height for featured images as custom headers.

    After you do that, you'll need to regenerate your images by using a plugin like this:
    http://wordpress.org/plugins/regenerate-thumbnails/

    You should also be able to take !important out of this CSS:

    #branding img {
    width: 990px;
    height: 400px !important;
    }

    That should do the trick. Let me know how it goes!

  19. Marcihess
    Member
    Posted 6 months ago #

    I've never created a child theme but am up to the challenge. The instructions are not for non-tech folks like me. So...with a few other googles, I have the child created and I've added the style.css folder and the functions.php file but...I can't "activate" it. Here's the message I get in my themes folder:

    Broken Themes
    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    Coraline-child The parent theme is missing. Please install the "Coraline" parent theme.

    What have I not done or done wrong? I haven't done anything about the regeneration issue as I figured I need to get this fixed first.

  20. Congratulations on tackling this challenge. :-)

    Looking at the error message, I'm guessing that you haven't quite got the top part of the child theme coded correctly.

    Let's say you've named your child theme folder coraline-child - then your Child theme will have something like this at the top:

    /*
     Theme Name:     Coraline Child
     Description:    Coraline Child Theme
     Template:       coraline
     Version:        1.0.0
    */
    
    @import url("../coraline/style.css");

    Let me know if that makes sense. Be sure the child theme's folder name and the template name both have no capital letters in it.

    If you still have trouble, could you paste the content of your child folder's style.css here between code tags so I can have a look?

  21. Marcihess
    Member
    Posted 6 months ago #

    Yea-who!!!! Got it all together and activated the child. I installed the Regenerate Thumbnails plug in as well. Should I try another feature pic now?

  22. Marcihess
    Member
    Posted 6 months ago #

    I hadn't checked the actual site before sending the above e-mail. There's something more that needs to be done as it's now just text with no formatting. I guess I screwed up the css. http://www.driftlessprairies.org Oh boy -- one thing leads to another! Thanks for the help!!

  23. Looks like there are a few problems here:

    1) There's a capital letter in your child theme folder. You named it Coraline-child but it should be coraline-child

    2) Your path to the child theme style file is not right:

    http://driftlessprairies.org/wp-content/themes/Coraline-child/Style.css/style.css?ver=3.8.1

    This line in your child theme:

    @import url("coraline/style.css");

    Should look like what I posted above:

    @import url("../coraline/style.css");

    Note the two dots and slash before coraline.

  24. You'll need to reselect and activate your child theme after making the above fixes.

  25. Marcihess
    Member
    Posted 6 months ago #

    The site is still with no format so I've still not done something correctly. So sorry about the Caps -- I didn't think of the file name, only the contents. And again sorry about the ../ omission -- wasn't think of code as much as I was thinking of English and thinking the .. meant something before it!

    My path to the child theme??? Still not sure I have that right and shouldn't "coraline-child" in the middle there be without a cap as I have it below? Here's the style.css page. Did I put the child theme style file path in the right place? I'm only guessing that it goes in the "theme URI" place? So sorry -- it's the plight of not knowing code. I am working on learning enough so this isn't so difficult for all of us.

    /*
    Theme Name: coraline-child
    Theme URI: http://driftlessprairies.org/wp-content/themes/coraline-child/Style.css/style.css?ver=3.8.1
    Description: coraline child template
    Author: driftlessprairies
    Author URI: http: //driftlessprairies.org/
    Template: coraline
    Version: 1.0.0
    */

    @import url(("../coraline/style.css");

    /* =Theme customization starts here

    Once I made these changes there was no option to "reactivate" as it shows active already.

  26. You're so close! Now you have an extra opening bracket here:

    @import url(("../coraline/style.css");

    Should be

    @import url("../coraline/style.css");

  27. You're also missing a closing comment tag here:

    /* =Theme customization starts here

    should be

    /* =Theme customization starts here */
  28. esmi
    Forum Moderator
    Posted 6 months ago #

    Is the style.css file in the main folder of your child theme(as opposed to being inside a sub-folder)? Looking at the site now, I can see:

    <link rel='stylesheet' id='coraline-css' href='http://driftlessprairies.org/wp-content/themes/coraline-child/Style.css/style.css?ver=3.8.1' type='text/css' media='all' />

    which suggests that you are trying to use a file called style.css inside a folder called Style.css inside your coraline-child theme.

  29. Hi esmi, the parent theme's stylesheet is right where you'd expect. ;-)

    http://driftlessprairies.org/wp-content/themes/coraline/style.css

  30. Marcihess
    Member
    Posted 6 months ago #

    I correct the theme customization omission.

    So...when I created the style.css at my hosting site I wasn't able to put a file inside of the child directory; I could only create a folder. I just did a chat with the hosting site and they say I need to use File Zilla?? Is this right?

    Why would a theme have a feature image option that seems so user friendly if this is what it takes to use it? And the WP Codex leaves out a lot of info that needs to be there for someone like me!!

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.