Blurry Sermon Image

  • Anyone know how I can use CSS to call the actual image for the sermon image instead of a thumbnail size? That’s the only thing I know of that is making the image so pixelated or blurry.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

  • Sounds like you’ve changed your theme after you uploaded the sermons. You may need to run all of your images to a plugin that regenerates your images to your current theme. I use Simple Image Sizes (https://www.ads-software.com/plugins/simple-image-sizes/).

    Thread Starter mcarpenter2004

    (@mcarpenter2004)

    I haven’t done that. I just implemented this plugin in the last week or two and haven’t changed my theme in over a year.

    This is the CSS code I used to change the size of the image (I only wanted it bigger on desktop):

    @desktop_only:~’only screen and (min-width: 1025px)’;
    .wpfc-sermon-single-image-img{
    @media @desktop_only{
    min-height:400px;
    }
    }

    I still would run the images through that plugin and see if that helps. Its a theme issue and not Sermon Manage plugin.

    Thread Starter mcarpenter2004

    (@mcarpenter2004)

    OK. Thanks. I’ll try.

    Thread Starter mcarpenter2004

    (@mcarpenter2004)

    That didn’t change anything. It’s like the code calls for the thumbnail, because without the above css, the sermon image is super small. All the CSS above does is blow up the smaller image and then pixelates it. If it can’t be fixed, I can live with it, but it doesn’t look very clean.

    It’s because your theme calls for a 260px x 146px thumbnail. You added CSS to increase the size, but it’s now pixelated. If you want a thumbnail at 712 x 400, you’ll need to create a custom image at what ever size you want. Then you’ll need to edit your Sermon Manage single sermon page to display the new image size. That’s what I did.

    Feel free to contact me via e-mail.

    Just to add, if you haven’t seen this: https://wpforchurch.com/my/knowledgebase/74/Images-for-Preachers-Sermon-Series-and-Topics.html, this will give you an idea on how to edit your single sermon image file. Specifically the first section i.e. <?php render_sermon_image( 'thumbnail' ); ?>.

    Thread Starter mcarpenter2004

    (@mcarpenter2004)

    Do you know which plugin file is this found in so I can edit it? I can’t locate it.

    Do you know which plugin file is this found in so I can edit it? I can’t locate it.

    Open up the Sermon Manager plugin folder and you’ll see a folder called views. That is where your archive and single sermon files are located. You really don’t want to edit those. Inside of that views folder you’ll see a folder called partials. Click on that and the one you want, based on the link you posted, will be called content-sermon-single.php. Find this:

    <div class="wpfc-sermon-single-image">
	<img class="wpfc-sermon-single-image-img" alt="<?php the_title(); ?>"
			src="<?php echo get_sermon_image_url(); ?>">
</div>

    You want to remove this <img class="wpfc-sermon-single-image-img" alt="<?php the_title(); ?>" src="<?php echo get_sermon_image_url(); ?>"> and use this instead <?php render_sermon_image( 'thumbnail' ); ?>.

    If you’ve added a custom image, you can use it by editing the image size. You can use this to add custom image sizes: https://www.ads-software.com/plugins/simple-image-sizes/

    Hope this helps!

    Forgot to mention. Do not edit the plugin files. You need to create a child theme. If you edit the plugin or parent theme files, your changes will be lost when there is a update. Always use a child theme. Google: create a wordpress child theme.

    Thread Starter mcarpenter2004

    (@mcarpenter2004)

    @hikinmike Thank you for your help again!

    Looks good! Glad to help.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Blurry Sermon Image’ is closed to new replies.