Backlight Customization Questions

grover_c · 2016-12-11 12:24:13

Hello,

I am really enjoying Backlight so far. I’m in the process of porting over my custom coded website but I’ve encountered a few things I’m not sure how to overcome.

I would like to change the current share button on the large image presentation to the more customary curved arrow share icon, like the Photoswipe default. This is important as I think a many people understand that the arrow is for sharing but not the current "image" icon.

Is it possible for the “share” link to use this format #&gid=1&pid=3 instead of the single page link? I would love it if somebody clicking on the shared link would go right to the large image presentation page it was shared from, as Photoswipe does by default. Are there reasons why that isn’t a good idea or not implemented?

What is the best way to add a mailto: link to the large image presentation. I would like to be able to style it using css and have the subject be the title of the image. It will be an “Inquire About This Work” button. This is very important to how people interact with me for my business.

What is the best way to change the html content on my homepage only? I'd like to use a custom slideshow, etc. Note that I've already replaced the Masthead and footer using a custom PHP file.

I used Markdown in my Lightroom metadata to italicize my title, insert a line break, etc. It translated properly in the TTG 2016 HTML Gallery that uses Photoswipe but it doesn’t work in Backlight. Any ideas?

Is there a list of all of the css styles that can be changed using the custom.css file?

My apologies if any of this has been previously discussed.

Thanks in advance!

Last edited by grover_c (2016-12-11 13:36:48)

Matthew · 2016-12-11 15:33:49

This is the icon:

.pswp__button--share::after {
	content: "\f03e";
}

You can change the content value via custom CSS. Available icons are here; click the icon you want to get it's code ID.

grover_c wrote:

Is it possible for the “share” link to use this format #&gid=1&pid=3 instead of the single page link? ... Are there reasons why that isn’t a good idea or not implemented?

Because the page shared is then the gallery page, not the specific image. So let's say the representative image for the gallery is defined as #1, and the visitor shares image #5. When that share appears on Facebook, the image appearing with the link will be #1, not #5. By sharing the single-image page as we do, we ensure that the shared image is the image that appears on social media.

grover_c wrote:

What is the best way to add a mailto: link to the large image presentation. I would like to be able to style it using css and have the subject be the title of the image. It will be an “Inquire About This Work” button. This is very important to how people interact with me for my business.

The large image presentation is not editable by the user, beyond the options we have provided. If you would like to make a feature request, please do so in a separate thread, titled accordingly (i.e. "Feature Request: Do-a-thing") and with a detailed description of how you might envision the feature appearing/working. While we cannot implement every request we receive, Backlight is heavily feedback-driven and we do give all requests due consideration.

grover_c wrote:

What is the best way to change the html content on my homepage only? I'd like to use a custom slideshow, etc. Note that I've already replaced the Masthead and footer using a custom PHP file.

You can create a separate page template to be used only by the Home page if you'd like. You can also embed an image gallery, slideshow or album set into the page. This is all handled within Backlight's admin. For slideshow options, you might want to check out our Theater Add-on.

grover_c wrote:

I used Markdown in my Lightroom metadata to italicize my title, insert a line break, etc. It translated properly in the TTG 2016 HTML Gallery that uses Photoswipe but it doesn’t work in Backlight. Any ideas?

Text formatting is not currently supported for image captions. This may or may not be something we can add in the future.

grover_c wrote:

Is there a list of all of the css styles that can be changed using the custom.css file?

You can examine the page source to view the generated CSS. It's best to work with that file at hand as reference. Whatever changes you make, be sure to test them thoroughly, as it's entirely possible to break your site by making changes, or introducing syntax errors.

grover_c · 2016-12-20 05:42:36

Matthew wrote:

This is the icon:
.pswp__button--share::after {
	content: "\f03e";
}
You can change the content value via custom CSS. Available icons are here; click the icon you want to get it's code ID.

Worked great. Thanks. Now how do I change the "title" hover text to read "Share" instead of "Image Menu". I need viewers to know what the button actually does.

grover_c wrote:

What is the best way to add a mailto: link to the large image presentation. I would like to be able to style it using css and have the subject be the title of the image. It will be an “Inquire About This Work” button. This is very important to how people interact with me for my business.

Matthew wrote:
The large image presentation is not editable by the user, beyond the options we have provided. If you would like to make a feature request, please do so in a separate thread, titled accordingly (i.e. "Feature Request: Do-a-thing") and with a detailed description of how you might envision the feature appearing/working. While we cannot implement every request we receive, Backlight is heavily feedback-driven and we do give all requests due consideration.

I will make a formal request, but in the meantime, is there a button I can add to the top bar that would link to a contact form or mailto with the subject the image title? As mentioned, this is how all of my sales are made on my present website. Even a kluge would be very much appreciated at this point. The is the only thing keeping me from launching my new site.

Can the Feedback or Cart add-ons help here?

Is it something that can be stuffed into the caption?

Thanks again for your help.

rod barbee · 2016-12-20 07:41:16

Worked great. Thanks. Now how do I change the "title" hover text to read "Share" instead of "Image Menu". I need viewers to know what the button actually does.

You can do this with a little bit of jQuery via phplugins using the ttg_scripts hook.

Try this:

<script>$(".pswp__button.pswp__button--share").prop("title", "Share");</script>

rod barbee · 2016-12-20 09:57:22

grover_c wrote:

I will make a formal request, but in the meantime, is there a button I can add to the top bar that would link to a contact form or mailto with the subject the image title?
Can the Feedback or Cart add-ons help here?
Is it something that can be stuffed into the caption?

Thanks again for your help.

My guess is that this one is going to be more of a feature request.

The Client Feedback module may do what you need. Using it, clients can comment on individual images. You'll be sent a form via email with comments, ratings, etc

BerndBerlin · 2017-07-16 23:57:52

Hello, are there4 any changes in backlight 1.2.1? Tried to modify the share button in the slideshow but it remains the same.

Matthew · 2017-07-17 01:02:33

There are no user customizations for share buttons. If you want rid of them, you can use custom CSS to hide them.

.share-facebook, .share-twitter, .share-pinterest { display: none; }

rsamco · 2017-10-19 02:54:32

It appears that the css selector for the share icon has changed in pangolin ... is the large image presentation share link/icon still customizable?

rod barbee · 2017-10-19 02:57:32

yes. See this thread: http://community.theturninggate.net/vie … hp?id=8112

rsamco · 2017-10-19 03:16:06

Ummm, Rod -- that thread addresses turning off a share choice "under" the button/link I want to change. In any case, with my limited CSS knowledge, I extrapolated from that & tried:

li.share {
content: "\f064";
}

but to no effect.

rsamco · 2017-10-19 03:23:54

got it!

/* photoswipe share icon */
.fancybox-button--pallet::before {
content: "\f064";
}

rod barbee · 2017-10-19 03:30:53

oh, I thought you were interested in the individual buttons.

Community @ The Turning Gate

#1 2016-12-11 12:24:13

Backlight Customization Questions

#2 2016-12-11 15:33:49

Re: Backlight Customization Questions

#3 2016-12-20 05:42:36

Re: Backlight Customization Questions

#4 2016-12-20 07:41:16

Re: Backlight Customization Questions

#5 2016-12-20 09:57:22

Re: Backlight Customization Questions

#6 2017-07-16 23:57:52

Re: Backlight Customization Questions

#7 2017-07-17 01:02:33

Re: Backlight Customization Questions

#8 2017-10-19 02:54:32

Re: Backlight Customization Questions

#9 2017-10-19 02:57:32

Re: Backlight Customization Questions

#10 2017-10-19 03:16:06

Re: Backlight Customization Questions

#11 2017-10-19 03:23:54

Re: Backlight Customization Questions

#12 2017-10-19 03:30:53

Re: Backlight Customization Questions

Board footer