Images are blurry

[allvip]

Like this screenshot (except not blurry).

I don't understant what you mean, but I saw everything is fine on the album page and index.
I saw you delete all the images and reuploaded. For margin read reply #7.
They are not blurry, but you need to know that coppermine by default is uploading the images with 80% quality.
If you want the images to have the same quality like they are in your PC: Config - File settings - Quality for JPEG files - 100%.

[allvip]

Sorry. My mistake again 
I also did not understood what you said 
I changed the code even here:  http://coppermine-gallery.com/forum/index.php/topic,77955.0.html

Go to style.css and delete width: 100%; from:

Code Select Expand


#cpg_logo_block_name {
    width: 100%;
    padding: 1rem 0.5rem 1rem 0.5rem;
}


[Αndré]

If you want the images to have the same quality like they are in your PC: Config - File settings - Quality for JPEG files - 100%.

That's not always true. Coppermine stores files as they are if they don't exceed any dimension limit. If Coppermine needs to resize files, then the above mentioned setting will take effect. But if you upload files with e.g. 75% JPEG quality and Coppermine needs to resize them, a setting of 100% means, that the resized files will be stored with 100% JPEG quality, not 75% as the original.

[allvip]

That's not always true. Coppermine stores files as they are if they don't exceed any dimension limit. If Coppermine needs to resize files, then the above mentioned setting will take effect. But if you upload files with e.g. 75% JPEG quality and Coppermine needs to resize them, a setting of 100% means, that the resized files will be stored with 100% JPEG quality, not 75% as the original.

So, that settings is only if I have Create intermediare images on.
I hope coppermine is not doing anything to the original image because now I optimize them with Photoshop before upload.

[allvip]

Sorry. Stupid question. You just said: Coppermine stores files as they are if they don't exceed any dimension limit and I have the settings to have very big width and height.

[matheso]

I deleted the width from #cpg_logo_block_name  ... but there is no change to my file sizes on my index page.

Why is this so complicated. I only want my 3 images to fill the entire row they're on - while maintaining good quality. My screenshot above shows what I mean. This should be a 2 minutes fix, I don't get it...

[Αndré]

Sorry. Stupid question. You just said: Coppermine stores files as they are if they don't exceed any dimension limit and I have the settings to have very big width and height.

Off-topic: that depends on your settings. Detailed information:

Code (include/picmgmt.inc.php) Select Expand

        // resize picture if it's bigger than the max width or height for uploaded pictures
        if (max($imagesize[0], $imagesize[1]) > $CONFIG['max_upl_width_height']) {
            if ((USER_IS_ADMIN && $CONFIG['auto_resize'] == 1) || (!USER_IS_ADMIN && $CONFIG['auto_resize'] > 0)) {
                $resize_method = $CONFIG['picture_use'] == "thumb" ? ($CONFIG['thumb_use'] == "ex" ? "any" : $CONFIG['thumb_use']) : $CONFIG['picture_use'];
                resize_image($image, $image, $CONFIG['max_upl_width_height'], $CONFIG['thumb_method'], $resize_method, 'false');
                $imagesize = cpg_getimagesize($image);
            } elseif (USER_IS_ADMIN) {
                // skip resizing for admin
                $picture_original_size = true;
            } else {
                @unlink($uploaded_pic);
                $msg = sprintf($lang_db_input_php['err_fsize_too_large'], $CONFIG['max_upl_width_height'], $CONFIG['max_upl_width_height']);
                return array('error' => $msg, 'halt_upload' => 1);
            }
        }

[matheso]

I created this demo in MS Paint (showing only 1 row) You can clearly see the images basically take up the entire row. This is what I want my index page to look like, but I want my images to be GOOD quality.

That's it!

[allvip]

I can see in your MS Paint demo that you want margin, so please put back padding: 0.3rem in reply#7.

If is not filling your row then make the thumbnails bigger. I thought 340px is fine.
Anyway I see everything fine on my PC, only that you Share bar is ruinning the resonsive layout (should 100% of any user screen). That's why you have the scroll bar at the bootom (see attachment share2.jpg).
Maybe because the share code has that right -40px (see attachment share1.jpg). I am not sure. I do not use share bars.

[allvip]

Off-topic: that depends on your settings. Detailed information:

Thanks.

[matheso]

Ok.. so I've changed the width to 480 px and re-uploaded all my photos once again. Now they seem to fill it out better but not perfectly.

I have a major concern with Coppermine though:  Does this mean that anytime I want to update the layout of my gallery (for example, the margins, or thumbnail widths), I'll have to re-upload my ENTIRE gallery again?  That is so incredibly inefficient it gives me doubts about Coppermine.

This surely can't be the only solution...

[allvip]

No, no, no, but please read all my replies. In reply#2 I said:

If you look in your style.css you will see (you can change width 32%; to a smaller value if you do not want big thumbnails anymore) :

Code Select Expand


#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    padding: 0.3rem;
}


I just made a draft in the other topic. I did not payed attention to all details. You said you know css and html in another topic.

Just change width: 32%; to width: 32.5%; or 33% until is right.
You changed the width to 480 px that is huge. Maybe 340px is fine and enough to fill the row, but the div width 32% is not enough.

Div .thumbnails is the div that contains the image and I forgot about it.

[allvip]

Test it your theme on my gallery:

Attachament 1 has :

Code Select Expand


#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    padding: 0.3rem;
}


Attachament 2 has :

Code Select Expand


#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    padding: 0rem;
}


Attachament 3 has :

Code Select Expand


#thumbWrapp .thumbnails {
    width: 33.2%;
    float: left;
    padding: 0rem;
}


The firt code (the original one is ok). Your new header or share bar is ruinning the layout (makes it more the 100% screen resolution).

[Αndré]

Does this mean that anytime I want to update the layout of my gallery (for example, the margins, or thumbnail widths), I'll have to re-upload my ENTIRE gallery again?

No. If you change the thumbnails (or intermediate-sized pictures) settings, you need to run the admin tools to update any existing files. Please note the asterisk next to each thumbnail size settings, it tells you e.g.

Max dimension of a thumbnail (width, if you use "exact" in "Use dimension")
When changing this setting, only the files that are added from that point on are affected, so it's advisable that this setting is not changed if there are already files in the gallery. You can, however, apply the changes to the existing files with the "admin tools (resize pictures)" utility from the admin menu.

Of course the admin tools just work if they have permission on file system level to change the files.

If you change anything related to your theme (e.g. CSS), don't forget to force your browser to re-load the CSS files and/or delete the browser cache.

[allvip]

It looks fine on my PC (see attachment  with my monitor screenshoot).
I do not know your monitor size. Mine is 1024px.
Anyway, if you add background-color: #000000; to #thumbWrapp .thumbnails you will see how much space every row with an image fills. Just for testing, then you delete it.

like this:

Code Select Expand


#thumbWrapp .thumbnails {
    background-color: #000000;
    width: 32%;
    float: left;
    margin: 0.1%;
}



Also use margin not padding. Is better.
Also use use % not rem;
rem is not ok for padding.

[allvip]

IMPORTANT: if users have a bigger monitor resolution, then the div .thumbnails will be 32% of their screen and the image on the server is 340px. The image can not be distorted. width: 100% instead of width: auto; and max-width: 100%; to fill the div. Will look blurry because her real size on the server is 340px;

Test your gallery here: http://quirktools.com/screenfly/

[allvip]

You can use CSS3 @media Query: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

add:

Code Select Expand


@media all and (min-width: 1025px) {
    #thumbWrapp .thumbnails {
       width: 310px;
}


after:

Code Select Expand


#thumbWrapp .thumbnails {
    width: 33%;
    float: left;
    margin: 0.1%;
}


change the values for width and margin with the numbers that fit for you.

That will make div .thumbnails (the div that contains the image) 32% width for screens that are less then 1025px and 310px for screens that are more then 1024px.

Width in % is important for small screens (for the image to be responsive, become smaller then 310px to fit their screen), for big screens a width in pixels will be fine. The div will have the width of the image and masonry will place as much thumbnails as she can. Ex: 1920px screen. Masonry will place 6 thumbnails. 1280px screen. Masonry will place 4 thumbnails. See attachments.

I belive 310px for thumbnails is ok. To need to make them bigger. Not good for a shared host.

You should know that the width of the div .thumbnails is important. If you make the thumbnails 500px (just for example), but you do not change the width of the div, the image will display to fit the div. Will look small even if she is 500px. 32% width of the div means 32% of the screen resolution.

[allvip]

I belive websites like flickr use something like Responsive Img plugin responsiveimg.com/ or Adaptive Images http://adaptive-images.com/ to server users diffrent size thumnails (creates new images on the fly). Depending on their screen.
Or maybe their script creates on upload 4 or more diffrent size thumbnails and then they use something like jQuery Picture http://jquerypicture.com/ to serve thumbnails depending on users screen.

Don't ask me how to use that. You can start a new topic about that and if someone knows how to make coppermine create thumnbnails on the fly with those plugins, they will answer.

Maybe use this first: Meta albums from idex.php to take the actual image not the thumbs http://coppermine-gallery.com/forum/index.php/topic,77338.0.html. The code can be edited for all thumbnails not just for meta albums, then try use Responsive Img on coppermine. I don't know.

[allvip]

I've just re-updated all images through Admin Tools like 5 times.

I have a major concern with Coppermine though:  Does this mean that anytime I want to update the layout of my gallery (for example, the margins, or thumbnail widths), I'll have to re-upload my ENTIRE gallery again?  That is so incredibly inefficient it gives me doubts about Coppermine.

This surely can't be the only solution...

Andre answered to that in Reply #33, but I want to add:
Admin Tools always worked for me. Sometimes it did not work but never that bad.
I had my gallery from 2012 or 2011. I had 128px thunbnails. This year I updated all my thumbnails to 340px. I have 9GB of images. Everything worked fine. I had to take album per album because my server is a shared host and can not do all albums at once.

My gallery http://allvip.us/gallery/

[matheso]

Ok, I've implemented everything you've said, and I'm satisfied with the layout from my end. Can you confirm that it looks good & even from your end?

I'll mark it as solved once I'm convinced the issue is fixed.