Images are blurry

[matheso]

If you scroll down on the link below, you'll see under "Last additions" all the images are blurry. But when you click on one, it displays correctly?

How do I make these images clear?  Thank you

Link: http://taskbasket.net/gallery/index.php

[ron4mac]

Your theme is displaying thumbnails that are only 128 pixels wide as images that are 329 pixels wide. You'll need to solve that.
Perhaps either increase the size of your thumbnail images or increase the number of thumbnails displayed per row.

[allvip]

In this topic http://forum.coppermine-gallery.net/index.php/topic,77955.0.html you asked me a design like this http://bondi.pixieset.com/wassermanfamily/. They use big thumbnails and masonry.
Masonry needs to have a width to work in the style.css for the thumbnails.

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;
}


Sorry my mistake change (width:100% forces the image to fill the div, to be bigger then her real size and that makes it blurry):

Code Select Expand


.image {
    width: 100%;
    height: auto;
    margin: 0px;
}


Code Select Expand


.image {
    max-width: 100%;
    height: auto;
    margin: 0px;
}


Even if the div is big with max-width: 100%; the image will show her real size. Will not try to fill the div. I edited the code even here: http://forum.coppermine-gallery.net/index.php/topic,77955.0.html.

max-width: 100%; height: auto; is for responsive design. If the users watch you gallery on a small PC screen or a tablet, then the image will resize to be small like their screen.
If you don't want it to be too small on very small screens then change :

Code Select Expand


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


with:

Code Select Expand


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


[allvip]

Anyway if you still want big thumbnails and with equal width like on that site then you have to go to Config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose width and for Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * - change 128 px to 340px.

Coppemine by default is cropping thumbnsils with Max Aspect of 128px with 128px. That means if a image has 1000px with 500px the thumnails will be 128px width and x px height. If the image is 500px with 1000px the thumb will be x px width and 128px height.

To update the images already uploaded (after you change Thumbnails settings) go to Files - Admin Tools - Update thumbs and/or resized photos - Only thumbnails

[matheso]

From what you wrote, I'm confused as to what should be changed. It seems like you said to change

Code Select Expand

.image {
    width: 100%;
    height: auto;
    margin: 0px;
}

to

Code Select Expand

.image {
    max-width: 100%;
    height: auto;
    margin: 0px;
}

but my images are still blurry. Also, under Config > Thumbnail Settings, I already have both the values that you mentioned.

Use dimension (width or height or max aspect for thumbnail)* - Width is already selected
Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") *   - Is set to 590 px (I don't want much margin between photos).

I want my thumbnails to be the size they are now... but *not blurry*.   And for smaller screens, I also want them to not be blurry, but simply reduce their width/height depending on the user's screen resolution.

Here is my style.css file.... what needs to be changed???    http://taskbasket.net/gallery/themes/matheso/style.css

It has

Code Select Expand

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


and

Code Select Expand

.image {
   max-width: 100%;
height: auto;
    margin:0px;
}

but still blurry!   

Thank you

[allvip]

Now the css is correct, but you had 128px in config when you uploaded the images.
Coppermine crooped 128px thumbnails. Look, it has 128px with 85px : http://taskbasket.net/gallery/albums/userpics/10001/thumb_14.jpg

Then you went to config and changed to 590 px. Config setting is now forcing the thumbnail image to be 590px when the image is just 128px. Is forcing the image to be 590px because the config adds inline style (see attachment). Inline style as the style in the html or php page not from style.css.

The inline styles are more powefull then the styles in style.ccs.

To make the css more powerfull then the inline style change:

Code Select Expand


.image {
    max-width: 100%;
    height: auto;
    margin: 0px;
}


Code Select Expand


.image {
    width: auto!important;
    max-width: 100%!important;
    height: auto!important;
    margin: 0px;
}


[allvip]

Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") *   - Is set to 590 px (I don't want much margin between photos).

590px is a very big size. To have the size they are now, 340 px is fine. You will kill your server with 590px thumbnails.

I want my thumbnails to be the size they are now... but *not blurry*.   And for smaller screens, I also want them to not be blurry, but simply reduce their width/height depending on the user's screen resolution.

The code for .image is for responsive images and off course not blurry.

You no not read my replies. I said in reply#3:

To update the images already uploaded (after you change Thumbnails settings) go to Files - Admin Tools - Update thumbs and/or resized photos - Only thumbnails

You need to update (coppermine to make new thumbnails for your images) the thumbnails to have the new size.
BTW: Please change first 590px to 340px. 590px is way to much.

[allvip]

I don't want much margin between photos

If you don't want it then delete padding: 0.3rem; from:

Code Select Expand


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


[matheso]

Ok I've changed style.css to:

Code Select Expand

.image {
   width: auto!important;
    max-width: 100%!important;
    height: auto!important;
    margin: 0px;
}

and the 595 px to 340 px. Then went to Admin Tools > and updated all photos, and received the output:

albums/userpics/10001/thumb_Koala.jpg updated successfully!
albums/userpics/10001/thumb_3.jpg updated successfully!
albums/userpics/10001/thumb_3~0.jpg updated successfully!
albums/userpics/10001/thumb_6.jpg updated successfully!
albums/userpics/10001/thumb_7.jpg updated successfully!
albums/userpics/10001/thumb_8.jpg updated successfully!
albums/userpics/10001/thumb_9.jpg updated successfully!
albums/userpics/10001/thumb_10.jpg updated successfully!
albums/userpics/10001/thumb_11.jpg updated successfully!
albums/userpics/10001/thumb_12.jpg updated successfully!
albums/userpics/10001/thumb_13.jpg updated successfully!
albums/userpics/10001/thumb_14.jpg updated successfully!

But then I go to my index page and the thumbnails are 128px  still. (See screenshot).

I thought I did everything properly, I apologize if I missed something.... what's wrong??

[matheso]

It seems that 128px is still over-powering the 340px width....

[allvip]

It seems that 128px is still over-powering the 340px width....

Is not over-powering the 340px width. They still have 128px. Look: http://taskbasket.net/gallery/albums/userpics/10001/thumb_13.jpg.

You need to let Admin Tools to finish until it says at the bottom: Finished updating thumbs/images!.
Anyway, sometimes Admin Tools does not do a good job. I usually do it again until it does it right.

[matheso]

It did say Finished updating thumbs/images!  I just didn't paste it mistakenly.

When I said I thought the 128px was overpowering the 340px, I am clearly confused as to what a "thumbnail" is in Coppermine. I assumed that the images shown under "Latest additions" on the index page were thumbails. They are of size 128px yet my admin config settings set them to be 340px ..  that's why I assumed that 340 was being overpowered. I obviously am missing something... I just want photos to be 340px wide, and not blurry.

I'll retry Admin Tools a bunch more times and report back. Thanks

[allvip]

You are not mistaking nothing. They are all thumbnails: the image for the album (I see you choosed to hide the album), the image in the album (http....thumbnails.php?album=1), last addition, filmstrip. More simple: if the image has thumb_14.jpg, then is a thumbnail. Thumbnail = a preview of the image. When you click it, it takes you to the real image. Only on displayimage.php is the real image.

Like on flickr. This is the thumbnails page: https://www.flickr.com/explore. And this is the real image page: https://www.flickr.com/photos/argiroudaki/15924996940/in/explore-2014-12-26

[matheso]

Ok, I understand that.

But I basically have no use for 128px thumbnails. I want 340px wide thumbnails on my home page (index.php).  Only if a user's screen size was very small would they need 128px thumbnails (responsive).

I just want the images at http://taskbasket.net/gallery/ to be larger, with barely any margin. That's it.  I've just re-updated all images through Admin Tools like 5 times.

Any solution?

[allvip]

Sorry Admin Tools always gived me a big headache.
You can delete them all and reupload or keep trying.
On the album page (http://taskbasket.net/gallery/thumbnails.php?album=1) you have the Edit pics button to edit or delete them all.

[allvip]

with barely any margin

Please read all my replies with attention. I told you what do to in Reply #7.

[Αndré]

matheso, have you run the admin tools to resize your existing thumbnails for "all albums", or just a specific one?

[matheso]

@allvip, I did read that. I was simply mentioning what I wanted to do with margins again - sorry to confuse you.

@André, I was updating for *both* All Albums and the specific one ALL FILES (only album there is).


I've managed to get the photos on my index page to appear larger now, but the margin is still way too big and the images too small. You said 340px was big enough but they don't display how I want them to. I've also changed the margin like you said in style.css to have 

Code Select Expand

padding: 0rem;

I'd like the 3 images in each row to basically fill the entire row, with only small margins in between.

[matheso]

Like this screenshot (except not blurry).

[allvip]

matheso, have you run the admin tools to resize your existing thumbnails for "all albums", or just a specific one?

He has only one album named ALL FILES.
I looked on the album page and some thumbnails were big, some small. I used view image to make sure is the real image size on the server.
With Firefox Inspect I saw 340px for all images.
He has a very slow server.