SELA Theme – Featured images are blurry…

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    I used custom CSS to make the SELA theme full width and I’m very happy with the results.

    However, the featured ‘hero’ images are somewhat blurry and not sharp.

    WordPress turned off Photon and Smush for me and I already tried changing the Media Width to 1900px and uploaded a new image at that size to test but it didn’t help.

    It’s almost like the full size image is being automatically reduced then enlarged again, presenting a loss in quality, rather than just uploading at actual size and preserving the image quality.

    Is there any way to fix it so they appear full width and at original image quality?

    Thank you for any help or advice with this issue! :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    valiantas · Member ·

    Hi,

    The banner takes this image as source: https://swfembroiderymachine.com/wp-content/uploads/2018/06/New-Final-Banner-1180×375.jpg

    You mentioned that you uploaded a bigger width image, do you have that image selected for the banner?

    Could you also post just the custom CSS that you have added so I can try replicating the same on my own test env. with that theme.

    Thanks!

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Hi valiantas, thanks for replying.

    I tried many different baners with no success so I had put an old banner back in since the 1900px wide one only looked bigger and more blurry. But I just put the full size one back in again so you can see it on the homepage for yourself.

    As you can see, rather than display at the correct size it’s blown the image up and cut of the sides… very strange.

    The custom CSS I’m using is:

    @media screen and (min-width: 1080px) {
	.site {
		max-width: 100%;
		width: 100%;
	}

	.entry-thumbnail img {
		width: 100%;
	}

	.tiled-gallery .gallery-row {
		width: 100% !important;
		height: auto;
	}

	.hero-content > img {
		width: 100%;
	}

	.content-wrapper .content-area {
		width: 100%;
	}

	.content-wrapper.with-featured-image {
		margin-left: 0;
	}

	.content-wrapper {
		padding-left: 120px;
		padding-right: 120px;
	}
}

  .child-page:nth-child(even) {
    margin-right: 55px;
  }

.blog .content-area, .archive .content-area, .single .content-area {
	width: 100%;
}

.blog .content-area .post-thumbnail img, .archive .content-area .post-thumbnail img, .single .content-area .post-thumbnail img {
	width: 100%;
}

    Hope this helps!

  • Unknown's avatar
    cookgardensew · Member ·

    Hi @valiantas and @swfembroiderymachines. I hope I am not stepping on any toes here, but this issue intriged me so I dug into it a bit.

    It looks like the Sela theme is defining the size of the featured images as 1180 x 435 on pages using the Full Width template and the Grid template and 1180 x 610 on pages that are using the Front Page template.

    From the functions.php file in the theme: 

    // Hero Image on the front page template
	add_image_size( 'sela-hero-thumbnail', 1180, 610, true );
// Full width and grid page template
	add_image_size( 'sela-page-thumbnail', 1180, 435, true );

    I believe this is why you are seeing your larger images get resized down to 1180 wide. The following CSS is then stretching the image to fill the container, making it blurry at sizes over 1180px:

    @media screen and (min-width: 1080px)
.entry-thumbnail img {
    width: 100%;
}

    It appears that this is a limitation hard coded into the Sela theme based on how the theme is handling the featured image that it is using.

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Thanks cookgardensew, that would make sense.

    So basically there’s no way around this since I have no access to the functions.php file to edit it I guess?

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    The banner image itself would probably pass actually. It’s the text on it that makes it look bad because it’s obviously pixelated.

    If I were to remove the text from the featured images is there a way I could add the text in again as actual text over the top of the images with CSS or a plugin even?

  • Unknown's avatar
    cookgardensew · Member ·

    @swfembroiderymachines

    You could use the text overlay that is built into the Front Page Template in the Sela theme and style it using CSS.

    To do that you would need to setup the front page as a static front page using the Front Page Template. There are instructions on doing that here:
    https://wordpress.com/theme/sela

    The front page overlay looks to be styled with the following tag:

    .front-page-content-area .with-featured-image {
  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    I thought of that but I would need to do it on every page though and they don’t all use the ‘Front Page’ template. In fact even the front page doesn’t use the ‘Front Page’ template, it’s the ‘Full Width’ template…

  • Unknown's avatar
    cookgardensew · Member ·

    There is another option for modifying the Sela theme, if you are on a WordPress.com Business Plan. (As a volunteer I don’t have access to your plan info, so I don’t know which plan you are on now.)

    If you are on a Business Plan, you could create a Sela Child Theme, allowing you to edit the values Sela is defining for the size of the feature images in the functions.php file. Basically you would be creating the theme with your specific updates and then uploading it. This requires knowledge of HTML and PHP.

    You can read more on Child Themes here:
    https://en.support.wordpress.com/themes/uploading-setting-up-custom-themes/child-themes/

    and in greater detail in the Codex at WordPress.org:
    https://codex.wordpress.org/Child_Themes

    A simpler approach might be to take a look at a different theme that already has some of the features that you are looking for. The Radcliffe 2 theme looks visually similar to Sela, is already full width, and recommends feature images at least 2000px wide, so shouldn’t have the scaling issues on larger displays that you are seeing with Sela.

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Thank you, I’ll look into that. :)

  • The topic ‘SELA Theme – Featured images are blurry…’ is closed to new replies.