Pangolin theater / image size

pideja · 2019-01-10 22:30:51

I have a short 6 image slide show running on a Pangolin-Theater page in Vegas Slideshow mode. How do I control the size of the images? In CSS, in the Backlight settings or by formatting my images smaller before creating the slide show in Lightroom?

rod barbee · 2019-01-10 22:35:02

Image Rendition size (republish)
And max-width (of the slide show) under Presentation

pideja · 2019-01-11 00:39:26

My images are vertical (portrait) at 600px x 800px.
In IMAGE RENDITION size I have 300px x 400px; in the max-width of the slide show Presentation is 920px (smallest size available).

Once settings changed, I republished. Now, I have no slide show at all!

rod barbee · 2019-01-11 00:42:10

Link?

pideja · 2019-01-11 00:43:41

https://lucnadeau.ca/en/gallery-theater/

rod barbee · 2019-01-11 00:44:08

After changing image sizes in Renditions, when you republish, make sure that the “Push metadata...” box is not checked in Publisher settings

pideja · 2019-01-11 00:45:56

French side (not altered) works fine https://lucnadeau.ca/fr/theater/

rod barbee · 2019-01-11 00:55:10

have you tried republishing? In Lightroom, could the album template chosen been changed?

rod barbee · 2019-01-11 01:05:30

it looks to me that the album is no longer being inserted into the page. Check the page settings

pideja · 2019-01-11 02:15:23

OK, slise show is back...I had to "insert album" that was unchecked for whatever reason.

But the images are still gigantic!

rod barbee · 2019-01-11 02:22:53

the images being used are
Check the album template for rendition size then republish the album, first making sure that in Publisher Settings, the "Push metadata without updating existing photos" check box is unchecked. Same with the Publish Thumbnails... box

just tried to look at the show, but your server appears to be down.

pideja · 2019-01-11 02:26:07

My host service is in a major maintenance process today. Makes very difficult for me to proceed so I'm shutting down until tomorrow.

rod barbee · 2019-01-11 02:40:18

it seems to me that image width needs to be at least the same as the show width, so if you have max-width set at 920px, then the images should be at least 920px wide.

I've not found a way with custom css to make the whole thing smaller, though I do have a recollection of us going through this whole exercise some time in the past. I don't recall if we ever figured it out. But you could try searching the forum; maybe I did find a way around it last time.

rod barbee · 2019-01-11 03:27:27

consider using Galleria. Set the aspect ratio to something like Aspect Ratio X=2 and Aspect Ratio Y=1

see: https://backlight-2-100.barbeephoto.com … -vertical/

pideja · 2019-01-11 03:57:17

I do recall discussing this topic with you one or two years ago. I did find some discussions that address the topic of a slide show, in the Backlight 1 section. There is a reference to either one of two CSS files and a php file. At the moment, the php is already enabled and I am trying the CSS files.

None of these two CSS files seems to do anything. Also, scrolling up or down (to see the whole image) causes the side vertical navigation to scroll in tandem with the image! This is strange.

Also, I do not have the galleria plugin. Is this an additional purchase?

P.S. Still having problems with my host server, so progress is very slow.

rod barbee · 2019-01-11 04:13:25

yes, Galleria is an additional purchase

any css from Backlight 1 may or may not work, depending on if it was originally an Okapi or Pangolin template

pideja · 2019-01-11 04:14:02

Currently trying out this CSS code suggested by Daniel:

/* slide show */
	.slug-photos .the__gallery > .content {
    background-color: #ffffff;
    box-shadow: none;
    box-sizing: border-box;
    text-align: center;
    width: 50%;
    max-width: 920px;
    
    }

It's for the previous version of Backlight and it did work.

rod barbee · 2019-01-11 04:21:54

that code will only work on a page with the slug of "photos". So remove .slug-photos from the selector.

pideja · 2019-01-11 04:25:12

This code seems to do something...

/* type content background area "Gallery/galerie" page */
.pages-template-identifier-theater .the__copy > .content, .pages-template-identifier-gallery-theater .the__copy > .content {
background-color : transparent;
}
.slug-photos .the__gallery {
box-shadow : 5px 10px 30px 10px #888888;
max-width : 450px;
}
#gallery.vegas-container {
max-height : 800px;
}

But, alas, it controls but the container, not the image itself.

pideja · 2019-01-11 04:31:04

I'm thinking: why not create a slide show in Lightroom, render it as a video (mpeg-4) and create a "gallery" page with the theatre module.
That way, I would have more control over size, fade rate and image dimension.

pideja · 2019-01-11 04:33:07

EUREKA!

Your suggestion of removing the .slug-photos from the selector did the trick!

Thanks, Rod, you did it again.

P.S. scrolling upward, a box appears beneath the image...any idea what it is?

Last edited by pideja (2019-01-11 04:35:11)

rod barbee · 2019-01-11 04:44:40

that box is the page copy area. your custom css is adding the box-shadow. starting on line 40

	/* gallery slide show page */
	
	 .pages-template-identifier-theater .the__copy>.content,
     .pages-template-identifier-gallery-theater .the__copy>.content {
		background-color:  rgb(208, 201, 184, 0.65);
		border-radius: 0;
		box-shadow:2px 2px 8px #000000;
		width: 100%;
		max-width: 600px;
		padding: 50px;
		font-size: 1.25rem;
		color: black;
	}

also remove the rule just above that one, otherwise you'll be left with a tan colored box.

rod barbee · 2019-01-11 04:45:44

pideja wrote:

EUREKA!

Thanks, Rod, you did it again.

well, Daniel's css had something to do with it

pideja · 2019-01-11 22:13:37

Indeed, many thanks to Daniel.

Servers back to normal, what a relief!

So, I finally got the slide show to work correctly, in part at least.
Here it is in the French section: https://lucnadeau.ca/fr/theater/ looks as I want it, but here on the English side: http://lucnadeau.ca/en/gallery-theater/.
Notice the size and position are different. But I'm using the same, identical CSS and PHP files.

UPDATE: found the discrepancy between the two sides. It was in LAYOUT>Max-width. One was at 1440 and the other at 1334. Both are now at 1334 and now display the slide show identically.

Last edited by pideja (2019-01-11 22:22:57)

Daniel Leu · 2019-01-12 02:03:34

pideja wrote:

UPDATE: found the discrepancy between the two sides. It was in LAYOUT>Max-width. One was at 1440 and the other at 1334. Both are now at 1334 and now display the slide show identically.

Which should be just another motivation to use a single backlight setup and the language feature of Backlight 2... Sorry Pierre, I couldn't resist.

Community @ The Turning Gate

#1 2019-01-10 22:30:51

Pangolin theater / image size

#2 2019-01-10 22:35:02

Re: Pangolin theater / image size

#3 2019-01-11 00:39:26

Re: Pangolin theater / image size

#4 2019-01-11 00:42:10

Re: Pangolin theater / image size

#5 2019-01-11 00:43:41

Re: Pangolin theater / image size

#6 2019-01-11 00:44:08

Re: Pangolin theater / image size

#7 2019-01-11 00:45:56

Re: Pangolin theater / image size

#8 2019-01-11 00:55:10

Re: Pangolin theater / image size

#9 2019-01-11 01:05:30

Re: Pangolin theater / image size

#10 2019-01-11 02:15:23

Re: Pangolin theater / image size

#11 2019-01-11 02:22:53

Re: Pangolin theater / image size

#12 2019-01-11 02:26:07

Re: Pangolin theater / image size

#13 2019-01-11 02:40:18

Re: Pangolin theater / image size

#14 2019-01-11 03:27:27

Re: Pangolin theater / image size

#15 2019-01-11 03:57:17

Re: Pangolin theater / image size

#16 2019-01-11 04:13:25

Re: Pangolin theater / image size

#17 2019-01-11 04:14:02

Re: Pangolin theater / image size

#18 2019-01-11 04:21:54

Re: Pangolin theater / image size

#19 2019-01-11 04:25:12

Re: Pangolin theater / image size

#20 2019-01-11 04:31:04

Re: Pangolin theater / image size

#21 2019-01-11 04:33:07

Re: Pangolin theater / image size

#22 2019-01-11 04:44:40

Re: Pangolin theater / image size

#23 2019-01-11 04:45:44

Re: Pangolin theater / image size

#24 2019-01-11 22:13:37

Re: Pangolin theater / image size

#25 2019-01-12 02:03:34

Re: Pangolin theater / image size

Board footer