Image size question – featured image in post and for social media

[MP EK]

Hello @All,

perhaps this could explain anyone, not only SKT staff.

I’ve got a general problem when adding a featured image to a post.
You cannot change the size of that image. It gets displayed as is.
It’s different when you add an image INTO the post, i know, but where can you change the display size of a featured image in that post?

When adding an image with 678 × 1024 px, it gets displayed too big in that post.
When adding a smaller image, lets say 400 x 400 px, this would be too small for Social Media.

I cannot figure out how to fulfill the prerequisites of social media with a visitor that is visiting that site and sees unbalanced images (because they are too big, compared to text size) in a post and that theme uses the “featured image” as a dynamic background.

As you know SKT Full Width Pro uses featured image “everywhere”: To show similar posts, to show categories with their respective images, featured image is being shown in background if big enough as well (-> featured image has to be minimum 1600x1200px for this to work)….and so on…

I kinda cannot change the size of that image that’s being used when reading the post on desktop.

Can the image size used for featured image in post in Full Width somewhere or is it directly related to settings -> media?

I hope you understood what I meant and guide me to a solution. Is this a theme issue?

[MP EK]

Where can I set the dimensions of the featured image in Full Width Pro?

[MP EK]

I’ve found main.css and main.less holding “featured-image”-values and changed width to 50% (from 80%) but it did not change the featured image in a post to appear smaller (on desktop).
Where to change it?

main.css:

.single-post .featured-image-single {width:50%; margin:auto; clear:both; margin-bottom:15px; }

main.less:

.single-post {

		border-bottom: 1px dotted desaturate(@link-color, 30%);
		padding-bottom: 20px;
	
		h1.entry-title {
		
		font-size: xx-large;
			a {
				text-decoration: none;
			}
		}
		.featured-image-single {
			width: 50%;
			margin: auto;
			clear: both;
			margin-bottom: 15px;
			
			img {
				border: solid 10px saturate(@default-background, 15%);
			}
		}
}

Is it possible to define an image dimension in media settings with this theme? If yes, what is the thumbnail-name and the public name ?

regards,
Michael

[MP EK]

I tried to set new thumnail entry for featured-image and featured-image-single, with XXX Simple Image Sizes plugin, but it did not catch it, even when I did regenerate thumbnails (imsanity plugin, next to featured image) everytime I changed something in this regard…I simply want to reduce the featured image and try which size fits best…

[Sonl Sinha]

Hi Michael,

Kindly go to Appearance>>Theme Options>>Layout Settings>>Custom CSS Box:

Add this code there:

.post-thumb { width:50% !important;}

Regards,
Dave

[MP EK]

That’s what I was looking for, wonderful! Dave, the CSS genius 🙂 Thank you.
It would be great if that could be a feature in theme settings…just thinking

[Sonl Sinha]

🙂

[MP EK]

Do perhaps want to explain, why the changes in main.css and main.less, i described above, did not change what I was looking for?

[Kevin]

what you can try is the view the image from the text editor and change the width to 100% instead of pixels. Remove the height px altogether.
Example: width=”250px” height=”50px”
Should look like this: width=”100% (remove height)

Also, make sure you delete the size of the image it is pulling from.
Example: http://imagesource-1-300×400.jpg
It should look like this: http://imagesource-1.jpg This ensures that it is using the original uploaded image.

[Sonl Sinha]

Hi Kevin,

Thanks for sharing the info.

Regards,
Dave

[Author]

Posts