A few more Pangolin migration questions

grover_c · 2018-06-12 05:30:37

(1)

It’s probably something I’m doing, but it seems that there is a new overall behaviour of a line break after an image. For example, in the past, if I have two images each 400 pixels wide they would appear beside each other, but now after first image there appears to be a break dropping the second image below. See the code below. The website link is: http://www.bretculp.com/purchase-prints/

This is also the case if I have an image and then some text. See here: http://www.bretculp.com/newsletters/

This was not the case pre-Pangolin.

—

(2)

Thumbnail Caption

The caption info doesn’t seem to be getting passed to the grid display in my Pangolin update.
What I’m getting is this: http://www.bretculp.com/gallery/110-col … o-gallery/
What I’m looking for is this kind of Caption under the thumbnail: http://www.bretculp.com/gallery/120-col … o-gallery/

—

(3)

I also don’t seem to be getting all of the icons in the Photo Presentation and the ones there seem very small. http://www.bretculp.com/gallery/110-col … o-gallery/

How do you disable the download button in the Photo Presentation?

—

(4)

In Pangolin Album Sets, is there a way to force the “Thumbnail Coverage” to “Contain” when using the “Iconic” Style as could be done previously? I'd like it to look like this: http://www.bretculp.com/gallery/

Any help would be much appreciated. Thanks.

Last edited by grover_c (2018-06-12 05:34:29)

rod barbee · 2018-06-12 05:46:57

1) Images are set to display: block;
try adding inline styling to make it display: inline-block;

<div style="text-align: center">
<img src="/images/purchase-prints/Bret-Culp_Photography-Gallery-Prints-1.jpg" width="475" height="356" alt="Bret Culp Gallery Prints at Leonardo Galleries Toronto 1" title="Bret Culp  Prints at Leonardo Galleries" style="display:inline-block;" />
<img src="/images/purchase-prints/Bret-Culp_Photography-Gallery-Prints-2.jpg" width="475" height="356" alt="Bret Culp Gallery Prints at Leonardo Galleries Toronto 2" title="Bret Culp Prints at Leonardo Galleries" style="display:inline-block;" />
</div>

Or give the images a custom class and apply display:inline-block; to the class

rod barbee · 2018-06-12 05:49:58

grover_c wrote:

(2)
Thumbnail Caption
The caption info doesn’t seem to be getting passed to the grid display in my Pangolin update.
What I’m getting is this: http://www.bretculp.com/gallery/110-col … o-gallery/
What I’m looking for is this kind of Caption under the thumbnail: http://www.bretculp.com/gallery/120-col … o-gallery/

The page source code shows no metadata. Try republishing the album. You can make this go faster by editing the Publisher settings (In Lightroom) and checking the "Push metadata ...." checkbox.

rod barbee · 2018-06-12 05:57:52

grover_c wrote:

(3)
I also don’t seem to be getting all of the icons in the Photo Presentation and the ones there seem very small. http://www.bretculp.com/gallery/110-col … o-gallery/
How do you disable the download button in the Photo Presentation?

which icons do you think are missing? As far as I can tell, all the icons that should be there, are there. If you're missing the map icon, make sure the image has gps metadata.

you should be able to control the size with custom css. This is the default css controlling those icons:

.fancybox-pallet ul li > a::after {
    color: #ff8000;
    color: #454545;
    font-size: 18px;
    line-height: 48px;
}

Disable the download icon in the album template: Photo Presentation > Downloads: Disabled

rod barbee · 2018-06-12 06:03:14

grover_c wrote:

(4)
In Pangolin Album Sets, is there a way to force the “Thumbnail Coverage” to “Contain” when using the “Iconic” Style as could be done previously? I'd like it to look like this: http://www.bretculp.com/gallery/

Any help would be much appreciated. Thanks.

The css controlling the iconic thumbnails is:

.albums .thumbnail-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

use:

.albums .thumbnail-background {
        background-size: contain;
}

but that seems to defeat the purpose of the iconic presentation.

grover_c · 2018-06-12 06:05:14

rod barbee wrote:

grover_c wrote:
(3)
I also don’t seem to be getting all of the icons in the Photo Presentation and the ones there seem very small. http://www.bretculp.com/gallery/110-col … o-gallery/
How do you disable the download button in the Photo Presentation?
which icons do you think are missing? As far as I can tell, all the icons that should be there, are there. If you're missing the map icon, make sure the image has gps metadata.
you should be able to control the size with custom css. This is the default css controlling those icons:
.fancybox-pallet ul li > a::after {
    color: #ff8000;
    color: #454545;
    font-size: 18px;
    line-height: 48px;
}
Disable the download icon in the album template: Photo Presentation > Downloads: Disabled

Thanks for all of your help, Ron!

As for the icons, I only see very small dots for "Close", "Start Slideshow", "Thumbnails", but "Image Share" appears as an actual icon. Is that what you're seeing/normal?

rod barbee · 2018-06-12 06:12:34

I see the dots now (was just looking for the share icons before). The problem comes from your custom css:

button, .button, input[type="button"], input[type="reset"], input[type="submit"] {
    padding: 4px 22px !important;

You'll need to be more specific with it so that it only effects what you want it to.
You can use body selectors to apply that css to only certain pages by slug (.slug-your-page-slug), page template, or album template.
Just look at the source code for the pages you want that css to effect. The classes are in the <body> tag.

Rod

grover_c · 2018-06-12 06:32:51

Thanks again, Ron. You're a life saver. I have two more, hopefully quick, questions.

(1)

I put the search code, below, into "Page Copy" at Backlight>Publisher>Top-level Galleries?Photography Gallery>Edit

It working fine prior to my upgrade but now all I see is the the "Search Photos" title with no search bar.

<h1>Search Photos</h1>
<div id="search">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Photo Search" value=""/>
<button type="submit" style="margin-top: 6px;"><i class="fa fa-search" ></i> Search</button>
</form>
<div class="top-galleries-examples"><em>(examples: fog, Wicklow, snow, pinhole, 2010)</em></div>
</div>

--

(2)

My website title, replaced with PHP script, was looking a bit different in terms of layout in Pangolin. Also my 1000px custom menu was not appearing as the full 1000px and the last item didn't have the rounded outside edge if previosuly had. Through the inspector I noticed a different between Pangolin and pre-Pangolin of "*, *::before, *::after { box-sizing: content-box}" Pre-Pangolin had it and things looked correct. Post didn't have it so I added it into my custom css. However, I think it's resulting in option styling problems in my upgraded site. Any thoughts on what I should really be doing here?

Thank you once more!
bret

rod barbee · 2018-06-12 07:41:23

it's Rod (with a d)

1) It's hidden because there's some new css that hides it (probably due to the search icon in the top-pallet)
See: http://community.theturninggate.net/vie … 790#p52790 for the work-around.

2) For the masthead, it's hard to tell without seeing both this version and the previous version
For the menu, it's at 1001px
Not sure about the box-sizing issue, but here's more on the box-sizing property: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

for what it's worth, the menu looks fine to me.

grover_c · 2018-06-12 08:00:27

Thanks, Rod!!! Sorry about that.

You can see the version without the "*, *::before, *::after { box-sizing: content-box}" on my blog, http://www.bretculp.com/bret-culp-photography-blog/ I had to disable it because it was causing many problems with formatting, including the search bar.

Is there a way to target the "*, *::before, *::after { box-sizing: content-box}" more specifically? to the masthead and menu?

I think I've taken care of most of my other problems because of your help.

rod barbee · 2018-06-12 08:43:52

the * is like a wild card, so using it in this case is applying the box sizing to everything's :before and :after psuedo-selectors.

So to target those items, you'd have to target the selectors for those items specifically rather than using the *

I think what you currently have on your main site looks better that what's on the blog.

grover_c · 2018-06-12 08:47:31

Yes, it looks correct on the main site. I'll see what I can do. Thanks.

rod barbee · 2018-06-12 09:05:43

looks like it might be the custom css for the blog, specifically the width of the anchor item in the nav list:

nav > div > ul > li > a, nav > div > ul > li > span {
    text-align: center !important;
    padding: 0 !important;
    display: block;
    border-right: 1px solid #dadada;
    border-left: 1px solid #eeeeee;
    width: 141px;
    ..........

grover_c · 2018-06-12 09:18:52

One more question for tonight.

Earlier you said to republish my gallery to get the "Caption" data. I had previously republished but didn't see the caption on my thumbnail page until I tried it one more time.

Now that gallery has the caption showing, http://www.bretculp.com/gallery/110-col … o-gallery/, but my other galleries do not, even though I've republished all photos. Also, the images have the metadata "Caption" info within them. I've tried republishing several times. Here is a link to one of the galleries that don't show the captions, http://www.bretculp.com/gallery/010-rec … o-gallery/

Any ideas?

grover_c · 2018-06-12 09:43:18

Note that I cleared the template and browser cache. If I switch back to my pre-Pangolin album template the "Caption" appears. When I go back to my Pangolin template they disappear, except for http://www.bretculp.com/gallery/110-col … o-gallery/. I'm very confused with this one.

Last edited by grover_c (2018-06-12 09:43:50)

Daniel Leu · 2018-06-12 09:55:26

grover_c wrote:

Note that I cleared the template and browser cache. If I switch back to my pre-Pangolin album template the "Caption" appears. When I go back to my Pangolin template they disappear, except for http://www.bretculp.com/gallery/110-col … o-gallery/. I'm very confused with this one.

What you see here is the image metadata:

		<ul class="image_metadata">
			<li>Pimoridial Soup Theory</li>
		</ul>

grover_c · 2018-06-12 09:57:54

I figured it out. I had to double click on each of the galleries to be published in Lightroom and then hit "edit" / save then republish. Republishing alone would not update the Backlight gallery even though the image had the metadata in it. Crazy!

Last edited by grover_c (2018-06-12 10:01:34)

Community @ The Turning Gate

#1 2018-06-12 05:30:37

A few more Pangolin migration questions

#2 2018-06-12 05:46:57

Re: A few more Pangolin migration questions

#3 2018-06-12 05:49:58

Re: A few more Pangolin migration questions

#4 2018-06-12 05:57:52

Re: A few more Pangolin migration questions

#5 2018-06-12 06:03:14

Re: A few more Pangolin migration questions

#6 2018-06-12 06:05:14

Re: A few more Pangolin migration questions

#7 2018-06-12 06:12:34

Re: A few more Pangolin migration questions

#8 2018-06-12 06:32:51

Re: A few more Pangolin migration questions

#9 2018-06-12 07:41:23

Re: A few more Pangolin migration questions

#10 2018-06-12 08:00:27

Re: A few more Pangolin migration questions

#11 2018-06-12 08:43:52

Re: A few more Pangolin migration questions

#12 2018-06-12 08:47:31

Re: A few more Pangolin migration questions

#13 2018-06-12 09:05:43

Re: A few more Pangolin migration questions

#14 2018-06-12 09:18:52

Re: A few more Pangolin migration questions

#15 2018-06-12 09:43:18

Re: A few more Pangolin migration questions

#16 2018-06-12 09:55:26

Re: A few more Pangolin migration questions

#17 2018-06-12 09:57:54

Re: A few more Pangolin migration questions

Board footer