Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1] 2 3   Go Down

Author Topic: Images are blurry  (Read 21174 times)

0 Members and 1 Guest are viewing this topic.

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Images are blurry
« on: December 27, 2014, 06:43:31 am »

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
Logged

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Images are blurry
« Reply #1 on: December 27, 2014, 02:55:39 pm »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #2 on: December 27, 2014, 03:58:14 pm »

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]
#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]
.image {
    width: 100%;
    height: auto;
    margin: 0px;
}

Code: [Select]
.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]
#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    padding: 0.3rem;
}


with:

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


« Last Edit: December 27, 2014, 07:56:03 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #3 on: December 27, 2014, 04:24:48 pm »

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
« Last Edit: December 27, 2014, 04:38:14 pm by allvip »
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #4 on: December 27, 2014, 04:59:01 pm »

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

Code: [Select]
.image {
    width: 100%;
    height: auto;
    margin: 0px;
}

to

Code: [Select]
.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]
#thumbWrapp .thumbnails {
    width: 32%;
float: left;
    padding: 0.3rem;
}


and

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

but still blurry!    ???

Thank you
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #5 on: December 27, 2014, 05:41:18 pm »

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]
.image {
    max-width: 100%;
    height: auto;
    margin: 0px;
}

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

« Last Edit: December 27, 2014, 05:52:09 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #6 on: December 27, 2014, 06:06:32 pm »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #7 on: December 27, 2014, 06:11:07 pm »

I don't want much margin between photos

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

Code: [Select]
#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    padding: 0.3rem;
}
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #8 on: December 27, 2014, 06:22:03 pm »

Ok I've changed style.css to:

Code: [Select]
.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:

Quote
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??
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #9 on: December 27, 2014, 06:23:32 pm »

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

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #10 on: December 27, 2014, 06:35:41 pm »

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.
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #11 on: December 27, 2014, 06:51:21 pm »

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
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #12 on: December 27, 2014, 07:12:22 pm »

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
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #13 on: December 27, 2014, 07:20:47 pm »

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?
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #14 on: December 27, 2014, 07:38:17 pm »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Images are blurry
« Reply #15 on: December 27, 2014, 07:51:50 pm »

with barely any margin

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Images are blurry
« Reply #16 on: December 27, 2014, 07:55:23 pm »

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

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #17 on: December 27, 2014, 07:59:48 pm »

@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]
padding: 0rem;
I'd like the 3 images in each row to basically fill the entire row, with only small margins in between.
Logged

matheso

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 91
Re: Images are blurry
« Reply #18 on: December 27, 2014, 08:02:42 pm »

Like this screenshot (except not blurry).

Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Re: Images are blurry
« Reply #19 on: December 27, 2014, 08:04:22 pm »

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.
Logged
Pages: [1] 2 3   Go Up
 

Page created in 0.03 seconds with 19 queries.