Size of thumbnails in album set is wrong

Markus · 2018-05-22 21:31:06

Hi,
because of my HTTPS problem I decided to rebuild the site completely with pangolin https://pangolin.der-canonier.de/galleries/. But I want to rebuild my album set (and the album) from http://www.der-canonier.de/galleries/ and http://www.der-canonier.de/galleries/03-landschaft/.

Therefore I created an album set "Top-Level-Galerie" and an "Album Set 300x450" and selected them in Lightroom.

For the Thumbnail Grid I used the Classic Style and as Thumbnail Max-Width 280px .
Unfortunately I can't specify a height like in Backlight 1.1.1 (I had 420px).
Also with the iconic style I can only specify the height of 280px.

But now when I look with the Inspector, the thumbnail size is 389x389px at "Top-Level-Galerie" and 385x192px at "Album Set 300x450".

What am I doing wrong? Why are the specifications not taken over from the templates?

Where can I set the height of the thumbnails? Or do I have to do this in the custom.css? Then the question arises, how can I do that?

I would be glad about help!

Thanks
Markus

rod barbee · 2018-05-22 21:49:46

The actual thumbnail size comes from the albums. So first make sure the albums are creating thumbnails sized for your needs

Markus · 2018-05-22 22:13:54

rod barbee wrote:

The actual thumbnail size comes from the albums. So first make sure the albums are creating thumbnails sized for your needs

Ah, okay. Thank you very much. For the thumbnails I created a special album "Custom_Thumbnails", as Matt explained for CE4. I can also select them in Lightroom.

There I set the size of the thumbnails to 280*420 px under Image Renditions.

But still the size is not implemented correctly

Daniel Leu · 2018-05-23 01:10:05

Markus wrote:

rod barbee wrote:
The actual thumbnail size comes from the albums. So first make sure the albums are creating thumbnails sized for your needs
Ah, okay. Thank you very much. For the thumbnails I created a special album "Custom_Thumbnails", as Matt explained for CE4. I can also select them in Lightroom.
There I set the size of the thumbnails to 280*420 px under Image Renditions.
But still the size is not implemented correctly

You don't have by chance "Push metadata without updating existing photos" selected in Lr Publisher Settings?

Markus · 2018-05-23 07:40:27

Daniel Leu wrote:

You don't have by chance "Push metadata without updating existing photos" selected in Lr Publisher Settings?

Yes, I did. I still had that option. I took all the hooks out now, I also uploaded everything from Lightroom again. And cleared Template Cache.
But it hasn't changed. The thumbnails are still smaller than the 280x420px.

No matter what I do, nothing changes

rod barbee wrote:

The actual thumbnail size comes from the albums. So first make sure the albums are creating thumbnails sized for your needs

even with nested album sets?

What a mess! In my current page with Okapi everything worked out so well. The thumbnails in the album Custom_Thumbnails have exactly the 280x420 px, as it should be.

In Pangolin in the hidden album the thumbnails are only 144x216px.

In the album set then however 385x192px

Very confusing.

rod barbee · 2018-05-23 09:05:42

Markus wrote:

Daniel Leu wrote:
You don't have by chance "Push metadata without updating existing photos" selected in Lr Publisher Settings?
Yes, I did. I still had that option. I took all the hooks out now, I also uploaded everything from Lightroom again. And cleared Template Cache.
But it hasn't changed. The thumbnails are still smaller than the 280x420px.
No matter what I do, nothing changes

make sure that option is turned off. You can turn on the option that allows you to republish thumbnails only.

rod barbee · 2018-05-23 09:09:26

Markus wrote:

rod barbee wrote:
The actual thumbnail size comes from the albums. So first make sure the albums are creating thumbnails sized for your needs
even with nested album sets?

all thumbnails for album sets come from either the albums contained within the sets or custom thumbnails you've created.

rod barbee · 2018-05-23 09:13:45

the thumbnail from this page: https://pangolin.der-canonier.de/galleries/
is 420px high by 280px wide and is source from: https://pangolin.der-canonier.de/galler … l_9540.jpg

if you need it bigger, then you need to change the thumbnail sizes in the album template that controls the 'test' album and republish the thumbnails.

Markus · 2018-05-23 19:56:59

rod barbee wrote:

the thumbnail from this page: https://pangolin.der-canonier.de/galleries/
is 420px high by 280px wide and is source from: https://pangolin.der-canonier.de/galler … l_9540.jpg

Thanks Rod,

the Inspector shows me the size 420x280 px for the thumbnail in the code, but when I click on the picture I get a size of 389x389 px for div.thumbnail-background

I still don't understand why this isn't working. the custom_thumbnails, which I want to use for the AlbumSets and Album, I created as Matt described it here.

In my production page http://www.der-canonier.de/galleries/ the thumbnails from the album "custom-thumbnails" are used in galleries/ as well as in the album sets and also displayed correctly with the size 420x280 px.

And in Lightroom I can also select these custom thumbnails. On the Pangolin test page in Lightroom I can only select the thumbnails from the album "Test". The alternatives from custom_thumbnails are not displayed in Lightroom.

I guess I'll have to solve that problem first. It's just a question of how

rod barbee · 2018-05-23 20:16:08

It looks like the aspect ratios are different
On this page: http://www.der-canonier.de/galleries/ the ratio of probably equivalent to 280 wide x 420 high.
While on this page: https://pangolin.der-canonier.de/galleries/ it looks to be 1:1

Have you created a custom_thumbnails album in the test site?

Markus · 2018-05-23 20:29:24

rod barbee wrote:

It looks like the aspect ratios are different
On this page: http://www.der-canonier.de/galleries/ the ratio of probably equivalent to 280 wide x 420 high.
While on this page: https://pangolin.der-canonier.de/galleries/ it looks to be 1:1
Have you created a custom_thumbnails album in the test site?

Yes, indeed! In my test site I created a custom_thumbnails Album, and the ratio is 1:1. I didn't realize what it meant. In okapi I could still set the direct size.

I set it once to 280 and 420. Let's see if this works.

Then I just have to clarify why I can't select the custom thumbnails in Lightroom

Markus · 2018-05-24 02:21:10

ok, in my Top-Level-Gallery I changed the ratio. There was also a mistake.
But how must the ratio be, so that I get a thumbnail of 280x420px afterwards? (is actually a ratio of 1:1,5).

For ratio X I entered 280 and for ratio Y 420, but then I get a thumbnail of 389x583.

Even with 2:3 or 4:6 I can not get the result!

I have not hidden the folder CustomThumbnails once. Should have been there.

I have also set the thumbnails max-width to 280 px

Last edited by Markus (2018-05-24 02:43:50)

rod barbee · 2018-05-24 04:25:50

this page: https://pangolin.der-canonier.de/galleries/ is now showing large custom thumbnails (280 x 420). If you're not seeing this, then try clearing browser cache.

Markus · 2018-05-24 06:55:49

rod barbee wrote:

this page: https://pangolin.der-canonier.de/galleries/ is now showing large custom thumbnails (280 x 420). If you're not seeing this, then try clearing browser cache.

hm, very strange. I deleted the cache and looked at it in Safari, Firefox and Chrome. The image is displayed in code or when I display the image with 280x420px, but the thumbnail with 389x583px when I go with the inspector on the thumbnails.

That's not possible.

BTW: if I knew how to upload an image, I could also show a screenshot of how I look like.
But I haven't managed it yet. I always fail because of the storage space for the PNG

Daniel Leu · 2018-05-24 06:57:51

Markus wrote:

BTW: if I knew how to upload an image, I could also show a screenshot of how I look like.
But I haven't managed it yet. I always fail because of the storage space for the PNG

You would upload the image to a location on your web server such as /test/my_image.png and then you link to it as shown here http://community.theturninggate.net/help.php#img

Daniel Leu · 2018-05-24 07:01:57

Markus wrote:

rod barbee wrote:
this page: https://pangolin.der-canonier.de/galleries/ is now showing large custom thumbnails (280 x 420). If you're not seeing this, then try clearing browser cache.
hm, very strange. I deleted the cache and looked at it in Safari, Firefox and Chrome. The image is displayed in code or when I display the image with 280x420px, but the thumbnail with 389x583px when I go with the inspector on the thumbnails.
That's not possible.

I can confirm that the thumbnail image is indeed 280x420 and it is shown as such in the album grid.

Markus · 2018-05-24 07:51:41

Thanks Daniel,

this is what I see:

Thumbnails

1. for div.thumbnail-background a size of 389x583 px.
2. below then the thumbnail from the album custom_thumbnail in the right size

when I call up the image via the link then the correct size of 280x420 px is also displayed

This is really getting crazy.
Why are the thumbnails displayed in 389x583px?

Daniel Leu · 2018-05-24 08:02:44

Ahh...... NOW I see what you mean and yeah, I get the same

This is due to the size of the image grid. It is bigger than the image. Due to a CSS setting, the image is enlarged:

background-size: cover;

~~So you have to adjust the image grid to get the desired size.~~

I'm changing my response: I think it would be easier/better to make the thumbnails a bit bigger so that they properly fit the image grid.

Viel Spass!

rod barbee · 2018-05-24 08:15:59

And if you're only going to have the two columns, try reducing the gallery max-width setting.

Markus · 2018-05-24 19:43:00

Daniel Leu wrote:

Viel Spass!

Sehr witzig

Daniel Leu wrote:

Ahh...... NOW I see what you mean and yeah, I get the same

In Germany we say: "a picture says more than 1000 words".
Very good that we're talking about the same thing now.

Daniel Leu wrote:

Due to a CSS setting, the image is enlarged:
background-size: cover;
~~So you have to adjust the image grid to get the desired size.~~
I'm changing my response: I think it would be easier/better to make the thumbnails a bit bigger so that they properly fit the image grid.

I found the area with the Firefox web inspector. So you think I could resize the cover in CSS? Then I just have to figure out what the code has to look like.
Or is there another option besides "cover"?

The size of the thumbnails is already borderline. I don't really want to make them any bigger.

In okapi it was much easier, if not everything deceives me, I have set it with this.
Okapi-Settings

@Matt and @Ben: would it be possible to reinstall this option during an update?

Daniel Leu · 2018-05-24 23:52:09

You can add following custom.css code:

.albums figure {
    max-width: 280px;
}

Markus · 2018-05-25 06:15:24

Cool, thanks Daniel! This has worked very well

Which browser do you use to find the right places? I'm still having so much trouble with that

Daniel Leu · 2018-05-25 06:48:37

Markus wrote:

Cool, thanks Daniel! This has worked very well
Which browser do you use to find the right places? I'm still having so much trouble with that

Happy that it works for you now! It is not only finding the right place, but have an understanding how Backlight accomplishes certain things and be familiar with CSS. It's a process and I'm still learning every day

I use mostly Google Chrome and it's developer tools.

Markus · 2018-05-28 08:11:54

Daniel Leu wrote:

It is not only finding the right place, but have an understanding how Backlight accomplishes certain things and be familiar with CSS.

But it starts with finding

That's why I need your help to find the right place because of the thumbnails here https://pangolin.der-canonier.de/galleries/

When hovering with the mouse I have already found and adjusted the effects for the thumbnails as well as for the figure caption.

But I would like the hover effect to be applied to both the thumbnails and the figure caption at the same time. No matter if I touch the thumbnails or the figure caption.
Currently only one or the other is happening.

Is that even possible?

With the Inspector I had identified ".album's figure a :hover" or "a:hover, a:focus :hover" as a way to completely address the desired area.

Unfortunately, everything doesn't work.

Here is my current excerpt from the Custom-CSS

/* --------------------------------------------------------
/* | THUMBNAILS im Album Set.                             |
/* --------------------------------------------------------

/* ----- maximale Breite der Thumbnails ----- */
/* ===========================================*/
.albums figure {
    max-width: 280px;
}


/* ----- Schatten um Album Set Bilder (Classic-Style) ----- */
/* =========================================================*/
.albums figure {
    background-color: #ffffff;
    border: 0 solid rgb(188, 188, 188);
    border-width: 1px;
    border-radius: 9px;
    box-shadow: 5px 5px 10px rgba( 0, 0, 0, 0.4 );
    box-sizing: border-box;
    float: center;
    margin: 0 10px 20px;
    overflow: hidden;
    position: relative;
    width: 280px;
    min-height: 230px;
}


/* ----- Hover Thumbnail (Classic-Style) ----- */
/* ===============================================*/

.thumbnail :hover {
	color: #f1f1f1;
	border: 5px solid;
}


/* ----- Hover Figcaption (Classic-Style) ----- */
/* ===============================================*/

.albums figcaption {
	border-top: none;
	}

.albums figure :hover { 
    background-color: #f1f1f1;
	}


figure:hover .album-title{
	color: #848484;
	}

figure:hover .album-description{
	color: #848484;
	}

It'd be great if this worked.

Greetings, Markus

rod barbee · 2018-05-28 08:46:32

what affect are you going for that applies to both the thumbnail and the figcaption?

Community @ The Turning Gate

#1 2018-05-22 21:31:06

Size of thumbnails in album set is wrong

#2 2018-05-22 21:49:46

Re: Size of thumbnails in album set is wrong

#3 2018-05-22 22:13:54

Re: Size of thumbnails in album set is wrong

#4 2018-05-23 01:10:05

Re: Size of thumbnails in album set is wrong

#5 2018-05-23 07:40:27

Re: Size of thumbnails in album set is wrong

#6 2018-05-23 09:05:42

Re: Size of thumbnails in album set is wrong

#7 2018-05-23 09:09:26

Re: Size of thumbnails in album set is wrong

#8 2018-05-23 09:13:45

Re: Size of thumbnails in album set is wrong

#9 2018-05-23 19:56:59

Re: Size of thumbnails in album set is wrong

#10 2018-05-23 20:16:08

Re: Size of thumbnails in album set is wrong

#11 2018-05-23 20:29:24

Re: Size of thumbnails in album set is wrong

#12 2018-05-24 02:21:10

Re: Size of thumbnails in album set is wrong

#13 2018-05-24 04:25:50

Re: Size of thumbnails in album set is wrong

#14 2018-05-24 06:55:49

Re: Size of thumbnails in album set is wrong

#15 2018-05-24 06:57:51

Re: Size of thumbnails in album set is wrong

#16 2018-05-24 07:01:57

Re: Size of thumbnails in album set is wrong

#17 2018-05-24 07:51:41

Re: Size of thumbnails in album set is wrong

#18 2018-05-24 08:02:44

Re: Size of thumbnails in album set is wrong

#19 2018-05-24 08:15:59

Re: Size of thumbnails in album set is wrong

#20 2018-05-24 19:43:00

Re: Size of thumbnails in album set is wrong

#21 2018-05-24 23:52:09

Re: Size of thumbnails in album set is wrong

#22 2018-05-25 06:15:24

Re: Size of thumbnails in album set is wrong

#23 2018-05-25 06:48:37

Re: Size of thumbnails in album set is wrong

#24 2018-05-28 08:11:54

Re: Size of thumbnails in album set is wrong

#25 2018-05-28 08:46:32

Re: Size of thumbnails in album set is wrong

Board footer