Wrong album thumbnail size on mobile phone

Pixelmover · 2018-02-01 02:47:42

On the mobile phone, the thumbnails in an album are displayed incorrectly (too big).
It's only one album like that, in all others the size is displayed correctly.
Deleting and re-uploading the album did not solve the problem.

Faulty presentation: https://www.rainerhassmann.de/galleries/prag/
Correct presentation: https://www.rainerhassmann.de/galleries/schottland/

Who knows the solution? Thank you in advance.

rod barbee · 2018-02-01 03:29:57

strange.
Have you tried clearing template cache?

I don't know if this has anything to do with it or not, but I noticed a lot of filenames (in both albums) that contained non-standard characters as well as periods and commas.

The main difference between the two albums is that the one that's working correctly did not have any periods in the middle of file names.
Something for you to test anyway.

Pixelmover · 2018-02-02 00:09:44

Hi Rod.
The first thing I did was clear the template cache. Unfortunately, without result.
Even renaming files did not help.
A complete exchange of thumbnails was not successful either.
I also deleted the whole album and uploaded it again. No success
But I noticed that the error only occurs in portrait mode.
The representation in landscape format is correct.

In case you would like a guest access to my backlight, I will send you the data by mail

rod barbee · 2018-02-02 00:58:32

it seems that the responsiveness is breaking at that final mobile breakpoint.
You can send Backlight credentials if you want and I'll take a look. But frankly, since both albums are using the same template, both albums should behave the same so I don't know that I'll find anything useful. But I can try.

rod barbee · 2018-02-02 09:06:30

Don't know if you got my email. But I can't see anything useful with just Guest Viewer access. Needs to be Guest Updater.

If you've got the time could you try creating another album of only a few (8-10 images) but make sure that none of the file names have periods (or any other special characters, commas, or spaces) in them. I just want to at least eliminate that variable.

Pixelmover · 2018-02-03 07:58:40

I have tried different things.
So I created a new album (Venedig) with 108 images. Thumbnails was also shown correctly first. After I took out the images from the collection and uploaded new images, the thumbnails were again scaled wrong.
My assumption that it is the file format, has not been confirmed.

In another test, I first uploaded 10 images. Size OK.
Plus another 10 images uploaded. Size OK
Uploaded another 10 images. Thumbnail was enlarged.
As soon as more images were uploaded, the thumbnails were scaled more.
From 55 images, the thumbnails were so large that only one and a half columns are displayed in portrait format.
But in landscape mode it was OK

According to your suggestion, I created a new album (Venedig) with 10 images.

rod barbee · 2018-02-03 08:08:44

I'm seeing something strange on some of your pages. I usually use Firefox but it doesn't show up there. But in Chrome, Opera, and Edge I'm seeing a double scroll bar on the right on some albums and on your main galleries page.

Some things to check:
You're using the latest version of Backlight and Publisher.

Another thing to try is in the Backlight > Publisher dashboard under Special Links. Click Update Album Files.

To your testing. In one test you uploaded 10 images, then another 10 and all was well. After uploading another 10 it went to hell again. Did you try removing those last ten images one at a time to see if perhaps it was any of the images causing the issues?
Frankly, I don't see how they could, but if you remove an image and the album works correctly and then re upload that image and the album has problems again, it would point to an image specific problem.

At least that would give Matt something more to go on as I'm at a loss.

rod barbee · 2018-02-03 08:40:36

Well, I think I discovered where the double scroll bars are coming from. Looks like it's coming from the css for the background gradient. It's showing up in Chrome, Opera, and Edge

Looks like taking out the main tag should fix that. Looks like the html tag can come out too. It doesn't seem to be doing anything:

body
{
	background: linear-gradient(180deg, #cac3b5, #0F0701 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100%;
}

This doesn't address the original problem though. I think that one's going to have to wait for Matt.

Daniel Leu · 2018-02-03 09:38:28

Something strange is going on here....

I'm in Google Chrome and set the window width to 540px, both for the Prag and Venedig albums.

When I check the calculated parameters for '<div 'class="page__column main__column spinal__column">'', Prag is 604.188px wide and Venedig is the expected 540px. So Prag is wider than the viewport....

The width of the thumbnails is derived from the above width and therefore all numbers are off. Looks like this is the cause for this difference. But I have no idea why this is happening. Both galleries use the same template and CSS.

Pixelmover · 2018-02-03 09:41:25

rod barbee wrote:

Some things to check:
You're using the latest version of Backlight and Publisher.
Another thing to try is in the Backlight > Publisher dashboard under Special Links. Click Update Album Files.

Yes, I have the latest version
Yes, I update album files
No access

I keep trying

rod barbee · 2018-02-03 09:41:35

I was seeing the same thing. It's really weird.

Matthew · 2018-02-03 16:42:34

Nothing leaps out at me as being the obvious cause. I'm not inclined to dig very deeply into this while the file names remain as they are. First thing we need to do is minimize potential issues, which means eliminating low-hanging fruit like umlauts in file names, etc.

Whatever the issue, it does seem to be coming from the gallery element, or something therein. If we hide the gallery, its parent elements snap back to the appropriate width.

If you want to pass images, I'd start by un-publishing the images, then re-publish the first five; check the layout; publish five more; check the layout, and so on. See whether the problem kicks in after a specific image arrives on the scene.

Otherwise, please do something to standardize the file names. I have an article here if you need to read up on our promoted standards for file naming:
http://ce4.theturninggate.net/docs/doku … ile_naming

If that solves it, then hey!, we've found the problem! If not, then we'll be in a better place to investigate further.

Pixelmover · 2018-02-04 01:27:55

Thanks, then I will get to work

Pixelmover · 2018-02-06 07:16:27

After I changed all file names according to the convention, I filled the albums with images in steps of 5. I sorted out the images that led to an enlargement of the thumbnails. This was the case in the album Prag as well as in the album Venedig.
The faulty images I have uploaded to a test album Test Prag and Test Venedig. There, the phenomenon of thumbnails showed up again.
In the album Test Prag I marked the last image with 5 stars. If this image is removed, the thumbnails shrink but are still too big.
The sorted images went through the same workflow as everyone else. It is a mystery to me what causes the phenomenon. In earlier albums, the phenomenon has not appeared.

Last edited by Pixelmover (2018-02-06 07:22:34)

rod barbee · 2018-02-06 08:17:07

can you post links to those albums?
Better yet a link to an album that works correctly and a link to another album that's the same as the first except that it has that one extra images that causes the problem.

Pixelmover · 2018-02-07 09:46:44

Here are the links:
correct album https://www.rainerhassmann.de/galleries/prag/
incorrect album https://www.rainerhassmann.de/galleries/Prag_incorrect/
In the album Prag_incorrect it is the last two images that cause an incorrect scaling. Scaling takes place gradually.
One Image = scaling step 1, two Images = scaling step 2, and so on.

Here are two additional links to the test albums in which only images are the cause of the problem.
https://www.rainerhassmann.de/galleries/Test-Prag/
https://www.rainerhassmann.de/galleries/Test-Venedig/

Last edited by Pixelmover (2018-02-07 09:58:07)

Daniel Leu · 2018-02-07 10:26:04

Hi Matt,

When I disable nowrap, the page seems to look correct. Note, this is only visible with a small browser width:

ul.image_metadata li {
    white-space: nowrap;
}

Hallo Rainer, you might want to try to add

ul.image_metadata li {
    white-space: initial;
}

to your photoart.css file. Please note that this is only a workaround waiting for a better solution

rod barbee · 2018-02-07 10:49:39

That's interesting Daniel. What's weird is that these albums are of the same template.
It's going to be interesting to find out what the ultimate cause is.
I wonder if anybody else is seeing this.

Looking around my test site, I've found at least one album that's exhibiting the same issue. Your css fixes it for me.

Daniel Leu · 2018-02-07 11:12:22

rod barbee wrote:

That's interesting Daniel. What's weird is that these albums are of the same template.
It's going to be interesting to find out what the ultimate cause is.
I wonder if anybody else is seeing this.
Looking around my test site, I've found at least one album that's exhibiting the same issue. Your css fixes it for me.

It seems to have something to do with the length of the image attribute:

<ul class="image_metadata">
	<li>Lorem ipsum dolor sit amet, consectetur lorem i</li>
</ul>

47 characters are okay, 48 start to change the look. Adding many more characters increases the size of the thumbnails.

Matthew · 2018-02-07 18:48:47

As bizarre as it seems, the solution is:

.main__column { min-width: 0; }

Setting the min-width explicitly allows the column to flex-shrink to less than its intrinsic width, which it will not do otherwise.

Pixelmover · 2018-02-08 00:45:28

Thanks to Rod, Matthew and Daniel.
As an absolute beginner I'm a bit confused now.

Daniel Leu wrote:

Hallo Rainer, you might want to try to add
ul.image_metadata li {
    white-space: initial;
}
to your photoart.css file. Please note that this is only a workaround waiting for a better solution

Should I complete the CSS?

Daniel Leu wrote:

It seems to have something to do with the length of the image attribute:
<ul class="image_metadata">
	<li>Lorem ipsum dolor sit amet, consectetur lorem i</li>
</ul>
47 characters are okay, 48 start to change the look. Adding many more characters increases the size of the thumbnails.

Where should I use the code?
Should I cut the image attributes?

Matthew wrote:

As bizarre as it seems, the solution is:
.main__column { min-width: 0; }
Setting the min-width explicitly allows the column to flex-shrink to less than its intrinsic width, which it will not do otherwise.

Where should I use the code?

What changes do I have to make now and where?

rod barbee · 2018-02-08 01:05:06

Since Matt found the underlying problem, he'll most likely be fixing it in an upcoming maintenance release. So you could just wait.

But if you want to fix it now, it's really easy. Just add the code Matt posted to a custom css file and associate that file with the Page Template.

.main__column { min-width: 0; }

Here's the documentation on enabling custom css: http://backlight.theturninggate.net/doc … tylesheets
and my own post about it here: http://ttg-tips-and-tricks.barbeephoto. … backlight/

Daniel Leu · 2018-02-08 02:26:26

Pixelmover wrote:

I shortened the file attributes to less than 48 characters for the trial in the test album https://www.rainerhassmann.de/galleries/Test-Prag/ and it worked. However, there was also an image in the album that previously had less than 48 characters (39) in the file attribute and still produced the error in another album. Hhmm ....
should it be less than 39 characters? Where is the limit?

The short term solution is to put following code into your existing photoart.css file.

.main__column { min-width: 0; }

A permanent fix will come with the next release. Since Matt has found the solution for the issue you discovered, there is no need to change the length of the description!

Matthew · 2018-02-08 16:51:13

Thanks, guys! Sorry if my post above was not entirely clear.

Community @ The Turning Gate

#1 2018-02-01 02:47:42

Wrong album thumbnail size on mobile phone

#2 2018-02-01 03:29:57

Re: Wrong album thumbnail size on mobile phone

#3 2018-02-02 00:09:44

Re: Wrong album thumbnail size on mobile phone

#4 2018-02-02 00:58:32

Re: Wrong album thumbnail size on mobile phone

#5 2018-02-02 09:06:30

Re: Wrong album thumbnail size on mobile phone

#6 2018-02-03 07:58:40

Re: Wrong album thumbnail size on mobile phone

#7 2018-02-03 08:08:44

Re: Wrong album thumbnail size on mobile phone

#8 2018-02-03 08:40:36

Re: Wrong album thumbnail size on mobile phone

#9 2018-02-03 09:38:28

Re: Wrong album thumbnail size on mobile phone

#10 2018-02-03 09:41:25

Re: Wrong album thumbnail size on mobile phone

#11 2018-02-03 09:41:35

Re: Wrong album thumbnail size on mobile phone

#12 2018-02-03 16:42:34

Re: Wrong album thumbnail size on mobile phone

#13 2018-02-04 01:27:55

Re: Wrong album thumbnail size on mobile phone

#14 2018-02-06 07:16:27

Re: Wrong album thumbnail size on mobile phone

#15 2018-02-06 08:17:07

Re: Wrong album thumbnail size on mobile phone

#16 2018-02-07 09:46:44

Re: Wrong album thumbnail size on mobile phone

#17 2018-02-07 10:26:04

Re: Wrong album thumbnail size on mobile phone

#18 2018-02-07 10:49:39

Re: Wrong album thumbnail size on mobile phone

#19 2018-02-07 11:12:22

Re: Wrong album thumbnail size on mobile phone

#20 2018-02-07 18:48:47

Re: Wrong album thumbnail size on mobile phone

#21 2018-02-08 00:45:28

Re: Wrong album thumbnail size on mobile phone

#22 2018-02-08 01:05:06

Re: Wrong album thumbnail size on mobile phone

#23 2018-02-08 02:26:26

Re: Wrong album thumbnail size on mobile phone

#24 2018-02-08 16:51:13

Re: Wrong album thumbnail size on mobile phone

Board footer