Feature proposal - Individual Background image

michilge · 2017-07-24 03:15:02

I like the way Backlight integrates background images.
Backgrounds as well as color schemes are a powerful and aesthetically pleasing tool to separate various regions of a site.
Still, to have different background images, individual templates must be provided. Of course cloning has made it easier, but with a growing number of template clones, later changes in layout or other settings require replicating the change over all relevant clones.

To allow for individual backgrounds corresponding closely with an album's content it would be nice to have an option to pick the background for a particular album (perhaps even album set) from the album itsself in the LR-publisher plugin. If an album specific background image is selected in the LR-publisher plugin, this could override the Background set in the template.
A checkbox "list in album index" could control whether the background image shall serve only as background or also be displayed as regular contentin thumbnail grid and large image.

With the option unchecked, a photo can be thrown into the album to serve as a dedicated background. As well as not every good photo is a suitable background (to much details, interesting regions covered by spinal column etc.) not every good background is a good photo to view solo.

A fine evening for all
Michael

Daniel Leu · 2017-07-24 05:00:18

Hi Michal,

Did you try to use custom.css for this? There are many new page classes like the slug, page template etc that can be used to target specific pages:

.slug-XXX main {
    background-attachment: fixed;
    background-image: url(https://fotos.michilge.de/backlight/custom/images/background-xxx.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
}

This way you can set a background image for each gallery. Yeah, it is a bit more complicated than just setting one in the gui, but should do the trick.

michilge · 2017-07-24 05:25:23

Hi Daniel,

no, I had not even thought in that direction yet. I'm not to good at css. So I don't get such an idea without initial help.

To understand You right, I would have to do the following:
1) publish the album, either set a slug or find out the slug created by publisher

2) upload a crafted background to backlight/custom/images/background-xxx.jpg and replace "xxx" with the album slug (or bring up another naming convention)

3) add a section .slug-xxx main{ } to my custom.css and replace the "xxx" with the album slug and adjust the url() to the uploaded image.

If the album gets unpublished, the entry in my custom.css wouldn't do harm.

That sounds convincing.

Daniel Leu · 2017-07-24 10:02:59

Yes, that's right, Michael

For the slug name, you might want to look at the source code of your galleries:

<body class="pangolin type-album template-id-50 album-template-id-53 slug-_recent_work cart-unready crg-unready" data-layout="2col left">

In this case, I would use .slug-_recent_work main {} to select the background.

To simplify the process down the road, I would create a gallery (eg xxx_backgrounds) that is hidden from display and search, and has a gallery image size/quality like the one you want to use for the background images. Whichever image you want to publish, make a virtual copy, put that one into this gallery, change the filename to something that makes sense, and publish it. I use this procedure to make my square thumbnails for the gallery-sets. Now you can use /galleries/xxx_backgrounds/photos/nice_image_name.jpg in your CSS.

I'm not an expert with CSS, but I think the code can be simplified down to:

main {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
}

.slug-blue main { background-image: url(https://fotos.michilge.de/backlight/custom/images/background-blue.jpg); }
.slug-red main { background-image: url(https://fotos.michilge.de/backlight/custom/images/background-red.jpg); }
etc

Good luck!

Matthew · 2017-07-24 14:14:04

Daniel is on the right track. If you set a default background for the template, then you can also set those options using the designer UI, then use custom CSS just to override the image:

.slug-blue .background__image {
	background-image: url(https://...);
}

michilge · 2017-07-28 07:04:37

I finally found the time to try this out and can confirm that it works.
I created a hidden gallery for backgrounds and started a soon to grow section in my custom.css. I also finally noticed that the FileZilla ftp-client provides a bookmarks function for quick access.

For me the additional steps are completely OK.
Thank You for the hints. I slowly start to understand how powerful the concept behind custom.css really is.

Community @ The Turning Gate

#1 2017-07-24 03:15:02

Feature proposal - Individual Background image

#2 2017-07-24 05:00:18

Re: Feature proposal - Individual Background image

#3 2017-07-24 05:25:23

Re: Feature proposal - Individual Background image

#4 2017-07-24 10:02:59

Re: Feature proposal - Individual Background image

#5 2017-07-24 14:14:04

Re: Feature proposal - Individual Background image

#6 2017-07-28 07:04:37

Re: Feature proposal - Individual Background image

Board footer