Sample Images
- 17122016-DSC04464 (Amsterdam Lights smear) AmsterdamGoldenParachute.jpg
- 28062016-DSC02752 (University of Évora Plato) EvoraPlatonic.jpg
- 02072017-DSC04906 (Biogradska Gora Montenegro) BiogradskaGreenEternity.jpg
- 20171021-DSC05517 (National Park Cristoffel, Curação) SpikeyCristoffel.jpg
- 20180303-DSC05733 (Ice on the Brouwersgracht, Amsterdam) LoneSkaterBrouwersgracht.jpg
- 20180628-DSC02714 (Capela dos Ossos, Évora) CapelaDosOssos.jpg
- 20170711-DSC05091 (Dubrovnik, Croacia) LavenderDubrovnikDreams.jpg
- IMG_20170923_155909_20170923160312624 (Haarlemmerdijk, Amsterdam) HaarlemmerdijkPurpleHaze.jpg
LESS Variables
Variables are used to determine the length of the slideshow animation and the URL locations of the slide images and you will need to provide them in order to transpile the CSS.
The sample page includes 7 slides using the following variables:
@length-animation: 175s;
@total-slides: 7s;
@slide1-url: "../images/backgrounds/AmsterdamGoldenParachute.jpg";
@slide2-url: "../images/backgrounds/CapelaDosOssos.jpg";
@slide3-url: "../images/backgrounds/HaarlemmerdijkPurpleHaze.jpg";
@slide4-url: "../images/backgrounds/LavenderDubrovnikDreams.jpg";
@slide5-url: "../images/backgrounds/LoneSkaterBrouwersgracht.jpg";
@slide6-url: "../images/backgrounds/SpikeyCristoffel.jpg";
@slide7-url: "../images/backgrounds/EvoraPlatonic.jpg";
Changing the Number of Slides
The sample page contains 7 slides. To change the number of slides, besides changing the variables, you'll have to change the slideshow LESS.
For example, this would be the 8th slide:
li:nth-child(8) {
@delay-slide8: 7s * @length-animation / @total-slides;
.delay-slide8() {
-webkit-animation-delay: @delay-slide8;
-moz-animation-delay: @delay-slide8;
-o-animation-delay: @delay-slide8;
animation-delay: @delay-slide8;
}
div {
.delay-slide8();
}
span {
.delay-slide8();
background-image: url(@slide8-url);
}
}
Project Initalization
Use yarn
:
yarn install
If using FTP to deploy, you may use the rake
tool. If so, run
the Ruby Bundler to install gems:
bundle install
Set up your FTP secrets in a .env
file:
FTP_SERVER=<host>
FTP_USER=<user>
FTP_PASSWORD=<password>
FTP_DEBUG=<true or false>
Webpack
To build the webpack bundle and watch changes:
yarn build
To build once (while releasing):
yarn build-once
Deploying with Rake tool (FTP only)
Using your normal FTP client, build the folder structure as follows
(/public/backgrounds-test
is the example here):
/public/backgrounds-test
/public/pbackgrounds-test/dist
/public/backgrounds-test/dist/font
/public/backgrounds-test/images
/public/backgrounds-test/images/backgrounds
Adjust the deploy.yml
configuration according to your structure.
Then run:
rake --trace
Adobe Lightroom Classic
I have checked in the Lightroom catalog to show how I got from the raw images to the web background JPEG's.