Featured Image Size

  • Keith a.k.a. K j A M

    (@kjam)


    9 years, 6 months ago

    The whole switching back and forth between the featured image in the form and display options under settings is annoying.

    The only way to get a clear logo for the form is if it’s uploaded in a ginormous size. I happened to have a 3000×3000 I use for iTunes as that is their requirement. When i do that, it’s picture perfect but defaults to whatever huge size the placeholder allows, which is way too big for mobile.

    If I trying changing the default size to say 175×175 it blurs out and is still the giant size. But when I open the image in a new tab it’s clear and the correct size.

    I’ve been going back and forth with this for days now and just figured it out. To get it clear, it has to be a large size logo but resizing it to a more suitable size won’t work.

    This probably shouldn’t bother me but it’s one little thing after another with this plugin like nothing I have ever seen.

    I have also learned that in order to remove my podcast player magically showing up on the form in the sidebar you have to disable the content filter under the advanced tab in settings. It works but then Font Awesome which I use for my social icons no longer work. Seriously? What does one have to do with the other? Why aren’t these settings focused on just this plugin instead of cross-pollinating its poison elsewhere on my site?

    Sorry to be so blunt but I’ve spent more time with tinkering around with the most minute things involving this plugin that frankly should be a given. The featured image issue is a perfect example. Nowhere is this an issue except in this plugin.

    I just want it to work so I can focus on more important areas of my site; like creating content.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Matt Cromwell

    (@webdevmattcrom)

    9 years, 6 months ago

    Hi Keith,

    We actually appreciate your candor. We hate to hear that you’re frustrated, and I’ll do my best to guide you these issues so you understand why it works the way it does and what you can do about it.

    1) Regarding your podcast player — it is actually the podcast plugin which is behaving a bit strangely by hooking into “the_content” globally. We provide that advanced setting to help users like you who are dealing with other plugins that might not have best practices in mind.

    2) Regarding your featured image issue, we provide that setting to help accommodate the registered image sizes that themes add to your site. So, it sounds like the Give Featured Image is wider than your default 175×175 but you don’t have any other image sizes registered. That’s not normal, because WordPress by default has a “medium”, “large” and “full” image sizes. So either your theme hasn’t declared Featured Image support
    (by adding this one line: add_theme_support( 'post-thumbnails' ); )
    Or it is overriding this default behavior with it’s own image sizing. Either way, your best bet would be to try to add that one line and see if the WordPress sizes then appear correctly, or add your own custom image size like so:

    add_image_size( 'give-size', 220, 180 ); — you can change those dimensions to anything you like. Once you’ve added that you should install a plugin called “Regenerate Thumbnails” which will add that new size for all your images.

    I hope that clarifies, happy to help further with clarifications or additional questions. This is why our Support is here for you. We stand behind our product proudly and we’re proud that it powers thousands of nonprofits globally.

    Thank you!

    Thread Starter Keith a.k.a. K j A M

    (@kjam)

    9 years, 6 months ago

    My theme supports the multiple sizes and is responsive based on mobile or desktop. A good example is the output from my Top 20 and Related posts plugins. They are automatically resized accordingly for mobile compared to desktop.

    As for the settings in WordPress, I set those myself because my theme uses odd landscape sizes which I allow only on the front page. All of my artwork are square mainly because they are podcasts designed for smartphones and older mp3 players. So, I embed those thumbnails into the podcasts and into the post and use them for the featured image where they are cropped by my theme for display on the front page or slider (but I don’t use that).

    My point being, my theme is one of the top themes on WordPress and they frequently update it to ensure it meets all current requirements set out by WordPress including responsive behavior which goes back to the various image sizes. I can tell you they are all there and the 175 is listed as it’s one that added myself in the WP settings.

    However, it will not accept that size. The Donations plugin resizes it to a larger size (my guess is 300×300) and then blurs it out because it’s a smaller size. If I use the 3000×3000 it still resizes it to 300×300 no matter if I have 175×175 selected as my preferred size under settings in the Donations plugin but that’s the only way I can get a clear image that’s not blurred in the form. If I open on the blurred image in the form in a new tab displays the correct, clear image as it should be, which leads me back to the plugin being the issue.

    It’s confusing to be certain but this is not a theme issue.

    That being said; where do I put this: add_image_size( ‘give-size’, 220, 180 ); in my style.css file or custom CSS? I’ll try anything so I can move on.

    Thread Starter Keith a.k.a. K j A M

    (@kjam)

    9 years, 6 months ago

    Spinning my wheels on this. I didn’t need to add that code because my settings manager allows me to change them. I switched medium size from 250 to 200 and then upped the 200×200 image and selected it from the dropdown list in Donations under settings>>display options. Still blurry and sized larger than the 200px it is. I switched it in the dropdown to 0x0 with the 200px and no change. I then left the 0x0 and switched to 3000px for the image and no surprise it’s a clear logo but larger than I want. I then switched the dropdown settings to 200×200 with the 3000px it’s blurry and still the default size.

    I already use regenerate thumbnails so that’s not the issue either.

    Every conceivable option has been tried but the same size is continually forced no matter which size option I choose and no matter if it’s available under settings>>media in WordPress.

    I’ll just leave the larger image there, however this is not a theme or another plugin issue. It’s just not. I have no problems with two other plugins that rely on different sizes to display properly on different devices.

    Plugin Contributor Matt Cromwell

    (@webdevmattcrom)

    9 years, 6 months ago

    So, if the request is only that you want the featured image to be maximum 175px wide, we can adjust that with simple CSS no problem. I attempted to explain that the featured image is a certain width, and if that width in your theme is wider than 175px then yes it will be pixelated because the image is forced to 100% of the Give sidebar width. The best way to fix that is to create a larger image size, or to use the following custom CSS:

    [id*='give-form'] div.images img {
    max-width: 175px;
}

    If that doesn’t work just right, please provide a link to the page so I can take a look and I’ll advise my best from there. Thanks!

    Thread Starter Keith a.k.a. K j A M

    (@kjam)

    9 years, 6 months ago

    That code has no affect on the sizing. 175×175 happens to be my default size (I use) for my thumbnails that are embedded into my posts. The larger 850×850 is my default size for images that are cropped by my theme horizontally for featured images, unless I specifically use one of my default settings in WordPress media that includes 200×200 for my medium size thumbnails, which is the one I want for the Donations Form page. Since it is clearly NOT responsive from desktop to mobile, that size is a compromise or balance between the two.

    You have a default size built into the form, which would be fine on desktop but see above for its limitations. So, no matter what size I float in there it forces it to your default size; even when I’m setting the size I want in the ‘settings’ display options of your plugin, which makes the icon illegible or unclear. The only way to get a clear icon is to upload a much larger size; then it defaults to your built-in size and it looks perfectly fine but it’s still too big.

    It appears I can explain this issue from two-sides til Sunday but you folks are just not grasping what I’m trying to impart on you.

    I currently have your CSS code set at 200px; I set the ‘display options’ to 200×200 and uploaded a 200px image into the form for your viewing. You will see it’s forced to the default size regardless of my settings or your code and it’s unclear. Pull the image up in a separate tab and you will see the correct size and a very clear icon as it is supposed to be.

    The URL to the form page is: https://partyfavorz.com/donations/18024/

    Plugin Contributor Matt Cromwell

    (@webdevmattcrom)

    9 years, 6 months ago

    I do grasp it. Providing the link is helpful. The CSS I provided does not appear to be implemented in on your site at all. I tested this on your site in Chrome Dev Tools and it works as expected:

    [id*=give-form] div.images img {
    max-width: 200px;
}

    ​If you need assistance implementing custom CSS on your WordPress website, we have this guide for you:
    https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/

    Let me know how that goes.

    Thread Starter Keith a.k.a. K j A M

    (@kjam)

    9 years, 6 months ago

    The CSS is located in my custom CSS where I put all of my customization’s. I could put it in the style.css of my child theme but it would achieve the same results. Why you can’t see it is beyond me.

    I was out just now when I read your message and checked it on my cell phone and it looks great; right size and visually clear. Now that I’m home and viewing it on my desktop, it’s still over-sized with a murky picture. I use regenerate thumbnails when I deal with a situation like this so frankly, I don’t know what the issue is. I’ll probably try re-adding the full 3000x3000px shortly since I know that comes up clear. Hopefully, the forced width will keep it at bay on my phone.

    In short, I can’t explain the discrepancies since they are both using the same browser (Chrome). I haven’t bothered to check Explorer since few of my followers use it; same with Safari and nobody that I’ve tracked used Firefox any longer.

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

The topic ‘Featured Image Size’ is closed to new replies.