Bad Image Quality / Gallery / Portfolio / Posts / Featured Images

Hello There,

The image will display the actual size of the image only when that image size is a thumbnail, medium or large size. If the image display is using a different size like the one generated from the theme or plugin, it will still display the same image size.

Hope this helps.

So how do photographers and artist and galleries display images at the actual size and the actual resolution with out loosing any quality and at the same time how to do this with different size images ?

Hi there,

The only way to do that is by removing all registered image sizes. You can do that by hardcoding or installing this plugin https://wordpress.org/plugins/image-sizes/

It’s not our plugin so please use it with caution.

You may also contact a developer to do the hardcoding for image sizes removal https://codex.wordpress.org/Function_Reference/remove_image_size. Without registered image sizes, it will then use the original image size.

Thanks!

ok not much as far as review on that plugin ill take a look.

how about what the other staff said just go to media settings and put 0 for the image size ?

I would like to stay away from changing the php file in not required

ok I can see whats going on here the theme or wordpress im not sure yet but the images are displaying too large then become blurry see my photo screen shot I opened preview and illustrator and the web page compared all 3 side by side at actual size and the website post or portfolio post is much larger as you can see from the screenshot the larger is the image from the portfolio page. how can I get my posts to display at actual size , my posts are all different sizes. I tried to change the settings for media to all 0’s then tried to adjust the media setting for medium images that are for posts to 900x1174 thats the image size for the image comparison I used and no change from 0’s to the image size the image still was displayed too large. I even put it at 800x1100 just to see if the image became smaller… but no change at all. this is a huge problem for this Art site im doing.

How can I get my posts to only display at the size of the image or actual size ?

Will I keep all image setting in media to all 0’s

Hello There,

The image settings will still not work because the featured image in post and portfolio is using an image dimension that is built in the theme. If you want to override it and display the full image, we need to override it. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      $thumb = get_the_post_thumbnail( NULL, 'full', NULL );

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
endif;

Please let us know how it goes.

I find this under editor right?

I tried to add this code it failed see my screenshot, what can I do now? or did I do this wrong?
Should I use ftp connection? Where should I place the code top or bottom of this file?

I tried going direct to the file manager and editing the file it broke the site a bit - see screenshot - it just had code at the top of the web page

Hey There,

Yes, you are correct. You may edit the child theme’s functions.php in Appearance > Editor. Just make sure that you added it in the correct file.

Regards.

I went to the file in editor I tried that first and it failed to work next I went to my file manager directly to the php file. I tried 2 ways. next pasted your code and saved it the site was now a little broken not too bad so I took out the code and saved it and it was fine again. It could be a small error in the code.

Question: do I paste the code at top or bottom? Line 1 or line 27 in the php file ?

Can you please check that code and let me know if it works or what will work, then Ill be able to move to the naxt part in my project.

The 3rd pic here is of the site after adding the code and then checking the site… As it appeared on the header of the site to be broken.

Hi there,

Your approach is correct and the code should go after the Additional Functions. I suggest that you change the code to:

if ( ! function_exists( 'x_featured_image' ) ) {
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      $thumb = get_the_post_thumbnail( NULL, 'full', NULL );

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
}

If you still have the problem kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Ok Thanks, but the images are still the same and are very large the code did not break the site this time but cant see what it did.

Direct to the editor in the child theme for the php file did not work after pasting the code and saving - see first image

The code did save when I pasted it directly to the child theme php file via the file manager - but cant see what it did to change the site. - see pic 2

Question: what should the settings for the media be set to? now they are all at 0’s . I tried to adjust this and save using some exact image sizes and tried different max sizes nothing changed, I even tried a different browser. The images are just displaying larger then the image is so it is now blurry and out of focus still. All images are doing the same thing.

The code is correct, I tried to check the portfolio menu item but nothing shows. Please do not change the Media settings to 0. Add the sizes that will be the most suitable for your design, but with the code given that section will not matter anymore.

Give us the URL of the exact page that you check the case. Also, please consider that you need to clear any kind of cache you may have as a plugin. Also turn off WordFence for testing.

Finally, you need to install the plugin below and regenerate all thumbnails:

Thank you.

oh sorry I only have one portfolio set up now. ill send you that link

Were you able to login?

The reason I left it to 0 is I have images of different sizes for this portfolio.

ok ill turn off word fence and clear cache.

Ill install this plugin.

what are you saying when you say (regenerate all thumbnails)? do you mean, I must delete the gallery and rename the thumbnails and start from the beginning of that gallery? or just install this plugin and it will do what I need it to do?

ok wordfence is off, new plugin Regenerate Thumbnails activated and ran the plugin I dont see a difference heres a screen shot of the site and image preview next to each other see how dull the color is on the left thats the image from the web site and the right is image preview. See the map in the photo how the one on right is darker and colors are deeper this is the issue. the colors are blurry. and dull. see the eyes of the skull preview image is dark and sharp the post image is dull and blurry and not crisp. and the map in each photo same thing washed out no dark deep color. what can we do to fix this image quality issue? Pic # 2 see the detail in the leaves in the tree on the right and left image is the site and no detail.

Hello There,

Thanks for updating in! I have check your portfolio items and all images are displaying the full and original image. It is just that the image is in fullwidth and not the exact width. To resolve this one last issue, you will need to add this code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-thumb {
    background-color: #fff;
    text-align: center;
}

.entry-thumb img {
    min-width: 500px;
    max-width: 100%;
    width: auto;
}

I went ahead and added the changes myself to save some time. The featured image should be displayed properly now.

Please check your site.

Yeah. It is now good the images in the portfolio are now displaying at actual size, nice.

great team work, im sure this will be applied in the future as a way to display post images full size

Thanks

You are most welcome!
We’re glad we were able to help you out.

im actually having the same issue for the blog posts, the image is larger then the actual image uploaded to the media library, then its blurry. Can I get the images to display the size it really is so we dont loose quality?

Hi there,

Given code works both for portfolio and blog posts and I can see that the suggested code is available in the link you provided for the blog post.

The problem is the image itself which has a different size than the image that you have in the portfolio page. Kindly check the Secure Note for more information.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.