forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: matheso 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 (http://taskbasket.net/gallery/index.php)
-
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.
-
In this topic http://forum.coppermine-gallery.net/index.php/topic,77955.0.html (http://forum.coppermine-gallery.net/index.php/topic,77955.0.html) you asked me a design like this http://bondi.pixieset.com/wassermanfamily/ (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) :
#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):
.image {
width: 100%;
height: auto;
margin: 0px;
}
.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 :
#thumbWrapp .thumbnails {
width: 32%;
float: left;
padding: 0.3rem;
}
with:
#thumbWrapp .thumbnails {
width: 32%;
max-width: 130px;
float: left;
padding: 0.3rem;
}
-
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
-
From what you wrote, I'm confused as to what should be changed. It seems like you said to change
.image {
width: 100%;
height: auto;
margin: 0px;
}
to
.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 (http://taskbasket.net/gallery/themes/matheso/style.css)
It has
#thumbWrapp .thumbnails {
width: 32%;
float: left;
padding: 0.3rem;
}
and
.image {
max-width: 100%;
height: auto;
margin:0px;
}
but still blurry! ???
Thank you
-
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 (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:
.image {
max-width: 100%;
height: auto;
margin: 0px;
}
.image {
width: auto!important;
max-width: 100%!important;
height: auto!important;
margin: 0px;
}
-
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.
-
I don't want much margin between photos
If you don't want it then delete padding: 0.3rem; from:
#thumbWrapp .thumbnails {
width: 32%;
float: left;
padding: 0.3rem;
}
-
Ok I've changed style.css to:
.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??
-
It seems that 128px is still over-powering the 340px width....
-
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 (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.
-
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
-
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 (https://www.flickr.com/explore). And this is the real image page: https://www.flickr.com/photos/argiroudaki/15924996940/in/explore-2014-12-26 (https://www.flickr.com/photos/argiroudaki/15924996940/in/explore-2014-12-26)
-
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?
-
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.
-
with barely any margin
Please read all my replies with attention. I told you what do to in Reply #7.
-
matheso, have you run the admin tools to resize your existing thumbnails for "all albums", or just a specific one?
-
@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 padding: 0rem;
I'd like the 3 images in each row to basically fill the entire row, with only small margins in between.
-
Like this screenshot (except not blurry).
-
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.
-
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%.
-
Sorry. My mistake again ;D
I also did not understood what you said :D
I changed the code even here: http://forum.coppermine-gallery.net/index.php/topic,77955.0.html (http://forum.coppermine-gallery.net/index.php/topic,77955.0.html)
Go to style.css and delete width: 100%; from:
#cpg_logo_block_name {
width: 100%;
padding: 1rem 0.5rem 1rem 0.5rem;
}
-
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.
-
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.
-
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.
-
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...
-
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:
// 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);
}
}
-
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!
-
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.
-
Off-topic: that depends on your settings. Detailed information:
Thanks.
-
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...
-
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) :
#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.
-
Test it your theme on my gallery:
Attachament 1 has :
#thumbWrapp .thumbnails {
width: 32%;
float: left;
padding: 0.3rem;
}
Attachament 2 has :
#thumbWrapp .thumbnails {
width: 32%;
float: left;
padding: 0rem;
}
Attachament 3 has :
#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).
-
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.
-
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:
#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.
-
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/ (http://quirktools.com/screenfly/)
-
You can use CSS3 @media Query: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
add:
@media all and (min-width: 1025px) {
#thumbWrapp .thumbnails {
width: 310px;
}
after:
#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.
-
I belive websites like flickr use something like Responsive Img plugin responsiveimg.com/ (http://responsiveimg.com/) or Adaptive Images http://adaptive-images.com/ (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/ (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://forum.coppermine-gallery.net/index.php/topic,77338.0.html (http://forum.coppermine-gallery.net/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.
-
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/ (http://allvip.us/gallery/)
-
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.
-
Is there a way to remove the Date Added from showing beneath the thumbnails? I can't find the option in Config. Thank you
-
Is there a way to remove the Date Added from showing beneath the thumbnails? I can't find the option in Config. Thank you
In config, no.
Add in style.css:
.thumb_caption_ctime {
display: none;
}
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.
It looks fine.
To be even more convinced test it here: http://quirktools.com/screenfly/ (http://quirktools.com/screenfly/)
-
Looks good to me too. Thanks for helping me through this! You are extremely helpful.