Featured image on pages too big - need to reduce height

Hello,

Sparkling is a wonderful theme. Thank you very much for creating it!

I was just hoping you could help me with my featured image on pages. I insert them and they take up all of the blank space below the header on my normal laptop screen. I’d really like to reduce the height. I know you have said that feature images need to be around 750 x 410, but 410 is too tall for my site. I have set the width to 100% as you said in a previous forum (in the custom css), but is there any way to change the 410 height to something like 150? I have tried inserting this into the child theme php. but no good. Could you please help me?

Thank you so much!

In the Sparkling theme folder, in functions.php on Line 64 you have the code setting sizes for ‘sparkling-featured’. You can change the height to whatever you need. I’d advise you to copy the code from there and paste it in your child-theme functions.php and change it there. Also, if you already have images uploaded, you will have to regenerate them or re-upload them, whichever works.

Thank you very much for your speedy reply. I can see the code that needs changing :slight_smile: Now, I haven’t changed the functions php before in my child theme. I just created a file in my child theme called functions.php. At present it is blank, so would I just add something like this"

  <?php

add_image_size( 'sparkling-featured', 750, 180, true );

Sorry for such a basic question, but I’d really like to be sure I’m doing it the right way before I go and make changes to the child’s functions file. Is there anything else I need to include? Thank you very much for that :slight_smile:

Hello again,

I have changed my functions php to include the code above (but changing 750180px to 750150px), and when I now insert a featured image into each page, it displays the image at the correct size , but I must crop them manually to that size outside of wordpress first).

The only problem I am having is the quality of the images… To ensure that the image does actually sit at 150pixels high, I actually have to crop all images before I upload them to 750px x 150px. Having them at something like 2468 x 1851 means that while the width of the images fits to the page perfectly, the image runs down the page (certainly not stopping at 150pixels down). Is it just not cropping properly? Is my functions code correct? Anyway, my current method of manually cropping them (outside of wordpress) to 750x150px means that some of the images on the pages look a bit pixelated (because I have to re-size them to only 750x150). Is there any way that I can now upload images of a higher pixel count, to fit into my lovely 750x150 size that is so perfect now? Is my crop just not working properly? Please let me know how I can fix this as I really just want a good quality feature image at the top of every page that is not too large (150px down is perfect).

In summary, my end goal is to have a featured image that is as wide as any page but only 150 pixels high on every page just below the header. The size and positioning is working perfectly, it’s just the quality that is the problem now. Your feedback would be greatly appreciated.

Thank you and sorry for the bother

Hi wattlebird,

Once you have set your ‘sparkling-featured’ image size in the theme, any image you upload will automatically be resized to this size (among other sizes that are enabled). So there should be no reason your image should NOT be 750x150. Check out any recent image by going to uploads folder and looking at the images WP makes.

For the quality, there are plugins like IMSANITY ( I personally use this) that do this job perfectly well - they would resize the heavy image to a maximum image size you define. Also, you can define the quality of the image, plus additional features.

Hope that helps.

Hi again,

So it sounds like my child functions php hasnt accepted my addition. Can someone please tell me if

  <?php

add_image_size( 'sparkling-featured', 750, 150, true );

is correct to enter into the child functions php? I even tried ‘false’ instead of ‘true’ but no difference. And yes, I have also re-loaded the images into the pages so that the changes can take effect.

I also looked at imsanity, but it’s not really what I want. I just want my featured images on my pages to be less pixilated.

Thank you for all of your help!

Your code is correct, with the ‘true’ option. You can check the Uploads folder and look for the image size 750x150 of the image you uploaded after adding the code. If the image is there with the correct size, then maybe it is not outputting properly, and we can focus on that issue.

Also, did you delete the images from the Media Library, before uploading/adding them again?