New photogrid component (#1338)

build/download-images.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const YAML = require('yaml')
+const fs = require('node:fs')
+const path = require('node:path')
+const request = require('request')
+const filePath = path.join(__dirname, '../src/pages/_data/photos.yml')
+
+const photos = YAML.parse(fs.readFileSync(filePath, 'utf8'))
+
+const urlTitle = (str) => {
+  str = str
+		.toLowerCase()
+		.replaceAll('&', 'and')
+		.replace(/[^[a-z0-9-]/g, '-')
+		.replace(/-+/g, '-')
+
+  return str
+}
+
+const download = function(uri, filename, callback, error) {
+  request.head(uri, function(err, res, body) {
+	 request(uri).pipe(fs.createWriteStream(filename))
+		  .on('close', callback)
+		  .on('error', error)
+  })
+}
+
+async function downloadPhotos() {
+  for (const key in photos) {
+	 const photo = photos[key]
+
+	 let filename, i = 1;
+
+	 do {
+		filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
+		i++
+	 } while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
+
+	 await new Promise((resolve, reject) => {
+		download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function(){
+		  resolve()
+		}, function() {
+		  reject()
+		});
+	 })
+
+	 photos[key]['file'] = filename
+	 photos[key]['horizontal'] = photo['width'] > photo['height']
+  }
+
+  fs.writeFileSync(filePath, YAML.stringify(photos))
+}
+
+downloadPhotos();
+

package.json

@@ -17,7 +17,9 @@
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
     "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push"
+    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
+    "download-images": "node build/download-images.js",
+    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
   },
   "repository": {
     "type": "git",
@@ -147,6 +149,7 @@
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
+    "imageoptim-cli": "^3.0.7",
     "imask": "^6.4.3",
     "jsvectormap": "^1.5.1",
     "list.js": "^2.3.1",
@@ -155,6 +158,7 @@
     "plyr": "^3.7.2",
     "postcss": "^8.4.18",
     "release-it": "^15.5.0",
+    "request": "^2.88.2",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",

src/pages/_data/menu.yml

@@ -206,6 +206,10 @@ extra:
     music:
       title: Music
       url: music.html
+    photogrid:
+      title: Photogrid
+      url: photogrid.html
+      badge: New
     tasks:
       title: Tasks
       url: tasks.html

src/pages/_data/photos.yml

@@ -1,207 +1,817 @@
-- file: 1b73704b282a8ec6.jpg
+- src: https://kaboompics.com/photo/4016/people-taking-notes
-  horizontal: true
+  path: https://kaboompics.com/download/920f3d86e22f6a241b99828c8d61fac5/medium
-  title: "Breakfast served with tea, bread and eggs"
+  title: Group of people brainstorming and taking notes
-
+  tags: work, business, design, brainstorming, teamwork, presentation, notes,
-- file: 3b05a157d2edde04.jpg
+    group, team, meeting, conference, discussion
+  author: Karolina Grabowska
+  width: 3648
+  height: 5472
+  file: group-of-people-brainstorming-and-taking-notes.jpg
   horizontal: false
-  title: "Room service tray at hotel for breakfast: cookies, jam, chocolate mousse, orange fruit, tea"
+- src: https://kaboompics.com/photo/4357/beautiful-blonde-girl-on-the-beach
-
+  path: https://kaboompics.com/download/f21281df386f391de35cad3a6cc11170/medium
-- file: 3d2998219313cd37.jpg
+  title: Beautiful blonde woman relaxing with a can of coke on a tree stump by the
+    beach
+  tags: beach, female, girl, sand, woman, drink, tree, beautiful, pretty, coke,
+    coca-cola, can, stump
+  author: Karolina Grabowska
+  width: 3718
+  height: 2479
+  file: beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg
   horizontal: true
-  title: "Book, fairy lights"
+- src: https://kaboompics.com/photo/2156/brainstorming-session-with-creative-designers
-
+  path: https://kaboompics.com/download/15aaee824dbc26b89f6ad379eb4c86ef/medium
-- file: 4f668538bdd3fd7f.jpg
+  title: Brainstorming session with creative designers
+  tags: people, work, hands, business, design, brainstorming, session, creative,
+    ideas, teamwork, concept, plan, project
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: brainstorming-session-with-creative-designers.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/19633/the-woman-holds-a-cryptocurrency-bitcoin
+  path: https://kaboompics.com/download/d8a1b053f93ff3492c0f7bb8c7c2dddb/medium
+  title: Finances - US Dollars and Bitcoins - Currency - Money
+  tags: money, finances, dollars, bitcoin, currency, Cryptocurrency
+  author: Karolina Grabowska
+  width: 6391
+  height: 4261
+  file: finances-us-dollars-and-bitcoins-currency-money.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/2417/contemporary-black-and-white-home-decor
+  path: https://kaboompics.com/download/ebb5a26ae5a247d02633087399a6a07e/medium
+  title: Contemporary black-and-white home decor
+  tags: interior, sofa, magazines, modern, table, contemporary, cat, pillows, home
+    decor, bookcase, stylish
+  author: Karolina Grabowska
+  width: 3565
+  height: 5347
+  file: contemporary-black-and-white-home-decor.jpg
   horizontal: false
-  title: "Bed with grey pillows by the window"
+- src: https://kaboompics.com/photo/4014/woman-holding-a-smartphone
-
+  path: https://kaboompics.com/download/82daef4c37d5160140951d751569ce0d/medium
-- file: 6ab3200b14549f8a.jpg
+  title: Group of people brainstorming and taking notes
+  tags: work, business, design, brainstorming, teamwork, presentation, notes,
+    group, team, meeting, conference, discussion
+  author: Karolina Grabowska
+  width: 5182
+  height: 3455
+  file: group-of-people-brainstorming-and-taking-notes-2.jpg
   horizontal: true
-  title: "Healthy Dinner"
+- src: https://kaboompics.com/photo/4180/blue-sofa-with-pillows-in-a-designer-living-room-interior
-
+  path: https://kaboompics.com/download/ec4616f94240f962bc01de80c250b09e/medium
-- file: 06c56bb2dfad556b.jpg
+  title: Blue sofa with pillows in a designer living room interior
+  tags: interior, sofa, pillows, home decor, couch, rug, design, settee
+  author: Karolina Grabowska
+  width: 5135
+  height: 3423
+  file: blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5520/home-office-desk-with-macbook-iphone-calendar-watch-organizer
+  path: https://kaboompics.com/download/a78dbe21b476a579d11e7df55dc27782/medium
+  title: Home office desk with Macbook, iPhone, calendar, watch & organizer
+  tags: office, workspace, workplace, macbook, iphone, phone, mobile, work, desk,
+    notebook, laptop, working, watch, organizer, calendar, study, home office,
+    silver watch
+  author: Karolina Grabowska
+  width: 5041
+  height: 3361
+  file: home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/3619/woman-writing-in-her-notebook
+  path: https://kaboompics.com/download/88fe208aec7f740d83240ef86a06d395/medium
+  title: Young woman working in a cafe
+  tags: caucasian, female, woman, office, workspace, workplace, computer, macbook,
+    technology, coffee, laptop, working, young, cafe, restaurant, glasses,
+    indoors, businesswoman
+  author: Karolina Grabowska
+  width: 4104
+  height: 2736
+  file: young-woman-working-in-a-cafe.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/7016/everything-you-need-to-work-from-your-bed
+  path: https://kaboompics.com/download/31b2d14bf15e1eb16b14754cae53cf6b/medium
+  title: Everything you need to work from your bed
+  tags: workspace, computer, macbook, iphone, book, phone, mobile, work, laptop,
+    reading, above, bed, cell phone, bedding, bedroom, blogging, flatlay
+  author: Karolina Grabowska
+  width: 5217
+  height: 3568
+  file: everything-you-need-to-work-from-your-bed.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4852/young-smiling-man-using-mobile-phone
+  path: https://kaboompics.com/download/1bf0e8b463b401e0e9fede2afae198e5/medium
+  title: Young Entrepreneur Working from a Modern Cafe
+  tags: interior, workspace, workplace, computer, macbook, laptop, typing, man,
+    working, young, cafe, male, business, restaurant, indoor, casual, designer,
+    busy, handsome, architect, macbook pro, businessman, alone
+  author: Karolina Grabowska
+  width: 5221
+  height: 3481
+  file: young-entrepreneur-working-from-a-modern-cafe.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/19660/the-woman-uses-mobile-phone-writes-a-message
+  path: https://kaboompics.com/download/4770f0a30bec8a09566fef818e8ce070/medium
+  title: Finances - US Dollars and Bitcoins - Currency - Money
+  tags: money, finances, dollars, bitcoin, currency, Cryptocurrency
+  author: Karolina Grabowska
+  width: 6720
+  height: 4480
+  file: finances-us-dollars-and-bitcoins-currency-money-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4695/group-of-people-examining-a-map
+  path: https://kaboompics.com/download/a491502dbf1ed2c793f997d7269234b5/medium
+  title: Group of people sightseeing in the city
+  tags: people, sunny, town, city, street, travel, trip, sightseeing, group, tour,
+    hike, crowd
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: group-of-people-sightseeing-in-the-city.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/7898/color-palette-guide-sample-colors-catalog
+  path: https://kaboompics.com/download/8e433dbe3ebb96628bffc471b605a416/medium
+  title: Color Palette Guide. Sample Colors Catalog.
+  tags: painting, paint, colorful, colors, painter, palette, pantone, multicolor,
+    rgb, cmyk, graphic designer, rainbow, print, swatch
+  author: Karolina Grabowska
+  width: 4316
+  height: 2877
+  file: color-palette-guide-sample-colors-catalog-.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/8956/elegant-home-office-with-golden-accessories
+  path: https://kaboompics.com/download/43268f5181d1c32794cd366aac911d3f/medium
+  title: Elegant home office with golden accessories
+  tags: laptop, workspace, home office, office, work, black desk, macbook,
+    computer, macbook air, screen, mockup, elegant, elegance, black, gold, art,
+    picture, interior, indoor, painting, frame, gold frame, iphone, mobile,
+    phone, tech, technology
+  author: Karolina Grabowska
+  width: 3571
+  height: 5356
+  file: elegant-home-office-with-golden-accessories.jpg
   horizontal: false
-  title: "Modern interior with dining table and chairs"
+- src: https://kaboompics.com/photo/3283/businesswoman-entrepreneur-working-on-laptop-from-home-office-space
-
+  path: https://kaboompics.com/download/f99ffdfd4cba04abd23694ab1cca906a/medium
-- file: 6d35d9a2bd6c63c2.jpg
+  title: Stylish workplace with computer at home
+  tags: woman, interior, interior design, sofa, furniture, office, modern, chair,
+    workspace, workplace, lamp, computer, contemporary, macbook, pet, animal,
+    desk, laptop, cat, living room, young, decor, decorations, pillows, couch,
+    macbook air, home office, lounge, desk lamp
+  author: Karolina Grabowska
+  width: 3749
+  height: 2499
+  file: stylish-workplace-with-computer-at-home.jpg
   horizontal: true
-  title: "Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"
+- src: https://kaboompics.com/photo/19644/the-woman-holds-a-cryptocurrency-bitcoin-us-dollars
-
+  path: https://kaboompics.com/download/9ed5fc25f062fa80719329eb479de71b/medium
-- file: 6f6e2ef709fef97a.jpg
+  title: Finances - US Dollars and Bitcoins - Currency - Money
+  tags: money, finances, dollars, bitcoin, currency, Cryptocurrency
+  author: Karolina Grabowska
+  width: 4480
+  height: 6720
+  file: finances-us-dollars-and-bitcoins-currency-money-3.jpg
   horizontal: false
-  title: "A walk through the forest"
+- src: https://kaboompics.com/photo/4538/woman-writing-on-notebook
-
+  path: https://kaboompics.com/download/8bff466fb9d7b3f66a718cae09c28dbf/medium
-- file: 6fe407b4b13bbcde.jpg
+  title: Pink desk in the home office
+  tags: female, home, office, workspace, workplace, desk, indoor, femine, stylish,
+    home office, wroking
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: pink-desk-in-the-home-office.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4920/young-woman-sitting-on-the-sofa-and-working-on-her-laptop
+  path: https://kaboompics.com/download/d0af473bf330f4f008fda5814adbf31a/medium
+  title: Young woman sitting on the sofa and working on her laptop
+  tags: caucasian, girl, person, woman, minimal, sofa, minimalism, room, home,
+    coffee table, white, computer, table, apple macbook, macbook, technology,
+    laptop, typing, living room, working, young, scandi, scandinavian, couch,
+    indoors, businesswoman, blonde, macbook pro, marble, blogging, marble table,
+    white marble, at home, wooden floor, white floor
+  author: Karolina Grabowska
+  width: 5396
+  height: 3597
+  file: young-woman-sitting-on-the-sofa-and-working-on-her-laptop.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/1916/morning-coffee
+  path: https://kaboompics.com/download/0dbd1b546d3f4b498c6b94027d67d4a3/medium
+  title: Coffee on a table with other items
+  tags: table, coffee, morning, pot, tablet
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: coffee-on-a-table-with-other-items.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4843/man-laptop-mobile-phone
+  path: https://kaboompics.com/download/fc36f69442e7acfda1cbb67f89f33311/medium
+  title: Young Entrepreneur Working from a Modern Cafe
+  tags: interior, workspace, workplace, computer, macbook, laptop, typing, man,
+    working, young, cafe, male, business, restaurant, indoor, casual, designer,
+    busy, handsome, architect, macbook pro, businessman, alone
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: young-entrepreneur-working-from-a-modern-cafe-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4515/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-tea-in-hands
+  path: https://kaboompics.com/download/2a481324d8aa41a7190c094ec2505375/medium
+  title: Soft photo of woman on the bed with the book and cup of coffee in hands
+  tags: woman, white, relax, free time, blanket, indoor, bed, cosy, comfortable,
+    cozy, comfy, hygge, soft
+  author: Karolina Grabowska
+  width: 4893
+  height: 3262
+  file: soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5199/fairy-lights-at-the-beach-in-bulgaria
+  path: https://kaboompics.com/download/37956f431c10a9295314c8e75b460bb2/medium
+  title: Fairy lights at the beach in Bulgaria
+  tags: ocean, sea, shore, summer, evening, man, male, Europe, seaside, night,
+    lights, fairy lights, bokeh, blurred, blur, bulgaria, black sea, sunny
+    beach, christmas lights
+  author: Karolina Grabowska
+  width: 5359
+  height: 3573
+  file: fairy-lights-at-the-beach-in-bulgaria.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4085/woman-working-on-laptop-at-home-office
+  path: https://kaboompics.com/download/911b8d07d5b91b97d7d55886c697aa06/medium
+  title: Woman working on laptop at home office
+  tags: woman, office, workspace, workplace, computer, macbook, coffee, work,
+    desk, laptop, cup, businesswoman, home office, busy
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: woman-working-on-laptop-at-home-office.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5793/modern-home-office
+  path: https://kaboompics.com/download/0379987e2884a5ce5c226f3e70e6fdb0/medium
+  title: Modern Home Office
+  tags: interior, interior design, office, chair, workspace, workplace, Apple,
+    tech, computer, table, macbook, technology, wooden desk, notebook, laptop,
+    golden, working, decorations, home decor, calendar, home office, wooden
+    chair, green desk, dark desk, office space, gold accessories, gold
+    decorations, golden accessories, agenda
+  author: Karolina Grabowska
+  width: 4813
+  height: 3209
+  file: modern-home-office.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5046/woman-using-mobile-phone
+  path: https://kaboompics.com/download/95b133364639c0d4dece57a4d34bbb31/medium
+  title: Blond using her laptop at her bedroom
+  tags: caucasian, girl, woman, home, technology, work, working, young, bed, cosy,
+    cozy, comfy, bedroom, blonde, at home, blond, influencer, ombre hair
+  author: Karolina Grabowska
+  width: 5331
+  height: 3554
+  file: blond-using-her-laptop-at-her-bedroom.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/8271/tropical-palm-leaves-floral-pattern-background
+  path: https://kaboompics.com/download/e8879f5be8f5322adfcc042e9559c762/medium
+  title: Tropical palm leaves, floral pattern background
+  tags: summer, background, green, nature, leaf, leaves, pattern, tropical,
+    exotic, palm, botanical, wallpaper, paradise, jungle
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: tropical-palm-leaves-floral-pattern-background.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/8890/woman-read-book-and-drink-coffee
+  path: https://kaboompics.com/download/89cc83e7fb8feb124e6e723e6349fe02/medium
+  title: Woman read book and drink coffee
+  tags: coffee, book, hands, relaxing, reading, free time, opened book, top view,
+    cappucino, late, flat lay
+  author: Karolina Grabowska
+  width: 5260
+  height: 3507
+  file: woman-read-book-and-drink-coffee.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/2223/book-on-the-grass
+  path: https://kaboompics.com/download/b9427ffe5357d30908bba72a9c9c701f/medium
+  title: Book on the grass
+  tags: book, reading, grass, leaf, literature
+  author: Karolina Grabowska
+  width: 5325
+  height: 3550
+  file: book-on-the-grass.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5005/sago-palm
+  path: https://kaboompics.com/download/d18f6ddaa80a7e9ef787aa2565a9a65d/medium
+  title: Colorful Exotic Flowers and Greenery
+  tags: flowers, flora, leaf, leaves, colorful, tropical, greenery, exotic,
+    multicolor
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: colorful-exotic-flowers-and-greenery.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5811/woman-laptop-mobile-phone-notebooks
+  path: https://kaboompics.com/download/f7f2ca1d6101c28a959bb0b34d9381f8/medium
+  title: Workplace with laptop on table at home
+  tags: interior, minimal, minimalist, minimalism, room, home, white, office,
+    workspace, workplace, tech, computer, table, technology, work, laptop,
+    scandi, scandinavian, indoors, white laptop, home office
+  author: Karolina Grabowska
+  width: 3466
+  height: 2311
+  file: workplace-with-laptop-on-table-at-home.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5188/blurred-city-lights-reflected-in-the-water-at-night
+  path: https://kaboompics.com/download/ec33b0094b56d51699edb1d3945040c5/medium
+  title: City lights reflected in the water at night
+  tags: coast, ocean, sea, water, city, reflection, Europe, waterscape, urban,
+    night, lights, bulgaria, black sea, Nessebar, dusk
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: city-lights-reflected-in-the-water-at-night.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/19462/cryptocurrency-bitcoin-coins
+  path: https://kaboompics.com/download/2b755541f04622f2853fb8a8436c517f/medium
+  title: Cryptocurrency Bitcoin coins
+  tags: bitcoin, Cryptocurrency, blockchain, btc, crypto, money, finances,
+    economy, virtual, currency, financial
+  author: Karolina Grabowska
+  width: 6638
+  height: 4425
+  file: cryptocurrency-bitcoin-coins.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/8887/woman-read-book-and-drink-coffee
+  path: https://kaboompics.com/download/9ec53d895e21a920458091ae8009fb5d/medium
+  title: Woman read book and drink coffee
+  tags: coffee, book, hands, relaxing, reading, free time, opened book, top view,
+    cappucino, late, flat lay
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: woman-read-book-and-drink-coffee-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/3760/people-holding-glasses-of-white-wine-making-a-toast
+  path: https://kaboompics.com/download/0ae200fd8ad9c44e2a06424886932370/medium
+  title: Friends at a restaurant drinking wine
+  tags: evening, fun, happy, friends, women, dinner, restaurant, glass, party,
+    wineglass, celebration, clinking, cheers
+  author: Karolina Grabowska
+  width: 5209
+  height: 3473
+  file: friends-at-a-restaurant-drinking-wine.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4383/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake
+  path: https://kaboompics.com/download/78c3777d558f8ec1c5422992e278091f/medium
+  title: Beautiful blonde woman on a wooden pier by the lake
+  tags: female, girl, water, woman, lake, pier, young, wooden, wood, beautiful,
+    pretty, blonde, jetty, attractive
+  author: Karolina Grabowska
+  width: 3859
+  height: 2573
+  file: beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/19647/finances-us-dollars-and-bitcoins-currency-money
+  path: https://kaboompics.com/download/c628e8ebf46a952ab0480f7a02ea94d0/medium
+  title: Finances - US Dollars and Bitcoins - Currency - Money
+  tags: money, finances, dollars, bitcoin, currency, Cryptocurrency
+  author: Karolina Grabowska
+  width: 4480
+  height: 6720
+  file: finances-us-dollars-and-bitcoins-currency-money-4.jpg
   horizontal: false
-  title: "White and bright interior of a designer living room"
+- src: https://kaboompics.com/photo/1516/white-apple-imac-computer-with-elephant-mousepad
-
+  path: https://kaboompics.com/download/d672c1eeef13a922f2e9283272ccb0c5/medium
-- file: 7ce612d952e536b2.jpg
+  title: White Apple iMac computer with elephant mousepad
+  tags: white, iMac, Apple, keyboard, mouse, mac, mousepad, elephant, monitor,
+    Hella Jongerius, Eames Elephant, Vitra
+  author: Karolina Grabowska
+  width: 4029
+  height: 2686
+  file: white-apple-imac-computer-with-elephant-mousepad.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/13265/macbook-laptop-orange-dianthus-carnation-or-clove-pink-flowers-on-desk-kiwano-fruit
+  path: https://kaboompics.com/download/aa71b43ce8d4fd96b8d7c047abcd7c99/medium
+  title: A woman works on a laptop at home
+  tags: woman, work, laptop, home, office, workspace, workplace, working,
+    business, caucasian, blogger, indoors, busy, at work, notebook, technology,
+    macbook, desk
+  author: Karolina Grabowska
+  width: 4480
+  height: 6720
+  file: a-woman-works-on-a-laptop-at-home.jpg
   horizontal: false
-  title: "Berry Cheesecake"
+- src: https://kaboompics.com/photo/5823/iphone-laptop-coffee-in-chemex
-
+  path: https://kaboompics.com/download/ae2d7640268a1a4ba0d601aec047e88b/medium
-- file: 8a26974ee6444acd.jpg
+  title: Workplace with laptop on table at home
+  tags: interior, minimal, minimalist, minimalism, room, home, white, office,
+    workspace, workplace, tech, computer, table, technology, work, laptop,
+    scandi, scandinavian, indoors, white laptop, home office
+  author: Karolina Grabowska
+  width: 3851
+  height: 2567
+  file: workplace-with-laptop-on-table-at-home-2.jpg
   horizontal: true
-  title: "Beautiful blonde woman on a wooden pier by the lake"
+- src: https://kaboompics.com/photo/5482/macbook-iphone-notebook-cheese-cake-and-cup-of-coffee
-
+  path: https://kaboompics.com/download/934d49e018d8ce5e0c648a002aeffcff/medium
-- file: 8c13ad59f739558c.jpg
+  title: "Working in a restaurant: Macbook, Cheese Cake and Cup of Coffee"
+  tags: workspace, workplace, tech, computer, macbook, technology, coffee, mobile,
+    work, desk, wooden desk, laptop, fruits, cup, cake, working, cafe, business,
+    indoor, wooden table, cheese cake, onterior
+  author: Karolina Grabowska
+  width: 4104
+  height: 2736
+  file: working-in-a-restaurant-macbook-cheese-cake-and-cup-of-coffee.jpg
   horizontal: true
-  title: "Still life of mandarin oranges with leaves"
+- src: https://kaboompics.com/photo/4908/young-woman-sitting-on-the-sofa-and-working-on-her-laptop
-
+  path: https://kaboompics.com/download/57d47e394029c31c944ead8fe1aa152e/medium
-- file: 8d49f9c47fa68d5a.jpg
+  title: Young woman sitting on the sofa and working on her laptop
+  tags: caucasian, girl, person, woman, minimal, sofa, minimalism, room, home,
+    coffee table, white, computer, table, apple macbook, macbook, technology,
+    laptop, typing, living room, working, young, scandi, scandinavian, couch,
+    indoors, businesswoman, blonde, macbook pro, marble, blogging, marble table,
+    white marble, at home, wooden floor, white floor
+  author: Karolina Grabowska
+  width: 4003
+  height: 2669
+  file: young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/2148/brainstorming-session-with-creative-designers
+  path: https://kaboompics.com/download/063921382ab30ea474bb999104ff486f/medium
+  title: Brainstorming session with creative designers
+  tags: people, work, hands, business, design, brainstorming, session, creative,
+    ideas, teamwork, concept, plan, project
+  author: Karolina Grabowska
+  width: 5011
+  height: 3341
+  file: brainstorming-session-with-creative-designers-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4464/woman-drinking-hot-tea-in-her-home-office
+  path: https://kaboompics.com/download/11740715ba428deb16eed24a9315215d/medium
+  title: Woman drinking hot tea in her home office
+  tags: caucasian, woman, computer, macbook, laptop, tea, hot, drink, young, warm,
+    autumn, fall, winter, mug, comfortable, cozy, home office, hygge, sweater,
+    wool
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: woman-drinking-hot-tea-in-her-home-office.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4906/stylish-workspace-with-macbook-pro
+  path: https://kaboompics.com/download/5664af9b19cba7fd7b0f7f8265318631/medium
+  title: Stylish workspace with Macbook Pro
+  tags: interior, white, office, workspace, workplace, computer, apple macbook,
+    macbook, technology, desk, laptop, scandi, scandinavian, indoors, home
+    office
+  author: Karolina Grabowska
+  width: 5378
+  height: 3585
+  file: stylish-workspace-with-macbook-pro.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4282/people-by-a-banquet-table-full-with-food
+  path: https://kaboompics.com/download/0faef0f22b2106fcfc26f32c639d6e12/medium
+  title: People by a banquet table full with food
+  tags: people, table, food, picnic, eating, meal, dinner, rich, feast, banquet
+  author: Karolina Grabowska
+  width: 5176
+  height: 3451
+  file: people-by-a-banquet-table-full-with-food.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/19428/golden-bitcoin-coin-on-us-dollars
+  path: https://kaboompics.com/download/0dc0a92485fba088ebee7176474a7cce/medium
+  title: Cryptocurrency Bitcoin coins
+  tags: bitcoin, Cryptocurrency, blockchain, btc, crypto, money, finances,
+    economy, virtual, currency, financial
+  author: Karolina Grabowska
+  width: 4179
+  height: 6268
+  file: cryptocurrency-bitcoin-coins-2.jpg
   horizontal: false
-  title: "Fresh Cherries on a simple plate"
+- src: https://kaboompics.com/photo/4320/woman-working-on-a-laptop-while-enjoying-a-breakfast-coffee-and-chocolate-in-bed
-
+  path: https://kaboompics.com/download/18787b5f6eb44da0eeafd9d5670e58f2/medium
-- file: 8fdeb4785d2b82ef.jpg
+  title: Woman working on a laptop while enjoying a breakfast coffee and chocolate
+    in bed
+  tags: white, Apple, macbook, coffee, work, notebook, laptop, business, bed,
+    chocolate, mac, sheets, notes, hotel
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: woman-working-on-a-laptop-while-enjoying-a-breakfast-coffee-and-chocolate-in-bed.jpg
   horizontal: true
-  title: "Blonde woman having a healthy snack at the wooden pier"
+- src: https://kaboompics.com/photo/4015/group-of-people-brainstorming-and-taking-notes
-
+  path: https://kaboompics.com/download/e7b39ed848cceddc9cdaad5fe520bffe/medium
-- file: 9f36332564ca271d.jpg
+  title: Group of people brainstorming and taking notes
-  horizontal: true
+  tags: work, business, design, brainstorming, teamwork, presentation, notes,
-  title: "Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"
+    group, team, meeting, conference, discussion
-
+  author: Karolina Grabowska
-- file: 35b88fc04a518c1b.jpg
+  width: 3476
-  horizontal: true
+  height: 5214
-  title: "Overhead view of macarons on a marble slab"
+  file: group-of-people-brainstorming-and-taking-notes-3.jpg
-
-- file: 36e273986ed577b8.jpg
-  horizontal: true
-  title: "Palm trees in Spain"
-
-- file: 75b555b99d5b38c4.jpg
-  horizontal: true
-  title: "Macbook, an iPhone, a coffee, a chocolate and a notebook in a bed"
-
-- file: 446fb2d04445c2d9.jpg
   horizontal: false
-  title: "Dark green leaves of monstera"
+- src: https://kaboompics.com/photo/4898/businesswoman-working-at-her-laptop
-
+  path: https://kaboompics.com/download/704499021ab16e440318c551eb902b0c/medium
-- file: 546fd146c83f428c.jpg
+  title: Businesswoman Working at Her Laptop
+  tags: caucasian, person, office, workspace, workplace, computer, table, macbook,
+    work, desk, laptop, typing, working, orange juice, scandi, scandinavian,
+    indoors, businesswoman, home office, busy
+  author: Karolina Grabowska
+  width: 5094
+  height: 3396
+  file: businesswoman-working-at-her-laptop.jpg
   horizontal: true
-  title: "Man and Woman Holding Ice Creams"
+- src: https://kaboompics.com/photo/13248/woman-macbook-laptop-blueberries
-
+  path: https://kaboompics.com/download/9ead4a6d2d0e928217a6b6c8a3070857/medium
-- file: 802a16cdf5ce3551.jpg
+  title: A woman works on a laptop at home
-  horizontal: true
+  tags: woman, work, laptop, home, office, workspace, workplace, working,
-  title: "Female hands typing on the remote wireless computer keyboard"
+    business, caucasian, blogger, indoors, busy, at work, notebook, technology,
-
+    macbook, desk
-- file: 0986f97be719fb9a.jpg
+  author: Karolina Grabowska
-  horizontal: true
+  width: 4480
-  title: "Blonde woman in a black jacket and ripped jeans by a green handrail"
+  height: 6720
-
+  file: a-woman-works-on-a-laptop-at-home-2.jpg
-- file: 1194d63fe36a8670.jpg
-  horizontal: true
-  title: "Stylish workspace with Macbook Pro"
-
-- file: 1366fdc9b9b277e4.jpg
-  horizontal: true
-  title: "Restaurants in old town of Nessebar, Bulgaria"
-
-- file: 2492baa9758df1e4.jpg
   horizontal: false
-  title: "Macaroons, roses, Macbook, coffee, marble"
+- src: https://kaboompics.com/photo/19648/finances-us-dollars-and-bitcoins-currency-money
-
+  path: https://kaboompics.com/download/d1ba418689a3b2932d4a796f9e9684e7/medium
-- file: 2854fd67ddbd6217.jpg
+  title: Finances - US Dollars and Bitcoins - Currency - Money
+  tags: money, finances, dollars, bitcoin, currency, Cryptocurrency
+  author: Karolina Grabowska
+  width: 6720
+  height: 4480
+  file: finances-us-dollars-and-bitcoins-currency-money-5.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/6653/cup-of-coffee-on-table-in-cafe-iphone-mobile-phone
+  path: https://kaboompics.com/download/dfd5cffdcf411354f111067433ab0ee0/medium
+  title: Cup of coffee on table in cafe
+  tags: interior, tech, technology, coffee, work, working, cafe, cappucino,
+    restaurant, late, indoors
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: cup-of-coffee-on-table-in-cafe.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4909/young-woman-sitting-on-the-sofa-and-working-on-her-laptop
+  path: https://kaboompics.com/download/402544bd7362f175ba76a14421e7b7dc/medium
+  title: Young woman sitting on the sofa and working on her laptop
+  tags: caucasian, girl, person, woman, minimal, sofa, minimalism, room, home,
+    coffee table, white, computer, table, apple macbook, macbook, technology,
+    laptop, typing, living room, working, young, scandi, scandinavian, couch,
+    indoors, businesswoman, blonde, macbook pro, marble, blogging, marble table,
+    white marble, at home, wooden floor, white floor
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5269/man-looking-out-to-sea
+  path: https://kaboompics.com/download/89e0745b1635281582558cd18b71d6d6/medium
+  title: Man looking out to sea
+  tags: adult, caucasian, ocean, person, sea, summer, man, young, lifestyle, male,
+    seaside, vacation, advertising, trip, outdoors, lonely, alone, bulgaria,
+    sunny beach, coastline, Nessebar, backpack, cost, one person, back view,
+    freedom, looking
+  author: Karolina Grabowska
+  width: 5445
+  height: 3630
+  file: man-looking-out-to-sea.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/13263/a-woman-eats-blueberries-and-works-on-a-laptop
+  path: https://kaboompics.com/download/10108b860530df7feb8b5ecace4f87ec/medium
+  title: A woman works on a laptop at home
+  tags: woman, work, laptop, home, office, workspace, workplace, working,
+    business, caucasian, blogger, indoors, busy, at work, notebook, technology,
+    macbook, desk
+  author: Karolina Grabowska
+  width: 4480
+  height: 6720
+  file: a-woman-works-on-a-laptop-at-home-3.jpg
   horizontal: false
-  title: "Pineapple in a swimming pool"
+- src: https://kaboompics.com/photo/6667/cup-of-coffee-macbook-laptop-glasses-on-table-in-cafe
-
+  path: https://kaboompics.com/download/ca4c79a985e811921e69dd7c1fb9db42/medium
-- file: 5358d787242861c4.jpg
+  title: Cup of coffee on table in cafe
+  tags: interior, tech, technology, coffee, work, working, cafe, cappucino,
+    restaurant, late, indoors
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: cup-of-coffee-on-table-in-cafe-2.jpg
   horizontal: true
-  title: "Small dogs on the grass"
+- src: https://kaboompics.com/photo/5810/woman-notebook-coffee
-
+  path: https://kaboompics.com/download/81d837ada6fa47820c49f60a93fc6419/medium
-- file: 5614ec7eb9034d04.jpg
+  title: Workplace with laptop on table at home
+  tags: interior, minimal, minimalist, minimalism, room, home, white, office,
+    workspace, workplace, tech, computer, table, technology, work, laptop,
+    scandi, scandinavian, indoors, white laptop, home office
+  author: Karolina Grabowska
+  width: 3990
+  height: 2660
+  file: workplace-with-laptop-on-table-at-home-3.jpg
   horizontal: true
-  title: "Fresh lemons"
+- src: https://kaboompics.com/photo/4896/businesswoman-working-at-her-laptop
-
+  path: https://kaboompics.com/download/bfb4401642f2708dd1555c933e29bc2c/medium
-- file: 5749e5c54a61a45e.jpg
+  title: Businesswoman Working at Her Laptop
+  tags: caucasian, person, office, workspace, workplace, computer, table, macbook,
+    work, desk, laptop, typing, working, orange juice, scandi, scandinavian,
+    indoors, businesswoman, home office, busy
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: businesswoman-working-at-her-laptop-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5575/cup-of-coffee-and-an-open-book
+  path: https://kaboompics.com/download/8fcb8094d6b0ec9a308ce8d630dfcd6b/medium
+  title: Cup of Coffee and an Open Book
+  tags: white, nobody, table, coffee, book, cup, relaxing, free time, opened book,
+    cafe, marble, marble table, black coffee
+  author: Karolina Grabowska
+  width: 4473
+  height: 2982
+  file: cup-of-coffee-and-an-open-book.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4017/woman-taking-notes
+  path: https://kaboompics.com/download/368a641fae11807d27f82900363e53f9/medium
+  title: Group of people brainstorming and taking notes
+  tags: work, business, design, brainstorming, teamwork, presentation, notes,
+    group, team, meeting, conference, discussion
+  author: Karolina Grabowska
+  width: 5079
+  height: 3386
+  file: group-of-people-brainstorming-and-taking-notes-4.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4916/woman-with-legs-on-the-coffee-table-wearing-converse-sneakers-and-working-on-her-laptop
+  path: https://kaboompics.com/download/f293c0e8fa73dd95bc6266e839a9ccce/medium
+  title: Young woman sitting on the sofa and working on her laptop
+  tags: caucasian, girl, person, woman, minimal, sofa, minimalism, room, home,
+    coffee table, white, computer, table, apple macbook, macbook, technology,
+    laptop, typing, living room, working, young, scandi, scandinavian, couch,
+    indoors, businesswoman, blonde, macbook pro, marble, blogging, marble table,
+    white marble, at home, wooden floor, white floor
+  author: Karolina Grabowska
+  width: 5303
+  height: 3535
+  file: young-woman-sitting-on-the-sofa-and-working-on-her-laptop-4.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4832/book-fairy-lights
+  path: https://kaboompics.com/download/ebdd80a5f2c99155ec9899026e7c337c/medium
+  title: Making Magic with Fairy Lights
+  tags: free time, decoration, lights, fairy lights, magic, bokeh
+  author: Karolina Grabowska
+  width: 5100
+  height: 3400
+  file: making-magic-with-fairy-lights.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4317/macbook-an-iphone-a-coffee-a-chocolate-and-a-notebook-in-a-bed
+  path: https://kaboompics.com/download/3fe507ad76fa9e741db3ebfc480ff343/medium
+  title: Woman working on a laptop while enjoying a breakfast coffee and chocolate
+    in bed
+  tags: white, Apple, macbook, coffee, work, notebook, laptop, business, bed,
+    chocolate, mac, sheets, notes, hotel
+  author: Karolina Grabowska
+  width: 5407
+  height: 3605
+  file: woman-working-on-a-laptop-while-enjoying-a-breakfast-coffee-and-chocolate-in-bed-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4473/woman-drinking-tea-and-reading-book
+  path: https://kaboompics.com/download/47bba18813217d848bac33de5509345d/medium
+  title: Woman drinking tea and reading book
+  tags: female, woman, home, book, tea, reading, free time, pillows, comfortable,
+    cozy, hygge, fruit tea, fairy lights
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: woman-drinking-tea-and-reading-book.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/15897/portrait-of-a-teen-girl
+  path: https://kaboompics.com/download/db7a18cbaa3ebb07081d5524b9ca3c80/medium
+  title: Portrait of a Teen Girl
+  tags: portrait, girl, pretty, caucasian, blonde, blue, eyes, yellow, female,
+    youth, teen, teenager, white
+  author: Karolina Grabowska
+  width: 4480
+  height: 6720
+  file: portrait-of-a-teen-girl.jpg
   horizontal: false
-  title: "People by a banquet table full with food"
+- src: https://kaboompics.com/photo/9296/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee
-
+  path: https://kaboompics.com/download/4b12adac0079d3af586b926da156289c/medium
-- file: 56614e12b2a7bd68.jpg
+  title: A woman works at a desk with a laptop and a cup of coffee
+  tags: laptop, macbook, computer, work, study, home office, office, desk,
+    technology, coffee, cappucino, late, workspace, workplace
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg
   horizontal: true
-  title: "Reading book at lake"
+- src: https://kaboompics.com/photo/13646/black-marble-stone-texture-high-resolution-background
-
+  path: https://kaboompics.com/download/2f7f250f7dfc162f478ea31b9a0b3023/medium
-- file: 77586f6ffa9fbc5e.jpg
+  title: Stone texture - high resolution background
-  horizontal: true
+  tags: stone, marble, granite, texture, background, flat, wallpaper
-  title: "Sunset over the sea"
+  author: Karolina Grabowska
-
+  width: 4480
-- file: 552683cc4e5f0e11.jpg
+  height: 6720
-  horizontal: true
+  file: stone-texture-high-resolution-background.jpg
-  title: "Variety of Pumpkins"
-
-- file: 3664593f945f0d8d.jpg
-  horizontal: true
-  title: "Fresh Cherries on a simple plate"
-
-- file: 529078594c496ec5.jpg
-  horizontal: true
-  title: "Closeup of lemon and mint with water"
-
-- file: a74c41b6fb7fdf34.jpg
-  horizontal: true
-  title: "Portraits of white sad cat"
-
-- file: a159fb2bff29fda4.jpg
-  horizontal: true
-  title: "Summer Campfire"
-
-- file: a4792dcce57ee13d.jpg
   horizontal: false
-  title: "Woman pouring water in Chemex filter coffee maker"
+- src: https://kaboompics.com/photo/7012/everything-you-need-to-work-from-your-bed
-
+  path: https://kaboompics.com/download/78a5a488c370410bba3705f26d42aa0e/medium
-- file: a12804818c417ea3.jpg
+  title: Everything you need to work from your bed
+  tags: workspace, computer, macbook, iphone, book, phone, mobile, work, laptop,
+    reading, above, bed, cell phone, bedding, bedroom, blogging, flatlay
+  author: Karolina Grabowska
+  width: 5350
+  height: 3567
+  file: everything-you-need-to-work-from-your-bed-2.jpg
   horizontal: true
-  title: "Dinner at reastaurant: Fish and Roasted Potatoes with Fresh Greek Salad"
+- src: https://kaboompics.com/photo/5809/woman-notebook-coffee
-
+  path: https://kaboompics.com/download/d6b4130591a3a61dac919f01845544da/medium
-- file: abb0721ac43820f9.jpg
+  title: Workplace with laptop on table at home
+  tags: interior, minimal, minimalist, minimalism, room, home, white, office,
+    workspace, workplace, tech, computer, table, technology, work, laptop,
+    scandi, scandinavian, indoors, white laptop, home office
+  author: Karolina Grabowska
+  width: 3990
+  height: 2660
+  file: workplace-with-laptop-on-table-at-home-4.jpg
   horizontal: true
-  title: "Green smoke bomb"
+- src: https://kaboompics.com/photo/7609/geometric-decoration-on-yellow-background
-
+  path: https://kaboompics.com/download/ca8ed81222a16495158179598187288a/medium
-- file: c86352559904d222.jpg
+  title: Geometric decoration on yellow background
+  tags: yellow, background, texture, geometric
+  author: Karolina Grabowska
+  width: 3053
+  height: 4580
+  file: geometric-decoration-on-yellow-background.jpg
   horizontal: false
-  title: "Group of people brainstorming and taking notes"
+- src: https://kaboompics.com/photo/4903/stylish-workspace-with-macbook-pro
-
+  path: https://kaboompics.com/download/ccd2b737116266fe67838d1f015b11c2/medium
-- file: cfb1041b0e366b9d.jpg
+  title: Stylish workspace with Macbook Pro
+  tags: interior, white, office, workspace, workplace, computer, apple macbook,
+    macbook, technology, desk, laptop, scandi, scandinavian, indoors, home
+    office
+  author: Karolina Grabowska
+  width: 5287
+  height: 3525
+  file: stylish-workspace-with-macbook-pro-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/5927/cocaine-on-a-smartphone-iphone
+  path: https://kaboompics.com/download/86222fc1606dfa8803534267c468b595/medium
+  title: Netflix Drug Lords From Narcos
+  tags: powder, coke, drugs, cocaine, drug, addiction, addict, crime, criminal,
+    narcos, pablo escobar, escobar, netflix, heroin, drug abuse, junkie
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: netflix-drug-lords-from-narcos.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/13647/black-marble-stone-texture-high-resolution-background
+  path: https://kaboompics.com/download/a4411ca899019a5c8a94cf47539356a5/medium
+  title: Stone texture - high resolution background
+  tags: stone, marble, granite, texture, background, flat, wallpaper
+  author: Karolina Grabowska
+  width: 6720
+  height: 4480
+  file: stone-texture-high-resolution-background-2.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/3925/how-to-use-graphic-design-to-sell-things-explain-things
+  path: https://kaboompics.com/download/6e7cccccb0d17ada16b4b1199b8961ba/medium
+  title: A visit to the bookstore
+  tags: books, bookstore, bookshop, knowledge
+  author: Karolina Grabowska
+  width: 5472
+  height: 3648
+  file: a-visit-to-the-bookstore.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/3357/books-purple-flowers-and-a-white-cup-on-a-wooden-stool-by-the-bed
+  path: https://kaboompics.com/download/3f610c32315ba4e3ae99f7f2a3dcaa79/medium
+  title: Books and purple flowers on a wooden stool by the bed
+  tags: flower, flora, home, reading, books, bed, plant, design, literature,
+    purple, violet
+  author: Karolina Grabowska
+  width: 5382
+  height: 3588
+  file: books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/2171/people-watching-a-presentation-in-a-room
+  path: https://kaboompics.com/download/ed13934d90b03a82e2ede7d8568e57a1/medium
+  title: People watching a presentation in a room
+  tags: people, display, presentation, watching, chairs, study, demonstration,
+    learning, powerpoint
+  author: Karolina Grabowska
+  width: 5238
+  height: 3492
+  file: people-watching-a-presentation-in-a-room.jpg
+  horizontal: true
+- src: https://kaboompics.com/photo/4780/sweet-buns-with-cream-cheese-inside
+  path: https://kaboompics.com/download/b5cbd63e03df9ab13431051159c1f704/medium
+  title: Sweet buns with cream cheese inside
+  tags: cake, food, delicious, pastry, dessert, cream, baked, cream cheese
+  author: Karolina Grabowska
+  width: 2421
+  height: 3631
+  file: sweet-buns-with-cream-cheese-inside.jpg
   horizontal: false
-  title: "Designer living room interior with a wooden box table and a light blue carpet"
+- src: https://kaboompics.com/photo/18210/laptop-white-flowers-on-marble-table
-
+  path: https://kaboompics.com/download/1af5e76a739d6a6c51a8a8da16de81bb/medium
-- file: d366fc3df37fe65b.jpg
+  title: Home Office - Laptop - organizer & cup of coffee
+  tags: homeoffice, telecommuting, workspace, workplace, desk, work, interior,
+    equipment, accessories
+  author: Karolina Grabowska
+  width: 6168
+  height: 4112
+  file: home-office-laptop-organizer-and-cup-of-coffee.jpg
   horizontal: true
-  title: "Woman holding a smartphone"
-
-- file: da6119936bd7f566.jpg
-  horizontal: true
-  title: "Woman with legs on the coffee table, wearing converse sneakers and working on her laptop"
-
-- file: de6d0fd1feebb6a2.jpg
-  horizontal: false
-  title: "Jack's Bar & Restaurant in Gdynia, Poland"
-
-- file: e8f47263360d96af.jpg
-  horizontal: true
-  title: "Early spring garden"
-
-- file: ecfed9fbf8a58836.jpg
-  horizontal: true
-  title: "Morning coffee"
-
-- file: f7f04e6a834b1959.jpg
-  horizontal: true
-  title: "Blurred city lights reflected in the water at night"
-
-- file: f61b5f865012f200.jpg
-  horizontal: true
-  title: "A Trip to Venice, Italy"
-
-- file: f94e788e72666bfd.jpg
-  horizontal: false
-  title: "Young woman sitting on the sofa and working on her laptop"
-
-- file: f746d9f7fa60be79.jpg
-  horizontal: true
-  title: "Umbrellas and lounge chairs on Sunny Beach, Bulgaria"
-
-- file: ff54b43b56632883.jpg
-  horizontal: true
-  title: "Seagull on a car roof"
-
-- file: ff23569f1a45865d.jpg
-  horizontal: false
-  title: "Holding a pink rose"

src/pages/_docs/browser-support.md

@@ -11,11 +11,11 @@ For instance, Tabler no longer uses **vendor prefixes** in styles that are known
 
 Browser|Version
 ---|----------
-<img src="/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge|last 3 versions
+<img src="{{ site.base }}/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge|last 3 versions
-<img src="/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox|last 3 versions, ESR
+<img src="{{ site.base }}/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox|last 3 versions, ESR
-<img src="/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome|last 3 versions
+<img src="{{ site.base }}/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome|last 3 versions
-<img src="/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari|last 3 versions
+<img src="{{ site.base }}/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari|last 3 versions
-<img src="/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera|last 3 versions
+<img src="{{ site.base }}/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera|last 3 versions
-<img src="/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron|last 3 versions
+<img src="{{ site.base }}/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron|last 3 versions
-<img src="/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave|last 3 versions
+<img src="{{ site.base }}/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave|last 3 versions
-<img src="/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi|last 3 versions
+<img src="{{ site.base }}/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi|last 3 versions

src/pages/_includes/cards/card-image.html

@@ -1,14 +1,18 @@
+{% assign img-id = include.img-id | default: 1 %}
 <div class="card">
 	<div class="row row-0">
 		<div class="col-3{% if include.right %} order-md-last{% endif %}">
-         <img src="{{ site.base }}/static/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover card-img-{% if include.right %}end{% else %}start{% endif %}" alt="{{ include.img-alt | default: 'Card side image' }}">
+			{% assign class = "w-100 h-100 object-cover" %}
+			{% if include.right %}{% assign class = class | append: " card-img-end" %}{% else %}{% assign class = class | append: " card-img-start" %}{% endif %}
+			{% include ui/photo.html id=img-id class=class %}
 		</div>
 		<div class="col">
 			<div class="card-body">
 				{% if include.title %}
 				<h3 class="card-title">{{ include.title }}</h3>
 				{% endif %}
-            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
+					incidunt, iste, itaque minima
 					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 			</div>
 		</div>

src/pages/_includes/cards/card.html

@@ -8,7 +8,7 @@
 	{% else %}
 
 		{% if include.img-top %}
-		<div class="card-img-top img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/9f36332564ca271d.jpg)"></div>
+		{% include ui/photo.html id=img-id class="card-img-top" ratio="21x9" id=7 %}
 		{% endif %}
 
 		{% if include.status-top %}
@@ -104,7 +104,8 @@
 		{% endif %}
 
 		{% if include.img-bottom %}
-		<div class="card-img-bottom img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/56614e12b2a7bd68.jpg)"></div>
+
+		{% include ui/photo.html id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
 		{% endif %}
 
 		{% if include.progress %}

src/pages/_includes/cards/company-employees.html

@@ -23,7 +23,7 @@
 					<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
 				</div>
 			</td>
-			<td><a href="" class="text-muted">{% include ui/icon.html icon="dots" %}</a></td>
+			<td><a href="{{ site.base }}" class="text-muted">{% include ui/icon.html icon="dots" %}</a></td>
 		</tr>
 		{% endfor %}
 	</table>

src/pages/_includes/ui/photo.html

@@ -0,0 +1,21 @@
+<!-- Photo -->
+{% if include.id %}
+{% assign id = include.id | default: 1 %}
+{% if include.horizontal %}
+{% assign photos = site.data.photos | where: 'horizontal', true %}
+{% else %}
+{% assign photos = site.data.photos %}
+{% endif %}
+{% assign photo = photos[id] %}
+
+{% if include.background %}
+<div{% if include.class %} class="{{ include.class }}"{% endif %} style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"></div>
+{% elsif include.ratio %}
+<div class="img-responsive img-responsive-{{ include.ratio }}{% if include.class %} {{ include.class }}{% endif %}" style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"></div>
+{% else %}
+<img src="{{ site.base }}/static/photos/{{ photo.file }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="{{ photo.title }}" />
+{% endif %}
+
+{% else %}
+{% include ui/svg.html width=640 height=480 border=true class=include.class %}
+{% endif %}

src/pages/cards.html

@@ -156,7 +156,7 @@ menu: base.cards.base
 		{% include cards/card-image.html title="Card with left side image" %}
 	</div>
 	<div class="col-lg-6">
-		{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
+		{% include cards/card-image.html title="Card with right side image" right=true img-id=3 %}
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include cards/card.html img-top=true title="Card with top image" %}

src/pages/lightbox.html

@@ -10,8 +10,8 @@ menu: base.lightbox
 <div class="row row-cols-6 g-3">
 	{% for photo in photos %}
 	<div class="col">
-		<a data-fslightbox="gallery" href="/static/photos/{{ photo.file }}">
+		<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ photo.file }}">
-			<img src="/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="rounded">
+			{% include ui/photo.html id=forloop.index0 class="rounded border" ratio="1x1" %}
 		</a>
 	</div>
 	{% endfor %}

src/pages/photogrid.html

@@ -0,0 +1,99 @@
+---
+title: Photogrid
+page-header: Photogrid
+menu: extra.photogrid
+libs: fslightbox
+---
+
+{% capture svg %}
+{% include ui/svg.html width=640 height=480 border=true %}
+{% endcapture %}
+
+<div class="row g-2 g-md-3">
+	<div class="col-lg-6">
+		<div class="row g-2 g-md-3">
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[5].file }}">
+					{% include ui/photo.html id=5 class="rounded-3 border" ratio="3x1" %}
+				</a>
+			</div>
+			<div class="col-6">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[6].file }}">
+					{% include ui/photo.html id=6 class="rounded-3 border" ratio="1x1" %}
+				</a>
+			</div>
+			<div class="col-6">
+				<div class="row g-2 g-md-3">
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[7].file }}">
+							{% include ui/photo.html id=7 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[8].file }}">
+							{% include ui/photo.html id=8 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[9].file }}">
+							{% include ui/photo.html id=9 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[10].file }}">
+							{% include ui/photo.html id=10 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[16].file }}">
+					{% include ui/photo.html id=16 class="rounded-3 border" ratio="4x1" %}
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="row g-2 g-md-3">
+			<div class="col-6">
+				<div class="row g-2 g-md-3">
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[14].file }}">
+							{% include ui/photo.html id=14 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[15].file }}">
+							{% include ui/photo.html id=15 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[12].file }}">
+							{% include ui/photo.html id=12 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[13].file }}">
+							{% include ui/photo.html id=13 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="col-6">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[1].file }}">
+					{% include ui/photo.html id=1 class="rounded-3 border" ratio="1x1" %}
+				</a>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[4].file }}">
+					{% include ui/photo.html id=4 class="rounded-3 border" ratio="4x1" %}
+				</a>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[17].file }}">
+					{% include ui/photo.html id=17 class="rounded-3 border" ratio="3x1" %}
+				</a>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/sign-in-cover.html

@@ -23,6 +23,6 @@ body-class: d-flex flex-column bg-white
 		</div>
 	</div>
 	<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
-		<div class="bg-cover h-100 min-vh-100" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file}})"></div>
+		{% include ui/photo.html id=11 class="bg-cover h-100 min-vh-100" background=true %}
 	</div>
 </div>

src/scss/_variables.scss

@@ -8,6 +8,7 @@ $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
 $enable-rfs: false !default;
+$enable-cssgrid: true !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
@@ -369,6 +370,10 @@ $size-values: map-merge($spacers, (
 // Aspect ratios
 $aspect-ratios: (
   "1x1": 100%,
+  "2x1": calc(1 / 2 * 100%),
+  "1x2": calc(2 / 1 * 100%),
+  "3x1": calc(1 / 3 * 100%),
+  "1x3": calc(3 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),

src/scss/ui/_images.scss

@@ -1,10 +1,15 @@
 .img-responsive {
+  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
   background: no-repeat center/cover;
-  padding-top: percentage(.75);
+  padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+  padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
 }
 
 @each $key, $ratio in $aspect-ratios {
   .img-responsive-#{$key} {
-    padding-top: $ratio;
+    --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }