Built with 11ty, Liquid and Bootstrap
'npm run build' or 'eleventy' 'npm run serve' or 'eleventy --serve' runs on port 8080 'npm run deploy' to upload
- About
- Gallery
- Individual pics
Deployed Site : [kingspook.com] Git Repo: [github.com/jamrod/kingspook]
I used Bootstrap mostly for responsive design. Bootstrap had an issue with chrome on mobile and the images not resizing correctly:
- To Fix: I needed to wrap everything in my header in a div with class="container" and have the class on the images to "img-fluid"
I used Python to create md files for the art work and to update them when I made changes. Liquid and 11ty can use the .md files to create pages on the final site, the files just have data as tags wrapped in "---" marks. I initially created a Python script to loop through the folder containing the art files and create .md files for each one so each picture would have its own page.
In order to paginate all the images I created a linked-list with all the .md files by setting 'previous' and 'next' values. I had tried to order them with numbers or setting them all to the same dates but it hadn't worked out because liquid and Python were not sorting the arrays the same. I linked them all together by incrementing the date by a day with each file and removing the page number. Liquid sorts by date so the order they appear in the gallery will match the order if you click through one at a time. Here's the script to do it:
import os
def get_date_list(month, day):
day = int(day)
day += 1
month = month
if day > 30:
day = '01'
month = '05'
elif day < 10:
day = f"0{day}"
else:
day = str(day)
return [month, day]
def process_file(filename, prev, dates):
date_string = f"date: 2020-{dates[0]}-{dates[1]}\n"
new_line = f"previous: {prev}\n"
new_content = ''
count = 0
with open(filename, 'r') as read_file:
for line in read_file:
text = line
if 'date' in line:
text = date_string
elif '---' in line:
count += 1
if count > 1:
text = new_line
new_content += text
return new_content
month = '04'
day = 0
prev = ''
files_list = []
art_l = os.listdir('pages/art/l')
art_l.sort()
for i, file in enumerate(art_l):
filename = f"pages/art/l/{file}"
compiled_path = f"/{filename[0:-3]}/"
if not '.json' in filename:
dates = get_date_list(month, day)
month = dates[0]
day = dates[1]
new_text = process_file(filename, prev, dates)
prev = compiled_path
if i > 0:
files_list[-1][1] += f"next: {compiled_path}\n---\n"
files_list.append([filename, new_text])
art_s = os.listdir('pages/art/s')
art_s.sort()
for i, file in enumerate(art_s):
filename = f"pages/art/s/{file}"
compiled_path = f"/{filename[0:-3]}/"
if not '.json' in filename:
dates = get_date_list(month, day)
month = dates[0]
day = dates[1]
new_text = process_file(filename, prev, dates)
prev = compiled_path
files_list[-1][1] += f"next: {compiled_path}\n---\n"
if i == len(art_s) - 1:
new_text += 'next: \n---\n'
files_list.append([filename, new_text])
for item in files_list:
with open(item[0], 'w') as write_file:
write_file.write(item[1])
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent