Hello - how can I control the width of the main blog image size, i.e. the first image at the top or featured image? I am currently uploading images at 950 width and would like for it to be that width and the height adjust accordingly.
Also, may I ask your recommendation for my website blog’s of what the ideal image width and resolution would be? I see websites using a 1950 width and 72 resolution that seem to have crisper images than I have on the blog, but the load time is somewhat slow.
Hi Samantha,
Thank you for reaching out to us. It’s due to Wordpress image sizing, the original image is converted to many sizes and the plugin or theme can call that image with a specific size. Though, if you like to switch to original, please add this code to your child theme’s functions.php file:
if ( ! function_exists( 'x_featured_image' ) ) :
function x_featured_image( $cropped = '' ) {
$stack = x_get_stack();
$fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;
if ( has_post_thumbnail() ) {
if ( $cropped == 'cropped' ) {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
}
} else {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
}
}
switch ( is_singular() ) {
case true:
printf( '<div class="entry-thumb">%s</div>', $thumb );
break;
case false:
printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
esc_url( get_permalink() ),
esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
$thumb
);
break;
}
}
}
endif;
The recommended resolution of images depends upon the maximum width of your site, e.g if it’s set to 1200px then it’s best that you upload the image that has the width of 1200px so it doesn’t look blurry or pixelated.
For more information, you can check out the codex:
https://developer.wordpress.org/reference/functions/add_image_size/
https://codex.wordpress.org/Function_Reference/remove_image_size
To improve the load time and performance, please checkout https://theme.co/apex/forum/t/customizations-performance/210
Hope this helps!
What resolution would you recommend as well?
Also, what would be the code for the CSS area? I don’t know how to edit files and really don’t want to tamper with that.
Hi Samantha,
I would recommend using 72 resolution. Also you can further compress your images here if you like https://tinypng.com/.
So you wanted to make the image of the first post of the blog larger? Try this css.
.blog .main article:first-child .entry-featured {
width: 100%;
float: none;
margin-bottom: 25px;
}
.blog .x-main article.hentry.has-post-thumbnail:first-child > .entry-wrap{
width: 100%;
float:none;
padding-left: 0;
}
Hope it helps.
No, I want to make the image on the individual blog post no larger than the actual image size that is uploaded. Can you provide the CSS for that? Thanks!
Hello Samantha,
I have logged in and installed a child theme in your site. Then I applied the code given by @Nabeel.
The featured image is displaying the original full image that you have uploaded.
Please check the featured images again.
Hey - I really just wanted to do the CSS. For the first blog example, yes the code is working to keep the image sized correctly, but for every other blog post the featured image is still larger than when uploaded.
Also, what does it entail now that you installed a theme? I really didn’t want that - only wanted the css to make sure that the main featured image on every blog post was a max width of 949 pixels. I didn’t provide my login either in this, so I am not sure how you were able to log into my site.
Hey Samantha,
I was able to login using the credentials which you have provided in your past threads. I did logged in hoping to get this issue resolved. Well anyways, I have reverted the changes and the featured images were displaying the way it is supposed to be.
I then added this custom css in the theme options to make sure that your featured images will only display with a maximum width of 949 pixels.
/* Center Featured Blog Post Images and set the maximum width */
.entry-featured {
text-align: center;
}
.single-post .entry-featured .entry-thumb img {
max-width: 949px;
}
.single-post .entry-title {
text-align: center;
}
.x-nav-articles {
float: none;
width: auto;
margin-left: 0;
}
Please check out your site again.
Hello again - I appreciate your help.
Unfortunately the image seems to no longer be responsive on mobile in scaling down. Instead just part of the image is showing - please help 
Hello Samantha,
Look for this CSS on Theme Options > Global CSS:
.single-post .entry-featured .entry-thumb img {
max-width: 949px;
}
Update to this:
@media screen and (min-width: 980px) {
.single-post .entry-featured .entry-thumb img {
max-width: 949px;
}
}
Hope this helps.
Won’t this remove the code to ensure on desktops that the main image on individual blog posts are no larger than 949?
Hi Samantha,
It shouldn’t, the min-width:980px means larger than 980px, which means the desktop. Buf if you’re not comfortable with that setup, it can be like this
.single-post .entry-featured .entry-thumb img {
max-width: 949px;
width: 100%;
}
It will stay responsive.
Thanks!
Hello all - so I really need this fixed.
A child theme was installed without requesting beforehand. I need this removed.
Code was added that I cannot find in my css - I need to clearly see where this was added - please clarify. The code add should have been to make the main/top/featured images of each individual blog post top image no larger than 949 in width, however I also need it to be response, which it still currently isn’t showing as being response - see image. This shouldn’t be limited to mobile either, it should scale down and be responsive.
Please help.
Hi Samantha,
This was the CSS code Lely’s referring to
And then I added the width: 100%; as Rad suggested. Your featured image is now responsive on mobile
But still, have a max-width of 949px when viewed on larger screens.
Regarding the child theme, don’t worry about it. I have checked that child theme and there is nothing on it. Technically you’re still using the parent X theme, the child theme is just there for you ready when you need it, chances are you’re going to need one in the future, so I suggest to keep it.
Hope it helps,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.