Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Portfolio Image Quality

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      The images within my portfolio are blurry although the PNGs I uploaded are sharp. I don’t have any problems anywhere else on my site, so as a test I posted some of my portfolio images on my homepage and they look great (I left them up for you to see). How do I get this fixed?

       

      Thank you.

    • 8 years, 6 months ago Mirela
      Participant

      Hello,

      The images are processed and edit out according to the place you use them. Please check out this article and edit the images dimensions of the portfolio style you are using in order for them to be more clear.

      Best regards!

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      I don’t really understand that article doesn’t seem to help. Can you just tell me what size my images need to be? I sized them exactly what I got from a screen shot of your template.

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      Or by looking any my images can you tell me what code I need to change to make my existing images look clear?

       

      It might be a a good idea to provide a cheat sheet of image sizes for people as it seems most of my problems are coming from trying figure out sizes on my own.

    • 8 years, 6 months ago Mirela
      Participant

      Hello,

      The code changes the images dimensions, but if you have a low resolution image it will lose more quality from cropping.
      For example, in this page (i created a portfolio page since i don’t seem to find any in your site), the featured images are of the same dimensions (600×600), but some are in good quality and some are not. See screenshot.

      I suggest you find high resolution images first then add them as featured images. WordPress will automatically crop them as stated in the code.

      Best regards!

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      I have high resolution images uploaded.

      Here is my portfolio page https://www.lindemancollective.com/work/

      And when you go to my homepage you will see that I have pasted some of the same images there just to show that they are sharp.

      There isn’t an issue with my images it is something with how the portfolio page is rendering them.

    • 8 years, 6 months ago Mirela
      Participant

      Hello,

      The portfolio page does nothing to the images. As stated above, it’s the “add_image_size()” function that crops them according to the dimensions you assign to the function.
      Please read more about it here.
      I see in your portfolio page that not all images are in low resolution. So i suggest you find images of better resolution (better than the current) and upload them again.

      Please know that, this is a WordPress default function and it’s not dictated (changed) from theme.
      Ps: I don’t see any of the home images showing up in the portfolio page.

      Best regards!

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      The images are posted at the bottom of my homepage (see screenshot). None of them should be low resolution as they were built at 72 dpi at the exact size of the example on your website (958 x 394). If that’s not right, please let me know the correct size. Here is a screenshot showing how the same image looks different on the homepage from what it looks like in the portfolio.

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      I have tried making the images twice as big as their displayed size (how they appear on the screen) and have saved them as high as 150 dpi but they always look the same. Can you please help me get this resolved? Thank you, I really appreciate it.

    • 8 years, 6 months ago Ruco
      Keymaster

      Hello,

      The portfolio iamges are resized, maybe that’s the problem. I can’t find the image at portfolios. Please can you show me the portfolio link of this image https://www.lindemancollective.com/wp-content/uploads/2017/01/Screen_Shot3.png

      ?

       

      Regards!

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      Here it is in the portfolio (fifth image in slideshow).

      Here it is in the media uploads.

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      Have you been able to take a look at this? This is one of the last (although one of the biggest) remaining things I need to fix before I launch.

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      Hello? I am really needing to get the issues with my portfolio images fixed so that I can launch my site. Please get back to my ASAP, thanks!

    • 8 years, 6 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      As stated above you need images of very high quality for them to be as clear as possible. Example: Open this portfolio page: https://codeless.co/specular/default/?page_id=614
      The original image (before crop) of the “FEATURED IMAGE RIGHT” portfolio item featured image,is 2000x1896px. Then as stated in the add_image_size() function it is cropped down to 600x600px.
      Please keep in mind that this is cropped in equal dimensions, creating a foursquare like image. But if you have images in rectangle dimensions (more wide than high), then cropping them to a foursquare dimension will affect the image proportions and quality.

      Having a 4 column portfolio will decrease further the featured images width to the 25% of the layout. See screenshot.

      I what i can suggest you is to change the add_image_size( 'port4', 600, 600, true ); line in file functions.php, to rectangular dimensions. (For example is the grayscale portfolio: add_image_size( 'port3_grayscale', 627, 470, true );) Upload images of very high quality. Switch to a three or two column portfolio in order to have bigger images.

      Best regards!

    • 8 years, 6 months ago cclindeman
      Participant

      Expired

      None of this makes any sense to me. My images are high quality and as a test I tried making them 2x bigger and they didn’t look any better. I am getting very frustrated going around and around on this and as a consequence it is delaying the launch of my site/business. Can you just upload an image and show me that it looks clear than then give me the dimensions you used? It doesn’t seem like it should be this hard. I shouldn’t have to go in and code in order to add images to my portfolio and have them look decent.

      Please just show me the dimensions my images need to be and go in and fix the code to make them look right, that is what I purchased.

      Thank you.

      P.S. please make this happen today. I do not want to lose another weekend on this.

      • This reply was modified 8 years, 6 months ago by cclindeman.
    • 8 years, 6 months ago Ruco
      Keymaster

      Hello,

      I fixed it, edited functions.php file. Let us know if you need further help.

      Regards!

    • 8 years, 5 months ago cclindeman
      Participant

      Expired

      You’re awesome! Thank you so much. Can you tell me what the problem was? Will all future images I upload look goo as well?

      Thanks again!

    • 8 years, 5 months ago Mirela
      Participant

      Hello,

      An additional filter for the jpeg images was added. Yes, it will affect all future images.

      Best regards!

    • 7 years, 8 months ago cclindeman
      Participant

      Expired

      I still notice that the images within my portfolio look slightly fuzzy. (The thumbnails look great). They are all high-quality and built-to-size pngs. The only thing I can think of is that since they are large they are getting compressed in some way, but since they are PNGs it doesn’t make sense. Just take a look at the thumbnail for the first entry into my portfolio and compare that with the image once you click on it.

      Ruco, seemed to figure it out in the past, maybe he could take a look.

      Thanks!

      • This reply was modified 7 years, 8 months ago by cclindeman.
    • 7 years, 8 months ago cclindeman
      Participant

      Expired

      OK, so I experimented with importing an SVG image for the first entry in my portfolio and it looks great, but I am not sure if that is a good solution or not or if it can tell you what is going on with my PNGs because they are the exact same files just saved differently.

    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      Can i see a link of the portfolio page? Please enable again the credentials added in your profile data. So we can give this a closer look.

      Thanks!

    • 7 years, 8 months ago cclindeman
      Participant

      Expired

      I think the only thing that changed was the password and I updated that. Let me know if you need anything else.

      Here’s the main portfolio page (everything looks fine here)

      Work

      But when you click on a thumbnail the larger graphics (PNGs) look slightly blurry:

      Capital Campaign Brochure

      However SVGs seem to look good, here’s one I uploaded as a test. https://www.lindemancollective.com/codeless_portfolio/holiday-card/

      That said, I’m not sure SVGs are a good solution.

    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply! Can you please add this code itno your custom css box:

      li.slide_element.flex-active-slide {
          width: auto !important;
      }

      This is the result i get with the code implemented: https://postimg.org/image/ueumdmwcb/
      Let us know.

      Best regards!

      • This reply was modified 7 years, 8 months ago by Mirela.
    • 7 years, 8 months ago cclindeman
      Participant

      Expired

      I pasted it in my “Additional CSS” box but nothing changed.

    • 7 years, 7 months ago Mirela
      Participant

      Hello,

      Theme’s Custom css box is located in General Options. All additional css is added here and it’s saved in the database. So if you take theme updates in the future the code is not lost.
      However, even in the “Additional Css” box, the code still works. I can see the difference with the previous situation. Please check these screenshots to see what has changed:
      Before code: https://postimg.org/image/41a9ltwsr/
      After code: https://postimg.org/image/ja06ztg97/

      If you do not see this, please clear cache and refresh page. You may be seeing a cached copy of the site.

      Best regards!

    • 7 years, 7 months ago cclindeman
      Participant

      Expired

      I don’t see much of a difference—if at all. These images should be crystal clear. They are built to size, 72 dpi, PNGs. I have tried saving them in higher resolutions and different formats and the only thing that helps is saving them as SVGs but those seem to slow down the site and will not work for non vector images. Something is compressing the images in these galleries that isn’t happening other places.

      This has to be fixed, I have been dealing with this long enough. Having nice work samples to look at is one of the most important aspects of my site and with Tower being promoted as a portfolio theme, I expect this to be right.

Viewing 25 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password