Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #23076

    Hi,

    The images linked to the portfolio entries are all blurry, it looks very ‘cheap’. I tried to upload different image sizes, but faced with the same problem. Once I click on the image, it is nice and sharp in the lightbox no matter what size is it. But the display in the entry is always blurry.

    There are few links to show the problem:

    http://www.theartsofsilence.com/paintings/the-dream/

    http://www.theartsofsilence.com/paintings/infinity/

    (these 2 above are very narrow and long images – displays terribly)

    http://www.theartsofsilence.com/paintings/dancing-ribbons/

    http://www.theartsofsilence.com/gallery/

    I am ready for any kind of help!

    I want to make these images attractive for the visitors. As they look right now, I’d rather run away :)

    Thank you in advance,

    Viktoria

    #118460

    Hi,

    When something looks blurry its always for one of two reasons

    1) You added an image smaller than the space provided for it.

    2) You changed the aspect ratio of an image in an unnatural way.

    In your case on this page http://www.theartsofsilence.com/paintings/the-dream/ , you added an image of unknown size that was resized by wordpress to 392×930 when the space could fit an image 610×1447 , so naturally your image enlarged nearly by 100%, thereby making it look blurry and distorted. Remember to always use the biggest images possible because when an image shrinks, this blurriness doesn’t happen.

    a) First lets install Simple Image Sizes plugin, http://wordpress.org/extend/plugins/simple-image-sizes/ , which will list all the theme’s pre-set image sizes in Settings > Media , as well as allow you to set whether to crop an image or not.

    b) The image on this page http://www.theartsofsilence.com/paintings/the-dream/ falls under ‘fullsize’ 930×930 (no crop) That means that the image you upload will scale down (always upload images for this location where at least either width or height is greater than 930)

    c) I would instead change it to 610px x 610px. Since that is the space available. So you should upload images of 3 types, squares equal to or bigger than 610×610 , landscapes where the *width* is equal to or bigger than 610. and portraits, where *the width* is equal to or bigger than 610. If you do that, you will have no issues.

    d) If you are happy with those constraints just add the following to quick css located in Choices > Theme Options > Layout Styling … the text area on the bottom of the page

    #top .slideshow li img {
    width: auto !important;
    max-height: 610px !important;
    max-width: 610px !important;
    height: auto !important;
    }

    Thanks,

    Nick

    #118461

    Hi Nick!

    Thank you for your advices! I did, what you suggested. It is not blurry anymore.

    However this action changed a few things:

    1.) Hover effect on entries http://www.theartsofsilence.com/paintings/the-dream/, please let me know how to fix it.

    2.) Also hover on the gallery site is not in the middle and the ratio of the thumbnail pictures changed on 3 column portfolio. It is a more focused image now, only see a little part of the original image: http://www.theartsofsilence.com/gallery/

    3.) http://www.theartsofsilence.com/paintings/the-dream/ – The white space below is extremely big. Can we do smtg about it?

    4.) And the main page slideshow image sizes changed as well. The uploaded size of these images are 990×340. They were fine before I made these changes.

    Thanks again!

    Viktoria

    #118462

    Obviously the problem originates from adding the code to the css.

    #top .slideshow li img {

    width: auto !important;

    max-height: 610px !important;

    max-width: 610px !important;

    height: auto !important;

    }

    #118463

    Obviously the problem originates from adding the code to the css.

    #top .slideshow li img {

    width: auto !important;

    max-height: 610px !important;

    max-width: 610px !important;

    height: auto !important;

    }

    #118464

    Hi Nick,

    I found a solution for 2.) and 4.) problem by modifying your code like this:

    #top.single-portfolio .slideshow li img {

    width: auto !important;

    max-height: 610px !important;

    max-width: 610px !important;

    height: auto !important;

    }

    I still need to fix the

    – magnifying glass overlay and

    – the large white space below the images with portrait layout. exp: http://www.theartsofsilence.com/paintings/light-explosion/ or http://www.theartsofsilence.com/paintings/the-dream/

    Thanks a lot!

    All the best,

    Viktoria

    #118465

    Hi,

    Please add this to the bottom of your custom.css

    #top.single-portfolio .container .eight.units {
    max-width: 610px;
    width: 23.6em;
    min-width: 23.6em;
    }
    #top.single-portfolio body .unit.alpha, #top.single-portfolio body .units.alpha {
    width: 100%;
    }
    #top.single-portfolio .single-portfolio-entry .post-entry {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    }
    #top.single-portfolio .slideshow.fade_slider {
    height: 100% !important;
    max-height: 610px;
    }

    You know, we need to make an adjustment, because otherwise, since every item is different proportions, its going to be insanity trying to get the overlay to fit. We need to set a constant width and let the height be variable. In simple image sizes, can you set the width at 610 and the height at 9999 (no crop set). This way the width will be consistent at 610 while the height will be proportional according to each painting size. You will need to run the regenerator on the bottom of Setttings > Media in order to regenerate the current images into the new size.

    Thanks,

    Nick

    #118466

    Hi Nick,

    you are amazing! It is sharp now, right size, right space below. Thank you very much.

    I ended up adding this code:

    #top.single-portfolio .container .eight.units {
    max-width:440px;
    }
    #top.single-portfolio body .unit.alpha,#top.single-portfolio body .units.alpha {
    width:100%;
    }
    #top.single-portfolio .single-portfolio-entry .post-entry {
    margin-right:auto;
    margin-left:auto;
    width:100%;
    }
    #top.single-portfolio .slideshow.fade_slider {
    height:100% !important;
    max-width: 440px;
    }

    Another question came up.

    What if, I want to display AJAX portfolio; Can we adjust the Ajax Portfolio image size to these settings (440px wide images)?

    http://www.theartsofsilence.com/gallery/

    Thanks a lot,

    Viktoria

    #118467

    Hi,

    In ajax, you again need to check simple image sizes, settings > media, and somewhere there is a directive on that page that crops your images to 440×344 (440 is what you should look for on that page) …i think it is called ‘featured’, …while the space allows for a width of 609 .. so do the same changes … no crop, height 9999, and width 609 or however you’ve done it on the other page then regenerate. That should do the trick and make everything fall in place. Let us know how it went. Just remember to always upload images at least as wide or wider than the width you set.

    While you are at it, if you plan on *only* using portfolio thumbnail in 3 column format (as you are doing now) you can change the thumbnail image size as well because now it saves your thumbnails in 495×400 but the size of thumbnails when used in 3 columns is 309×249 . so find on settings>media 495×400 and change it to 309×249 (with crop), then regenerate. This will make the images not have to shrink down and google will rank you better for speed.

    Also be aware that each time you regenerate the quality of the image drops a tiny bit, so one is ok, but 10 times you will have an ugly blob of color.

    Thanks,

    Nick

    #118468

    Nick, can you please help me with problem close to Victoria had: I want to have 4 grig portfolio with images with fixed size of 200×200 px:

    http://www.kriesi.at/support/topic/portfolio-preview-200×200-px-with-fixed-size?replies=5#post-112063

    #118469

    @warmon you sent me an email and I answered you.

    Thanks,

    Nick

    #118470

    Nick, unfortunately I couldn’t fix the images in AJAX. I can’t find the size that you referred to. But it is okay, I decided not to use AJAX.

    Thanks for the great tips! I am not sure, that I only want use the 3 column portfolio, but a set the size anyway.

    I have another question though. It seems that my images load in quite slow. Is there anything that I could do?

    Regards,

    Viktoria

    #118471

    Hi,

    You can use portfolio of any size, just make the same adjustments. or have multiple portfolios, each one of a different size. Css can be target on a page level so its not a problem.

    The bigger the portfolio page, the longer the load. Since you have paintings, its a tough call, since you don’t want to over optimize them so the colors become bland and the painting loses any charm to a potential buyer. However there are things you can certainly do.

    I just ran your site through an analyzer. Who is your host? Your time to first byte is horrible and is the main thing holding you back. Basically when someone connects to your site. your server sits for 2-6 seconds sometimes and tries to figure out what’s going on before starting to serve the html and the files…

    which themselves are served well, but that initial delay speaks of a misconfigured server. whether mysql or apache. Of Course if you are on $3/month shared hosting with 10,000 websites on your box then at peak hours this is to be expected. Though you overall are very fast, but that time to first byte is killing you.

    Normally it should be no more than .15 or .2 of a second on a properly configured device.

    http://www.webpagetest.org/result/130616_DB_a6849ace2b027f462023c3838b9e17df/1/details/ see the waterfall with the bars, and the first one super long, thats the problem, as you can see the other pieces load fast.

    1) Please install this plugin. http://wordpress.org/plugins/bwp-minify/ It will just concatenate all your css files into 1-2 and js files into 1-2

    2) You need this plugin http://wordpress.org/plugins/w3-total-cache/ to cache all your files. Its a bit of a pain to config though. I will try to make a tutorial.

    Thanks,

    Nick

    #118472

    Wow Nick, thanks for the explanation, it does make sense now. My host is Bluehost, it cost a little more than $3 ;) So I would expect it to serve better….. Anyway.

    I installed the plugins.

    1. Do I have to do anything with the bwp minify?

    2. I am anxious to see your tutorial for total cache and set up the magic tool :)

    I appreciate your help and the knowledge that you share.

    Best,

    Viktoria

    #118473

    hi

    activate w3tc. Go to here http://pastebin.com/PifkvDBW and copy all of that and paste it to a text file, which you need to save as 0.php (zero)

    inside the plugin go all the way down to bottom of General Settings tab, and you will be able to import configuration which is 0.php, after import , that should be it, since those are the general settings. and take care of the big stuff.

    Thanks,

    Nick

    #118474

    Hey Nick, I did what you said. It gave my a warning after uploading: ‘empty the page cash’. I did. Since I have no idea what I’ve done, is there any way to see if it works?

    Nick you must be an expert!

    Thanks a lot!

    ps: anything that I have to do with bwp minify besides activation?

    #118475

    Hi,

    A cache is this: every time a visitor goes to a page wordpress slowly generates that page and displays it. but with a cache, a copy of that page is then saved as plain html with no php, and no database interaction. so while that cache remains for 1 hour any other visitor will be served that plain html page generated by the first visitor which requires no database (or limited database interaction) and no php. so time is shaved off the total load time since server can relax. Clearing the cache , just means you are asking server to clear out the copies which it needs to do anyway, so do that whenever it asks you to clear out any types of caches since it just will rebuild them again , which is good, otherwise updates aren’t seen.

    —-

    You can see everything works by loading up any page (not logged in as administrator), and right clicking on an empty space on your page and viewing source, then scrolling to the very bottom of the code you will see something like this: http://i.imgur.com/TfgeA8M.png

    As you can see it says cache working, and what it cached on that particular page. Every page is different. If someone leaves a comment, the cache will automatically rebuild.

    The other plugin is working too, you don’t need to do anything with it ( http://i.imgur.com/3qX3gdd.png ) You can see in image that the javascript individual files are all concatenated into a single file on bottom, and there is another one like that on top for the ones that need on top and a third for all css, so instead of 20 files only 3 are loaded.

    Thanks,

    Nick

    #118476

    Nick, I am very grateful for your help. Thank you very much!

    I have no more question right now.

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Blurry Portfolio Entry Images’ is closed to new replies.