Featured Image in posts RESIZE

[sashaD]

Hello,

I have featured images activated in posts, and I would like to edit its size. As currently featured images seems to be set to 100% and as its shown in post it takes a whole 100% width of post page. How do i change that? I need it to be only at about 30% of the post?

Thank you

[sashaD]

P.S. I have used

img.attachment-kleo-full-width {
width: 35%;
}

and it seems to work, but i just wanted to confirm that this selector only selects the images which are “Post Featured Images” and no other images, i.e. just those added as featured images in post creation process

[sashaD]

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?

[Radu]

Hi,

Please use this CSS.

COPY CODE

body.single article img.attachment-kleo-full-width {width:35% !important;}

This will match only images that are in single post.

I’ve tested this in responsive and on mobile the image remains at 35%.

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[sashaD]

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

[Radu]

Hi,

Try to replace min_items=”3″ with min_items=”1″ to see if solve the issue.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[sashaD]

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

[sashaD]

i’ve been playing with visual composer, and in the front end when using VC it all looks right, but once i go out of visual composer and see the post for real, than that one single image is shown full width of post, thought this might help the investigation.

[sashaD]

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.

[Radu]

Hi,

You can limit carousel to going full width edit this line

COPY CODE

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

width

COPY CODE

<?php echo '<div class="col-lg-6">'. do_shortcode( '[attachmentID]' ) .'</div>'; ?>

Edit : some characters are striped copy code from here : http://pastebin.com/k3QcjPF8

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[sashaD]

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!

[Andrei]

Hi Sasha, unfortunately this custom development in which Radu tried to guide you will probably need more development time and several adjustments in order to work exactly like you want.

Because such modifications aren’t on our priorities I will recommend you to find and hire a developer to help you with your custom modifications.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sashaD]

ok thanks

[Author]

Posts