Feature image - to show only a part of it.

Sparkling
1

Hellow guys,
I am recently found your theme Sparkling, and i started to use it right away.
Here is the site i am building atm. http://theinformant.ro

I am looking for a solution to show only a part of the feature image.
I`ve spend some hours trying to resolve it using some overflow:hidden, but in vein.
Anyone who can give me a little help with the modifications necessary in the correct files?

Thankx a lot in advance.

2

I want to add that i intend to show only 230px from the feature image height.
Ive made new class in style.css, ive changed different classes and code lines in content.php but still nothing.

3

First you need to select the size of your div in which you are going to add this image. You can do it like this:

.image-cropper {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

The next step is to make sure that images has the right size and are not distorted. You can done it like this:

.image-cropper img {
    height: 400px;
}

Now you image is set to 400px height and visible are to 220px and the rest is hidden.

Both code snippets can be used via Theme Options - Other - Custom CSS

4

That worked, but the images in blog listing (index) are not responsive anymore.
There should not be a problem for the moment.

Really thank you for fast answer Aigars.

5

You can try to use second part of code like this:

.image-cropper img {
	max-height: 400px;
	height: auto;
}

It it still won’t bring perfect results because image height still will change as screen width reduces but we defined fixed height for visible area for this image. It is also not possible to make it dynamic unless you specify several CSS media queries for each screen resolution.

If you want to make everything scale perfectly on mobile you will have to spend a lot of time playing around CSS media queries but I would personally just set different featured image size and make them crop perfectly instead of trying to hide some part of images.

6

Since its a starting project, this solution its perfect atm :slight_smile:

7

Hey guys

I’m a newbie with wordpress. I really line sparkling and will use it for my homepage. Thanks you colorlib for this theme.

My Problem: I managed to customize the theme by adding a child theme. Like theinformant, I’d like to reduce the height of the featured images (on the homepage and in single-post) to 275px (fixed). The image should be centered and the overflow on left and right side should be cut off/not showing.

I tried the provided code from above in my child theme’s CSS and edited it, but it didn’t work. Do I have to add something to functions.php, too? I’d be very thankful for advice, Aigars. Thank you in advance.

8

@ropecap

Since you mentioned Child Theme here is what you should add to Child Theme functions.php file to create a new featured image size.

<?php

function child_theme_setup() {
	add_image_size( 'sparkling-featured', 750, 270, true );
}
add_action( 'after_setup_theme', 'child_theme_setup', 11 );

?>

This will affect featured image size in both blog page and single post view.

Let me know this helps.