Pangolin Vegas Full Screen Slide SHow - Captions position

alfred · 2017-08-02 20:55:33

Have converted the Full Screen Slideshow from Okapi to Pangolin and am almost there. What I can't get sorted is the position of the Caption display for the individual slides.

In Okapi the position used to be at the bottom of the slides (where I want it to be) but with the Pangolin implementation it is somewhere in the uper right corner. Example is here: http://fotowarkstee.de/ (don't freak out about the colour, just for me to identify the elements).

When checking with the browsers inspector, I find the element and can move it to the left and right, so have understood that, but have no idea how to apply "that little bit of CSS" as Rod would say to move it to the bottom. Any help appreciated.

THis is how it used to be in the Okapi version: http://fotowarkstee.de/images/slideshow-okapi-small.png

Alfred

Last edited by alfred (2017-08-02 21:00:08)

Rainer Goergen · 2017-08-02 21:20:48

Go to Designer - Album - Album Settings - Photo Presentation - Captions - Text-align - and then - center -

Rainer

alfred · 2017-08-02 21:26:22

Thanks, Rainer had seen that before, but that does not move the position of the caption to the bottom of the photo as it used to be in Okapi (see my link to the example screenshot).

Alfred

rod barbee · 2017-08-02 23:16:30

that's strange. Have you tried clearing template cache?

did you recently update to the 1.2.2 release? Did you upload the latest Theater?

alfred · 2017-08-03 06:25:30

Rod, I am in fact using release 1.2.3, which I understand is the latest release. I have just deleted and uploaded Theater again - problem remains. And yes, template cache cleared and Browser history deleted as well. I have (for test purposeses) turned the slide controls on and they appear, bearly visible, underneath the Caption box.

Any other suggestions what I could try (other than switching Captions off)? Would you (or anyone else) have an example somwhere using the latest Theater release that shows in regard to Captions how it is supoposed to look like?

Thanks, Alfred

rod barbee · 2017-08-03 06:52:35

sure: http://pangolin.barbeephoto.com/galleri … lide-show/

notice that the caption is in the upper part of the slide show. I think this is normal.

You're inserting this album into the Home page, right? Is the page template for the home page configured for a full screen slide show?
http://backlight.theturninggate.net/doc … ull-screen

alfred · 2017-08-03 07:48:59

Thanks Rod, that removes my uncertainty: Your example looks virtually like mine. So I need to tweak the Caption display and live with the fact that it is located at the the top and not at the bottom (where it was before using the Okapi implementation).

I am sure (as much as one can be who uses Software) that I had configured the page template correctly, but will check again tonight.

Alfred

Last edited by alfred (2017-08-03 07:50:43)

SunFoxNC · 2017-08-04 12:10:04

Here is the PHPlugins and custom CSS code I used to move the captions to at least a reasonable approximation of bottom and centred for desktop and my iPhone 6 Plus for the Vegas full-screen display that I've just updated to Pangolin on my site (everything else is Okapi so please bear with me...I'm fiddling with this whilst on holiday).

This code also uses a variation on code suggested by Matthew and Rod to select the appropriate sized masthead image in the top-pallet based on what device/orientation is in play.

You can see this live at:

http://www.redvixen-studios.com/

Feel free to adapt it to your needs!

P.S. Only the pictures of the jets have the captions...the other pictures in that gallery are on my RAID-5 tower three hours from here!

====================================

PHPlugins code snippet:

function ttg_pallet_top_title( $style, $path ) {
echo '

';
return false;
} // END /**/

Custom CSS:

.page__pallet__top > .content > ul > li {
margin: 0;
height: 48px;
}

/*logo as background image*/

li.top-pallet-logo a {
display: block;
width: 100%;
height: 100%;
}

/* iPhone6 Plus - Portrait*/
@media only screen
and (min-device-width: 350px)
and (max-device-width: 736px)
and (orientation: portrait)
{
.top-pallet-logo
{
   background-image: url("/backlight/designer/?c=page&a=image&p1=9");
   background-repeat: no-repeat;
   width: 270px;
   height: 48px;
   float: left;
}

#vegas_caption
{
   position:absolute;
   width:350px;
   height:50px;
   margin-left:-175px;
   color: #fff;
   top: 450px;
   bottom: 0px;
   left:50%;
}
}

/* iPhone6 Plus - Landscape */
@media only screen
and (min-device-width: 350px)
and (max-device-width: 736px)
and (orientation: landscape)
{
.top-pallet-logo
{
   background-image: url("/backlight/designer/?c=page&a=image&p1=8");
   background-repeat: no-repeat;
   width: 575px;
   height: 48px;
   float: left;
}

#vegas_caption
{
   position:absolute;
   width:600px;
   height:50px;
   margin-left:-300px;
   color: #fff;
   top: 225px;
   bottom: 0px;
   left:50%;
}
}

/* Desktop */
@media only screen
and (min-device-width: 737px)
{
.top-pallet-logo
{
   background-image: url("/backlight/designer/?c=page&a=image&p1=7");
   background-repeat: no-repeat;
   width: 1200px;
   height: 48px;
   float: left;
}

#vegas_caption
{
   position:absolute;
   width:600px;
   height:50px;
   margin-left:-300px;
   color: #fff;
   top: 750px;
   left:50%;
}
}

Last edited by SunFoxNC (2017-08-04 12:11:45)

alfred · 2017-08-04 19:35:03

Thanks, SunFoxNC for sharing your solution, I think I got the idea and have played with it.

Not sure though, that this is a solution for me. I am not an experienced programmer and it looks to me as if I would need to check for a variety of screen resolutions (number of pixels) in order to position the Caption properly at the bottom for all screen situations. I might just live with the Caption at the top, even if I think it should be at the bottom....

But again, thanks for sharing your thoughts, I have learned another bit of CSS :-).

Cheers Alfred

Edit: I must openly admit, I am not really sure what I am doing here (trial and error is the means I am using), but this works for me:

#vegas_caption {
background-color: rgba(255,255,255,.4);
color: #000000;
display: none;
font-size: 1.0em;
line-height: 1.5em;
margin: 0px;
padding: 6px 0px;
position: fixed;
bottom: 20px;
width: 2561px;
max-width: 100%;
height: 35px;
text-align: center;
font-weight: bold;
}

http://fotowarkstee.de/index.php

My simple thinking was, that as opposed to work from the top, which I believe is problematic due to changing pixel numbers for varying displays, maybe workling from the bottom instead could do the trick ...

Last edited by alfred (2017-08-04 20:36:38)

Community @ The Turning Gate

#1 2017-08-02 20:55:33

Pangolin Vegas Full Screen Slide SHow - Captions position

#2 2017-08-02 21:20:48

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#3 2017-08-02 21:26:22

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#4 2017-08-02 23:16:30

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#5 2017-08-03 06:25:30

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#6 2017-08-03 06:52:35

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#7 2017-08-03 07:48:59

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#8 2017-08-04 12:10:04

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

#9 2017-08-04 19:35:03

Re: Pangolin Vegas Full Screen Slide SHow - Captions position

Board footer