Large images appearing in wrong position
Permalink Browser Info Environment
I've just set up a gallery using a fileset, with images of various shapes/sizes. I'm using the template "No Crop 600x400". There were initially 14 images in the fileset. What I saw was that the first 8 images were fine, but from the 9th onwards, the large image appeared down below where it should, by about the height of the image box - in fact its top edge lined up exactly with the BOTTOM edge of the 8th image. It looks very like some sort of wrapping is occurring.
I tried reordering the images in the fileset, but that did not change their order in the gallery. I was trying to see if it was the specific image that triggered the problem, or the fact that it was the 9th. So I deleted the 9th image so that a different image was now the 9th. The problem still happened at the 9th image.
I am using a full-width page template which has a "page" DIV that is 960px wide. I've tried various options for the images per page setting - no help. The problem still occurs at the 9th image.
I then removed all images from the fileset and added them back one by one. The problem occurred on an image that was uploaded at 600 x 421px in size. I tried deleting it, resizing it down to 570x400 (so it wouldn't need downsizing to display full size) and uploading it again. The problem still happened on that image! I'm totally bemused, hence this enquiry. What on earth is going on here?
I tried reordering the images in the fileset, but that did not change their order in the gallery. I was trying to see if it was the specific image that triggered the problem, or the fact that it was the 9th. So I deleted the 9th image so that a different image was now the 9th. The problem still happened at the 9th image.
I am using a full-width page template which has a "page" DIV that is 960px wide. I've tried various options for the images per page setting - no help. The problem still occurs at the 9th image.
I then removed all images from the fileset and added them back one by one. The problem occurred on an image that was uploaded at 600 x 421px in size. I tried deleting it, resizing it down to 570x400 (so it wouldn't need downsizing to display full size) and uploading it again. The problem still happened on that image! I'm totally bemused, hence this enquiry. What on earth is going on here?
| Type: | Discussion |
|---|---|
| Status: | New |
Thanks for the reply - I have to say it's the opposite of what I would have expected! Can you clarify - is it only the X-dimension that causes the problem, or both X and Y? And if either, is the problem that the image is smaller in one dimension, or both? I ask because there were other images in the set that were less than 600px wide OR less than 400px high, and they seemed to work OK. I will of course check them all now!
Well, I've more or less started again with this in light of your reply. Unfortunately I still can't get it to work how it should. I now have 7 images in the gallery, added one by one then viewed. Their sizes are:
1. 300 x 450
2. 470 x 600
3. 600 x 603
4. 500 x 333
5. 600 x 600
6. 500 x 293
7. 600 x 410
All of these display correctly except no. 7, which fits your advised criteria. Nos. 4 and 6 are smaller than you advise, but they do display correctly. So I'm even more confused. I wondered if perhaps an image could cause a problem for the following one, so I removed image 6. But Image 7 (now image 6) still displayed in the wrong place. I have tried exiting edit mode and viewing the page normally, but no difference. I'm using the Chrome browser.
I'm disappointed with this - I never thought I'd have to be fiddling at this level.
1. 300 x 450
2. 470 x 600
3. 600 x 603
4. 500 x 333
5. 600 x 600
6. 500 x 293
7. 600 x 410
All of these display correctly except no. 7, which fits your advised criteria. Nos. 4 and 6 are smaller than you advise, but they do display correctly. So I'm even more confused. I wondered if perhaps an image could cause a problem for the following one, so I removed image 6. But Image 7 (now image 6) still displayed in the wrong place. I have tried exiting edit mode and viewing the page normally, but no difference. I'm using the Chrome browser.
I'm disappointed with this - I never thought I'd have to be fiddling at this level.
This block has been used on hundreds of websites without issues. The cropping & resizing feature is the only limitation which requires larger images to work well. Thus the block templates give the extra flexibility where that is required.
The other 2 factors it could be:
1) The image may be corrupted or not uploaded completely. I've seen this occur before. Simply deleting the image from the file manager and re-uploading it can do the trick. Otherwise if the original file had problems, you can try replacing it with a completely alternative image with the same dimensions and see if that's it.
2) When the images are resized, they are cached in the "/files" folder at the top level of your C5 installation on your server. This is done for performance reasons so the gallery will load as fast as possible. So removing an image and adding the same one (without deleting it from the file manager) won't re-generate the cached copy. That's why deleting and re-uploading the particular image is the better way to go.
Try those and let me know how you go.
JB
The other 2 factors it could be:
1) The image may be corrupted or not uploaded completely. I've seen this occur before. Simply deleting the image from the file manager and re-uploading it can do the trick. Otherwise if the original file had problems, you can try replacing it with a completely alternative image with the same dimensions and see if that's it.
2) When the images are resized, they are cached in the "/files" folder at the top level of your C5 installation on your server. This is done for performance reasons so the gallery will load as fast as possible. So removing an image and adding the same one (without deleting it from the file manager) won't re-generate the cached copy. That's why deleting and re-uploading the particular image is the better way to go.
Try those and let me know how you go.
JB
Deleting the files from File manager and re-uploading is exactly what I have been doing. If there was anything wrong with the image files, surely they would not display properly (as images). They do display ok as images, it's only the positioning that is the problem (sometimes).
One other observation: if I use the Chrome developer tools and examine the page structure, the DIV (or SPAN) that is the image container is not 600px wide - it's about 585. Does that sound right? I can't verify the exact details of this right now, as my web host seems to have just gone down.
One other observation: if I use the Chrome developer tools and examine the page structure, the DIV (or SPAN) that is the image container is not 600px wide - it's about 585. Does that sound right? I can't verify the exact details of this right now, as my web host seems to have just gone down.
Perhaps I'm misunderstanding the issue. If the full image shows up but it's just not vertically aligned, that would require a CSS tweak. Can you please provide a sample URL so I can take a closer look?
My web host is back, so I have attached a screenshot showing the DOM in the Chrome developer tools. I note the following:
1. the SPAN with "class=image-wrapperg currentg" is only 525px wide - should it not be 600?
2. The image (incorrectly displaying below the span) has been rendered to the browser at 587x402px. As uploaded, it was 600x410.
Is it possible that there is some subtle issue with my theme, and the page structure is not quite right? I made up the theme myself some time back. It does seem to work OK, but it was done when I was very new to C5 (still am really, but have pretty much decided to adopt it for our new website).
The website is athttp://www.marshallarts.com.au. Because it is a new website under construction, the index.php is sometimes switched to just immediately redirect to our old website athttp://www.westnet.net.au - if that happens you won't see a C5 website. Go to "Galleries", then "Award Winners - Steve". The last image is the one with the problem.
Thanks for staying with this - I really want to like this gallery, because it has just the right level of "fancyness" for my taste.
Cheers
Steve
1. the SPAN with "class=image-wrapperg currentg" is only 525px wide - should it not be 600?
2. The image (incorrectly displaying below the span) has been rendered to the browser at 587x402px. As uploaded, it was 600x410.
Is it possible that there is some subtle issue with my theme, and the page structure is not quite right? I made up the theme myself some time back. It does seem to work OK, but it was done when I was very new to C5 (still am really, but have pretty much decided to adopt it for our new website).
The website is athttp://www.marshallarts.com.au. Because it is a new website under construction, the index.php is sometimes switched to just immediately redirect to our old website athttp://www.westnet.net.au - if that happens you won't see a C5 website. Go to "Galleries", then "Award Winners - Steve". The last image is the one with the problem.
Thanks for staying with this - I really want to like this gallery, because it has just the right level of "fancyness" for my taste.
Cheers
Steve
Thanks for the extra details Steve. Even though it's just writing, it's nice to hear a fellow Australian accent :-)
Yes, it seems the width of the last image is too wide and throwing out the layout. The resizing should take care of that but for some reason that image is much larger than the others.
You could try adding the following CSS to your site theme:
This will force the width via CSS without losing the image perspective.
Try that out and let me know how it goes.
JB
Yes, it seems the width of the last image is too wide and throwing out the layout. The resizing should take care of that but for some reason that image is much larger than the others.
You could try adding the following CSS to your site theme:
.contentg .advance-linkg{max-width:519px;height:auto;}
This will force the width via CSS without losing the image perspective.
Try that out and let me know how it goes.
JB
Sorry, just noticed the typo in my code. It should be:
.contentg .advance-linkg img{max-width:519px;height:auto;}
Ok, tried that and it did indeed fix the positioning problem. The image is now rendered to the browser at 521x357px, which now fits into the SPAN, so all is well position-wise.
So, where is the actual problem here? Is the width of that SPAN calculated and set somewhere in the javascript, or is it a best-fit into the surrounding page structure? Maybe a bit of both. If it's the former, is it a bug that could/should be fixed? Or if the latter, maybe my theme does need some tweaking so that contained content is not squeezed.
Either way, it seems to me that the image resizing is being done assuming that the space available is 600px wide, instead of basing it on what the space actually is.
Anyway, many thanks for the help with this. I will probably do a bit more investigation re my theme, but for the moment I have a working solution, even if the images are a bit smaller than I would like :-D .
So, where is the actual problem here? Is the width of that SPAN calculated and set somewhere in the javascript, or is it a best-fit into the surrounding page structure? Maybe a bit of both. If it's the former, is it a bug that could/should be fixed? Or if the latter, maybe my theme does need some tweaking so that contained content is not squeezed.
Either way, it seems to me that the image resizing is being done assuming that the space available is 600px wide, instead of basing it on what the space actually is.
Anyway, many thanks for the help with this. I will probably do a bit more investigation re my theme, but for the moment I have a working solution, even if the images are a bit smaller than I would like :-D .
I think I might have nailed this. I looked at the CSS for Gallerific, and saw that there was no 'width' setting at all for the 'image-wrapperg' class. This means the width of the image itself is inherited, in this case from the <a> tag which contains it. There is a selector for that (div.slideshowg a.advance-linkg), which for some reason was setting width=525. I changed that to 600, and wham, the large images now resize into a beautiful 600x400 box, as required. It appears that my page width of 960px is wide enough to accommodate that plus the thumbnail matrix. So I have removed the image max-size from my theme's CSS and it is all fine. Do you see any potential problems with this?
No, that sounds like a good solution and will work fine.
The original implementation of this block forced the resizing and cropping. Later we added the non-cropping block templates based on customer requests. So it's trying to cater to look good on a wide range of templates and different page layouts.
Just ensure you keep a backup copy of the package if you ever upgrade it.
Hope this helps.
JB
The original implementation of this block forced the resizing and cropping. Later we added the non-cropping block templates based on customer requests. So it's trying to cater to look good on a wide range of templates and different page layouts.
Just ensure you keep a backup copy of the package if you ever upgrade it.
Hope this helps.
JB
Yep, all good. One final (I think) question - when I look at the way the gallery is structured in terms of the HTML, it is all DIVs, except for the one just a level or two outside the large image - that one is a SPAN. Is there a compelling reason for that? Especially as it has display:block applied in the CSS, which in some sense makes it into a DIV.
Like some others, I'd like the large images to be centred horizontally in the available space, and it seems to me that containing the IMG in a DIV might make that a bit easier. I know I could just try changing the SPAN to a DIV, but I thought I'd ask the question first. Of course, if there is a simpler way to centre the images horizontally, I'd be happy to know it. (I have searched for that, but didn't seem to get anywhere.)
Like some others, I'd like the large images to be centred horizontally in the available space, and it seems to me that containing the IMG in a DIV might make that a bit easier. I know I could just try changing the SPAN to a DIV, but I thought I'd ask the question first. Of course, if there is a simpler way to centre the images horizontally, I'd be happy to know it. (I have searched for that, but didn't seem to get anywhere.)
It's been almost 2 years since I created the add-on so my memory is a bit rusty. I think I went with the span so vertical alignment of the image (uncropped) would be possible with some fancy CSS hacks. But in reality, there's not a lot of benefit in keeping the span. You should be safe changing that to a DIV. Just double-check any CSS and also the js file for the same class.
Hope this helps.
JB
Hope this helps.
JB
Hope this helps.
JB