How do I change default Image sizes in Blog listings?

Tagged: blog, featured image, posts

This topic has 16 replies, 3 voices, and was last updated 9 years, 9 months ago by Sakin.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
January 9, 2015 at 12:11 am #49799

CrystalClear
Participant

Hello,
This is a question about a Blog page using this theme.
This is with regards to the Blog page that shows the ABBREVIATED introductions to each blog-post, not the full versions of the pages.
If I’ve selected a Featured Image it shows an image also with these abbreviated intro’s to the posts.
My questions is: How do I change the default (not just for individual images but across the board) of how large those Featured Images appear in the Blog posts-listings page?
I’m not referring to the images on an individual post; I’m referring only to the automatically-generated images of the abbreviated post-descriptions.
I want to have ALL of those introductory images changed to smaller, as well as any future images as well. **Ideally it would just be changing the default length of the Images and keeping the Width the same (all the way across). How do I do this?

Thank you for your help.

January 9, 2015 at 12:13 am #49800

CrystalClear
Participant

P.S. I hope it’s clear what I’m referring to…. not sure what the correct terminology is.

January 10, 2015 at 1:02 am #49840

Sakin
Keymaster

@Consciousness: In Catch Evolution theme, then recommended size for Featured Image in post is Width: 754px and Height: 400px. So, all the image uploaded at this size or larger then this size will be automatically crop to this size. In your case, you want smaller image, then just upload the image smaller then height 400px and it will load your original small image that you have uploaded.

January 16, 2015 at 10:22 am #50107

CrystalClear
Participant

Thank you for your help Sakin.

It is time-intensive to have to upload and edit a new image each time for each Featured Image for each new post when I know that I do want ALL my Featured Images automatically cropped to a smaller Height than the current default, on the Blog excerpts page. Therefore: is there some way to automate the process so the Featured Image is automatically cropped to a size with a smaller Height, since there is already an automatic cropping happening? For example maybe adding code in the Custom CSS portion to that effect?? You had given me custom code in a different instance to add there for a different issue.

Thank you for your help, it is appreciated.

January 16, 2015 at 11:17 pm #50130
Sakin
Keymaster
@Consciousness: Cropping is not custom css. But you can change the by building child theme. Read more detail about child theme from http://catchthemes.com/blog/create-child-theme-wordpress/ and you can also download sample child theme. Then you can add the following code in your child theme functions.php file and change the image size where 754 is the width and 400 is the height.
```
function catchevolution_child_theme_setup() {
    add_image_size( 'featured-slider', 754, 400, true );
}
add_action( 'after_setup_theme', 'catchevolution_child_theme_setup', 11 );
```
after you add this code, for all older post, you need to regenerate thumbnail and for new post it will be automatic. To regenerate the thumbnail in older post you can install Regenerate Thumbnail plugin.
January 22, 2015 at 10:46 am #50343

CrystalClear
Participant

Hi Sakin,

Thank you for your help.
Rather than making a child theme, I tested this suggested change out within the functions.php of the existing theme – just lowering the value of the second number in that part of the code, on a test site, and changing the second value does not only change the height – it also changes the width even though I do not change the first # value in the functions.php, only the second one. So it is not working as suggested as it is compressing both dimensions even though I only change the value for the height. I only want to change the default height crop, not the width. Is there a way to do this so it will effectively leave the width as-is and just contract the height for the crop? if it’s helpful i can send you a link of example page (i don’t want to post it).

Thank you~

January 23, 2015 at 12:27 am #50365
Sakin
Keymaster
@Consciousness: It’s not recommended to change the theme files directly. As all these edits will be reverted back to original when you update the theme.

Also after you change this file size, make sure you regenerate the thumbnail using “Regenerate Thumbnail” plugin.

For unlimited width you can add 9999 and fixed height link 400. You can add the following code.
```
function catchevolution_child_theme_setup() {
    add_image_size( 'featured-slider', 9999, 400 );
}

add_action( 'after_setup_theme', 'catchevolution_child_theme_setup', 11 )
```
January 30, 2015 at 9:18 am #50805

CrystalClear
Participant

Hi ~ Thanks for your help. I don’t want to create a Child Theme at this time. If needed I would add back the fix after an update, or, add a Child Theme later once I had managed to correctly alter the code on the theme’s functions.php. However it is still not working when I try to do that. Following your suggestion I edited main functions.php as follows:
________________________
//Featued Posts for Normal Width
add_image_size( ‘featured-slider’, 9999, 200, true ); // Used for featured posts if a large-feature doesn’t exist

//Featured Posts for Full Width
add_image_size( ‘featured-slider-larger’, 9999, 200, true ); // Used for featured posts if a large-feature doesn’t exist
________________________

and it is still doing the same problem as previous attempts where it is contracting the WIDTH also. If I leave the height value at 400, the whole thing is still too big for what I’m aiming for.
I didn’t use the plug-in but it was altering the old thumbnails anyway – and – I did always try adding a new post and the new posts did the same thing of the width shrinking also even though it had the highest value. My understanding is that with the changed code a NEW post will conform to the updated code. But the Width is still shrinking when the Height is given a value less than 300. I want the Width to stay the same but with a smaller height. So it is not working.

Please advise. I want to test this out on the current theme’s functions.php and don’t want to do a Child Theme at this time. I will copy over the code when there are updates or create a Child Theme then. If we can get this to work.

I’m emailing you separately a link so you can see what I mean since I don’t want to post that info on here.

Thank you for your help.

January 30, 2015 at 9:38 am #50807

Sakin
Keymaster

@Consciousness: Ok I will check in your email as well. It’s really difficult to make it flexible as per the theme design. So, if you have fixed height and width then I can suggest you exactly.

February 9, 2015 at 4:51 pm #51353

Dan Davies
Member

Hi Sakin

I’ve seen this answer on the forum somewhere before but I can’t for the life of me find it.

I’m using the Catch Everest free theme and I would like the featured image to be the size of the rest of the images I feature in my post. I remember you put up a workaround that meant that you could just change the PHP so that the featured image on the top of a post became the featured slider image.

I know, I should have made a child 🙂 but any chance you could share the workaround again?

February 10, 2015 at 12:13 am #51393

Sakin
Keymaster

@Dan Davies: Sorry I don’t understand it can you explain in reference with your site URL. I don’t get it which image size you want to change to and to which size.

February 10, 2015 at 1:52 pm #51435

CrystalClear
Participant

Hi Sakin –

Thank you very much for insisting about the “Regenerate Thumbnail” plugin – that did it! It is working now after installing that and putting in new values for the Height.

I made the following changes in the functions.php :

//Featured Posts for Normal Width
add_image_size( ‘featured-slider’, 754, 200, true ); // Used for featured posts if a large-feature doesn’t exist

//Featured Posts for Full Width
add_image_size( ‘featured-slider-larger’, 1190, 200, true ); // Used for featured posts if a large-feature doesn’t exist

I know I will need to re-enter these values when there’s an update if I don’t create a child-theme. I don’t know what the “Full Width” refers to but changed that value too.

Minor other question: I have a blog/posts page that is not on the homepage. It was functioning fine previously, but I happened to notice there is an option under Appearance/Customize/Static-Front-Page/Posts-page where I can enter the actual blog page so I did that (before none was selected there). Will this change how my site functions? I didn’t notice much of a difference.

Thank you!

February 10, 2015 at 3:13 pm #51436

Dan Davies
Member

Hi Sakin,

Apologies I mean to send. The blog is here http://vuzine.villageunderground.co.uk/

And it regards the featured post at the top of each article such as here.

http://vuzine.villageunderground.co.uk/amara-por-dios/

I would like the featured image to be at least 1200px

February 10, 2015 at 10:09 pm #51450

Sakin
Keymaster

@Consciousness: That place is there to select the page which you want to set as blog So that you can have static front page.

February 10, 2015 at 10:23 pm #51451

Sakin
Keymaster

@Dan Davies: That option is only there in Pro version. So, you might want to upgrade to pro version. In Catch Everest Pro, you can go to “Appearance => Theme Options => Content Featured Image Options”, there you can select the image size as “Featured Image”, “Full Image”, “Slider Image” or “Disable Image”

February 23, 2015 at 10:12 am #52202

CrystalClear
Participant

Hi – since with your good help I managed to get those image sizes adjusted properly, I want to go ahead and make a Child Theme like you suggested I do. I submitted this question as a comment at the Child Theme instructions on this site but probably better to submit it here so I’m copy-pasting what I had submitted, as I need further guidance regarding @import (no longer recommended by WP) vs. “enqueue”:

_____________
Since “enqueue” is the recommended method now over “@import” I want to do it that way but it is not clear to me how to do that since the WordPress Codex (that is linked to on this page) says:
“The following example function [that they give] will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.” I do not know how to do what they are saying since I do see other “.css” files in addition to “style.css” in the Catch Evolution theme folder so I don’t know how to proceed. I am not very familiar with code.

What is the proper code to enter in the Child’s functions.php for a Catch Evolution Child theme to do the “enqueue” instead of “@import”, since Catch Evolution has more .css files than just the style.css?

Thank you for your help.
________________

February 23, 2015 at 11:52 pm #52240
Sakin
Keymaster
@Consciousness: If you don’t want to use import then you can add the following code in your child theme functions.php file.
```
add_action( 'wp_enqueue_scripts', 'catchevolution_child_enqueue_styles' );
function catchevolution_child_enqueue_styles() {
    wp_enqueue_style( 'catchevolution_parentstyle', get_template_directory_uri() . '/style.css' );
}
```
Author

Posts