Featured Image in posts RESIZE

problem is… when i change view like mobile, or make window smaller, the image takes up 100% again, and thus is huge.

how do i target it properly, or make it smaller as initially asked?

Hello @Radu,

so i spent last few days testing and trying to see why i can not make it work, and realized where there might be an issue: basically to render images related to post in a kleo carousel i use the code you had supplied:

function GetCurrentAttachmentIDs() {

$GetAttchmentIDS = implode(‘,’, array_keys(get_attached_media( ‘image’, get_the_ID() )));
return do_shortcode(‘[vc_images_carousel images="'.$GetAttchmentIDS.'" img_size="400x200" autoplay="yes" min_items="3" max_items="10"]‘);
}

add_shortcode(‘attachmentID’,’GetCurrentAttachmentIDs’);

and then just add this in my php:

< ?php echo do_shortcode( ‘[attachmentID]’ ); ?>

and this works great, except there is an issue if user only uploads one image (when there is only one single image related to the post), this image is rendered at full width and not “400×200”. Can you please help me edit this, so when there is only one image it doesnt go full width.

MANY THANKS IN ADVANCE!!!
best regards
Sasha

Hi, sorry but this doesnt fix it, that one single image still goes full width.

hi, so I played around with Visual Composer at the front end, and realized that because carousel itself is set to take 100% within a post, when there is only one image in carousel it stretches it out, same goes for 2 images, i think it only starts looking nice at three or more images in carousel.

I tried to edit the whole carousel in css, but ended up realizing that somehow i must keep the carousel as is, and its responsive inherently and just target the images within that carousel to be 400×200, which for some reason doesnt work when there is less images than needed to take up the space, i.e. 1 or 2 images.

Hi,
this limits the width of carousel, but does not solve the issue of image width in that carousel.

problem is that when there is not enough images at set size e.g. 300×200 within the carousel, these images start to be stretched out to fill in the carousel. thus if I have just one image, it will stretch out 100% to fill in the carousel at what ever screen size its viewed. Theoretically i should be able to target that image with “max-width: ..px” and ensure it never goes over certain amount of pixels. But no matter what i did i can not seem to achieve this.

All css targeting works, i.e. i can put “border” around img(s) in the carousel just fine, but when i try to declare “max-width: 300px;” it doesnt work. I think by default its because css is set to images being “max-width:100%;”… i tried “max-width: 300px !important;” but that still does not influence the behavior of images in the carousel.

Hopefully you can look into this and come up with some advice. At this point now I am even thinking that maybe we edit the function where we get images attached to echo shortcode only of there are more than 3 images attached.

Thanks again @Radu, i know we will kick its ass!

ok thanks