Captions Cutting Off Bottoms of Photos in Slideshow

charking · 2019-01-26 08:45:14

I'm using the caption "{CellNumber} of {NumImages}" in the slideshow. Larger photographs, especially vertical ones, are having the bottoms cut off as a result. If I remove the caption and reload the photographs into the album, the problem disappears (also, of course, so do the captions ). See http://charleskinghorn.com/bl2test/gall … rid-spain/.

Last edited by charking (2019-01-26 08:45:57)

rod barbee · 2019-01-26 10:01:40

It seems to be the font size used for the caption. It's pushing up the caption area so that it covers the bottom of vertical images.

On your site, that font-size is set to 1.25rem (20px)

On my test site, it's set to .75rem (12px)

I have no idea why there's a difference, there's no setting I can see in the in the album template to control the caption font-size.

Are you using the latest version of Backlight?

charking · 2019-01-26 10:22:21

rod barbee wrote:

It seems to be the font size used for the caption. It's pushing up the caption area so that it covers the bottom of vertical images.
On your site, that font-size is set to 1.25rem (20px)
On my test site, it's set to .75rem (12px)
I have no idea why there's a difference, there's no setting I can see in the in the album template to control the caption font-size.
Are you using the latest version of Backlight?

The solution to one problem causes another. See http://community.theturninggate.net/vie … 445#p57445.

I am not sure, but my thinking is that the Adobe font that I am using for the text in my website is smaller than normal at 16px. That means that any text at .75rem is too small when displayed on the screen. This issue affected both the font size in the descriptive grid thumbnail entries and in the captions. I modified the code for both to get the size of text I wanted. Hence the 1.25rem for captions. I will have to play with it to see if I can get a balance where the caption is still readable without squinting; otherwise it goes.

It would seem to me that it might be a good idea to allow the user to set their own caption and thumbnail grid description font sizes instead of depending on a fixed fraction of the rem value.

charking · 2019-01-27 03:41:35

I have reverted to the 0.75rem font sizing for the caption "{CellNumber} of {NumImages}". To my mind this font sizing is way too small in my situation. However, more importantly, even this is cutting off the bottoms of some of my photographs. This can be seen in the letter g in my copyright in the lower left hand corner of each photograph. Any photograph which is attached to the black bar across the top of the slideshow screen (no white spacing between the photograph and the black bar) is truncated at the bottom. The long side of each photograph is 960 pixels.

I also had to play with the font sizing for the gallery descriptions in the descriptive thumbnail grid and the copyright statement at the bottom of each screen. Both were too small and had to be enlarged. So far I have seen no ill effects as a result of increasing the rem values in these two situations. I can see some value in allowing the user to define these values.

A secondary issue: I am being logged off Backlight 2 unexpectedly and for no apparent reason.

rod barbee · 2019-01-27 04:15:33

When logged in to Backlight, it will time out after a certain time of inactivity

rod barbee · 2019-01-27 04:44:46

charking wrote:

I have reverted to the 0.75rem font sizing for the caption "{CellNumber} of {NumImages}". To my mind this font sizing is way too small in my situation. However, more importantly, even this is cutting off the bottoms of some of my photographs. This can be seen in the letter g in my copyright in the lower left hand corner of each photograph. Any photograph which is attached to the black bar across the top of the slideshow screen (no white spacing between the photograph and the black bar) is truncated at the bottom. The long side of each photograph is 960 pixels.
I also had to play with the font sizing for the gallery descriptions in the descriptive thumbnail grid and the copyright statement at the bottom of each screen. Both were too small and had to be enlarged. So far I have seen no ill effects as a result of increasing the rem values in these two situations. I can see some value in allowing the user to define these values.

Just curious, but where are you making these changes? I don't see anything in your custom css that would affect these things.

charking · 2019-01-27 05:18:34

rod barbee wrote:

charking wrote:
I have reverted to the 0.75rem font sizing for the caption "{CellNumber} of {NumImages}". To my mind this font sizing is way too small in my situation. However, more importantly, even this is cutting off the bottoms of some of my photographs. This can be seen in the letter g in my copyright in the lower left hand corner of each photograph. Any photograph which is attached to the black bar across the top of the slideshow screen (no white spacing between the photograph and the black bar) is truncated at the bottom. The long side of each photograph is 960 pixels.
I also had to play with the font sizing for the gallery descriptions in the descriptive thumbnail grid and the copyright statement at the bottom of each screen. Both were too small and had to be enlarged. So far I have seen no ill effects as a result of increasing the rem values in these two situations. I can see some value in allowing the user to define these values.
Just curious, but where are you making these changes? I don't see anything in your custom css that would affect these things.

I have modified the font-size rem values in the following code:

figcaption php: to resize the fonts in the gallery descriptions in the descriptive thumbnail grid
fancybox.php: to affect the caption font size, but now reverted to the original 0.75rem
pallet_top_bottom.php: to resize the font for the copyright message at the bottom of each screen

The problem, of course, is that I will have to remake these changes with any upgrade to Backlight 2 which affects the changed code. Although I have spent many years programming, it has all been on the mainframe, not on PCs. I can make my way around the code in Backlight 2 sufficiently well to make these small changes; but I don't have enough experience to set up the necessary custom code from scratch.

rod barbee · 2019-01-27 05:24:51

those kind of changes can and should be made with custom css, that way you don’t have to muck with the code.

charking · 2019-01-27 05:42:45

rod barbee wrote:

those kind of changes can and should be made with custom css, that way you don’t have to muck with the code.

Understood, but until I learn how to do the necessary custom code they will have to stay. I worked with companies which had done so much custom code that they couldn't upgrade to a new version of their software without a lot of work; some didn't even try to upgrade. In those cases they had modified the actual code from the supplier. They had no choice; the ability to write separate custom override routines was not available.

What about the bottoms of my photographs being cut off?

Last edited by charking (2019-01-27 05:50:05)

rod barbee · 2019-01-27 06:07:59

I don’t know about the photos being cut off. I couldn’t see that happening on my monitor

rod barbee · 2019-01-27 06:11:05

It’s pretty easy to do the custom code. Just copy the existing rule (using the browser inspector to find it), drop it in your custom css file and make the necessary change.

charking · 2019-01-27 06:24:23

rod barbee wrote:

I don’t know about the photos being cut off. I couldn’t see that happening on my monitor

You couldn't see the lower part of the "g" (the hook) being cut off? It's on my test version http://charleskinghorn.com/bl2test/galleries/. The worst case is 6 of 21. It's happening on all three of my browsers, Opera, Chrome, and Edge.

charking · 2019-01-27 06:27:07

rod barbee wrote:

It’s pretty easy to do the custom code. Just copy the existing rule (using the browser inspector to find it), drop it in your custom css file and make the necessary change.

Thanks, Rod. I'll give it a try. The same custom.css file that already exists?

rod barbee · 2019-01-27 07:10:12

As Daniel mentioned elsewhere, you have two custom css files bring loaded. You only really need the one.
(Or maybe it’s the same one being loaded twice?)
I’m guessing that you’re using phplugins to bring in one of them. You don’t need to do that so I’d suggest removing that code from your phplugins file, or, if you’re not using phplugins for anything else, just disable phplugins in the template.

But to answer your question, yes, just add the css to your existing custom css file.

charking · 2019-01-27 08:18:57

rod barbee wrote:

As Daniel mentioned elsewhere, you have two custom css files bring loaded. You only really need the one.
(Or maybe it’s the same one being loaded twice?)
I’m guessing that you’re using phplugins to bring in one of them. You don’t need to do that so I’d suggest removing that code from your phplugins file, or, if you’re not using phplugins for anything else, just disable phplugins in the template.
But to answer your question, yes, just add the css to your existing custom css file.

There is actually only one occurrence of custom.css in my code. Originally, when I started switching over to the Pangolin modules by rebuilding everything back in early December and introduced an Adobe typekit, I executed custom.css before and after the reference to the Adobe typkit because I thought it might be the solution to a problem I was having at the time. Actually at that point I had two versions of custom.css, custom and custom2 which ended up containing the same code. I deleted custom2.css and the first reference, the one before the Adobe typekit line; but it keeps showing up when I execute the code.

My code on the server:
function head() {
echo'
<link rel="stylesheet" type="text/css" href="https://use.typekit.net/mxy6glm.css">
<link rel="stylesheet" href="/bl2test/backlight/custom/css/custom.css" />
';
}

The code on execution:
<link rel="stylesheet" href="/bl2test/backlight/custom/css/custom.css" />
<link rel="stylesheet" type="text/css" href="https://use.typekit.net/mxy6glm.css">
<link rel="stylesheet" href="/bl2test/backlight/custom/css/custom.css" />

I don't know why the custom.css line appears before the Adobe one when I execute the code. It seems to be a ghost from the past.

rod barbee · 2019-01-27 09:28:41

You’re probably also adding the css file in the page template under Advanced Setup > Custom Stylesheet.

The only reason to add your css after the Adobe typekit css is if something in Adobe would negate something in your css.

rod barbee · 2019-01-27 09:52:41

charking wrote:

rod barbee wrote:
I don’t know about the photos being cut off. I couldn’t see that happening on my monitor
You couldn't see the lower part of the "g" (the hook) being cut off? It's on my test version http://charleskinghorn.com/bl2test/galleries/. The worst case is 6 of 21. It's happening on all three of my browsers, Opera, Chrome, and Edge.

I see it now. It was so slight that I missed it the first time.
This doesn't happen in my albums.

It's hard to tell why this is happening because it could be a result of changes you've made directly to the code.

If the changes were made in custom css then it would be easier to pinpoint what's causing this to happen. As it is, I really have no way of telling.

charking · 2019-01-27 10:01:49

rod barbee wrote:

It's hard to tell why this is happening because it could be a result of changes you've made directly to the code.
If the changes were made in custom css then it would be easier to pinpoint what's causing this to happen. As it is, I really have no way of telling.

Understood. Thanks, Rod, for all your help on this. I'm going to remove the caption until I can write custom code for those changes. As to the duplication of the execution of custom.css, you are probably right. I've just been staring at the screen too long to check it out now; it will have to be tomorrow morning.

charking · 2019-01-29 02:20:08

rod barbee wrote:

charking wrote:
rod barbee wrote:
I don’t know about the photos being cut off. I couldn’t see that happening on my monitor
You couldn't see the lower part of the "g" (the hook) being cut off? It's on my test version http://charleskinghorn.com/bl2test/galleries/. The worst case is 6 of 21. It's happening on all three of my browsers, Opera, Chrome, and Edge.
I see it now. It was so slight that I missed it the first time.
This doesn't happen in my albums.
It's hard to tell why this is happening because it could be a result of changes you've made directly to the code.
If the changes were made in custom css then it would be easier to pinpoint what's causing this to happen. As it is, I really have no way of telling.

I have put all my font size changes into custom.css and removed the duplicate execution of this code. I have also reinstalled the Backlight 2 modules so that my earlier changes directly to the code have been removed. Right now I have two albums published in http://charleskinghorn.com/bl2test/galleries/, one with the caption and one without. In both cases the bottoms of the tallest vertical photographs are being truncated.

rod barbee · 2019-01-29 02:27:23

after undoing the changes to the backlight code, did you clear template cache?

charking · 2019-01-29 03:27:27

rod barbee wrote:

after undoing the changes to the backlight code, did you clear template cache?

I just did. I also tried three different browsers, clearing the history in each. The truncation is still happening.

rod barbee · 2019-01-29 03:29:43

Then I'm stumped. I'm using 1200px images (yours are 960px) that get sized down to fit in the space. I get no truncation.

I think Matt will need to look into this.

Matthew · 2019-02-03 07:21:42

I had a peak at your galleries and I'm not seeing the issue.

charking · 2019-02-03 07:28:58

Matthew wrote:

I had a peak at your galleries and I'm not seeing the issue.

The problem appears in my test region where I'm implementing Backlight 2. Any photograph which contacts the black bar at the top of the screen; the hook in the "g" of my name is being cut off: http://charleskinghorn.com/bl2test/galleries/.

Matthew · 2019-02-03 08:05:17

Okay, I think there's a numbers mismatch between the size of captions and the image area, since the recent Fancybox update. I'll look into it.

Community @ The Turning Gate

#1 2019-01-26 08:45:14

Captions Cutting Off Bottoms of Photos in Slideshow

#2 2019-01-26 10:01:40

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#3 2019-01-26 10:22:21

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#4 2019-01-27 03:41:35

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#5 2019-01-27 04:15:33

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#6 2019-01-27 04:44:46

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#7 2019-01-27 05:18:34

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#8 2019-01-27 05:24:51

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#9 2019-01-27 05:42:45

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#10 2019-01-27 06:07:59

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#11 2019-01-27 06:11:05

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#12 2019-01-27 06:24:23

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#13 2019-01-27 06:27:07

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#14 2019-01-27 07:10:12

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#15 2019-01-27 08:18:57

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#16 2019-01-27 09:28:41

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#17 2019-01-27 09:52:41

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#18 2019-01-27 10:01:49

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#19 2019-01-29 02:20:08

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#20 2019-01-29 02:27:23

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#21 2019-01-29 03:27:27

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#22 2019-01-29 03:29:43

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#23 2019-02-03 07:21:42

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#24 2019-02-03 07:28:58

Re: Captions Cutting Off Bottoms of Photos in Slideshow

#25 2019-02-03 08:05:17

Re: Captions Cutting Off Bottoms of Photos in Slideshow

Board footer