October 24, 2021
I was able to finally re-design the Art Gallery to incorporate the ‘FancyBox’ JS library, which makes it SUPER easy to view any images on the page.
Related link for the ‘FancyBox’ library:
I specifically modeled it after this example that they provided:
This is the end result:
Also, I was able to re-design the main site, and also scrape random palettes from ‘Lospec’(‘https://lospec.com/') and also determine if the background and foreground palette colors were light or dark based upon a few random posts and articles. The end result is that the page reaches out to flip a coin to change its color scheme every minute, which is pretty a cool idea on my part. Here are the resources I used as reference materials:
- https://www.codespeedy.com/convert-rgb-to-hex-color-code-in-python/
- https://stackoverflow.com/questions/22603510/is-this-possible-to-detect-a-colour-is-a-light-or-dark-colour
These are the few sites I ripped off in terms of styling ideas:
I was also able to add a random artwork using portions of my ‘Art Gallery Creator’ project’s code as well, and incorporated the idea of using a transparent background using this random post I found:
The Art Gallery page was created via my project named ‘ArtGalleryCreator’, which is an art gallery page that literally creates itself.
Here’s the RandomCSSColorGenerator’ project which is my Python 3 project which rips color schemes from the Lospec website (‘https://lospec.com/'):
import os, random, requests, math
from pathlib import Path
from pathlib import PurePath
from pathlib import PosixPath
import itertools
# Taken from here:
# https://www.codespeedy.com/convert-rgb-to-hex-color-code-in-python/
def determine_light_or_dark_color(value):
value = value.lstrip('#')
lv = len(value)
rgb_color = tuple(int(value[i:i+lv//3], 16) for i in range(0, lv, lv//3))
# Taken from here:
# https://stackoverflow.com/questions/22603510/is-this-possible-to-detect-a-colour-is-a-light-or-dark-colour
[r,g,b]=rgb_color
hsp = math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
if (hsp>127.5):
return 'light'
else:
return 'dark'
def grab_lospec_palette():
response = requests.get("https://lospec.com/palette-list/load?colorNumberFilterType=max&colorNumber=8&page=1&tag=&sortingType=default")
palette_length = len(response.json()['palettes'])
palette_list = []
for i in range(palette_length):
palette_list.append((response.json()['palettes'][i]['colorsArray']))
random_palette = random.choice(palette_list)
return random_palette
def create_css_sheet_with_lospec_palette(random_palette):
print('Now entering create_css_sheet_with_lospec_palette() function...')
print('Checking random_palette to make sure it has at least 4 colors...')
if len(random_palette) < 4:
print('random_palette doesn\'t have 4 colors... Skipping')
else:
print('random_palette DOES have at least 4 colors. Proceeding...')
content = str('#page_background {')
content += str('position: fixed;')
content += str('top: 0; left: 0; width: 100%; height: 100%;')
# content = str('body { background-color: #')
# content += str(random_palette[0])
# content += str('; ')
content += str('background-image: url("')
# Borrowed code from 'Art Gallery Creator' project:
art_gallery_path = '/var/www/musimatic/images/ArtGallery'
os.chdir(art_gallery_path)
picture_directories = sorted(filter(os.path.isdir, os.listdir(art_gallery_path)))
print('\npicture_directories: ' + str(picture_directories))
directory = random.choice(picture_directories)
print('\ndirectory: ' + str(directory))
picture_paths_jpg = (x.resolve() for x in Path(directory).glob("*.jpg"))
picture_paths_png = (x.resolve() for x in Path(directory).glob("*.png"))
picture_paths = itertools.chain(picture_paths_jpg, picture_paths_png)
picture_paths_strings = [str(p) for p in picture_paths]
print('\npicture_paths_strings: ' + str(picture_paths_strings))
picture_path = random.choice(picture_paths_strings)
print('\npicture_path: ' + str(picture_path))
regular_image_version = str(picture_path).replace('/var/www/musimatic/', 'https://musimatic.xyz/')
content += str(regular_image_version)
content += str('");')
content += str('background-repeat: no-repeat; background-attachment: fixed;')
content += str('background-size: 100%;')
content += str('opacity: 0.4; filter:alpha(opacity=40); z-index: -1; }')
content += str('#top_banner_div { border-top: 3px solid #')
content += str(random_palette[0])
content += str('; border-bottom: 3px solid #')
content += str(random_palette[0])
content += str('; background-color: #')
content += str(random_palette[1])
content += str(';')
# Determine if 'random_palette[1]' color is dark or light:
print('random_palette[1] hexcode: ' + str(random_palette[1]))
dark_or_light_palette_1 = determine_light_or_dark_color(random_palette[1])
print('dark_or_light_palette_1: ' + str(dark_or_light_palette_1))
if dark_or_light_palette_1 == 'dark':
content += str('color: white; text-align: center; }')
if dark_or_light_palette_1 == 'light':
content += str('color: black; text-align: center; }')
content += str('#left_menu_div { font-size: 15px; width: 134px; float: left; clear: both;')
content += str('font-family: Arial, Helvetica, sans-serif; }')
content += str('#left_menu_div a { color: white; }')
content += str('#left_menu_div a:hover { text-decoration:none;')
content += str('text-shadow:-1px 0 red,0 1px red,1px 0 red,0 -1px red,-1px -1px red,1px 1px red,-1px 1px red,1px -1px red;')
content += str('transition: 0.3s }')
content += str('.left_menu_section { border-radius: 5px; overflow: hidden; box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.75);')
content += str('margin: 0 auto 15px 0; }')
content += str('.left_menu_section p { margin: 0; }')
content += str('.left_menu_top_bar { text-align:center; ')
# Determine if 'random_palette_2' is dark or light:
print('random_palette[2] hexcode: ' + str(random_palette[2]))
dark_or_light_palette_2 = determine_light_or_dark_color(random_palette[2])
print('dark_or_light_palette_2: ' + str(dark_or_light_palette_2))
if dark_or_light_palette_2 == 'dark':
content += str('color: white')
if dark_or_light_palette_2 == 'light':
content += str('color: black')
content += str('; box-shadow: 0 16px 20px rgba(255,255,255,.15) inset;')
content += str('background-color: #')
content += str(random_palette[2])
content += str('; margin-bottom: 0px; }')
content += str('.left_menu_bottom_section { padding: 4px; background-color: #')
content += str(random_palette[3])
content += str(';')
# Determine if 'random_palette[3]' color is dark or light:
print('random_palette[3] hexcode: ' + str(random_palette[3]))
dark_or_light_palette_3 = determine_light_or_dark_color(random_palette[3])
print('dark_or_light_palette_3: ' + str(dark_or_light_palette_3))
if dark_or_light_palette_3 == 'dark':
content += str('color: white; }')
if dark_or_light_palette_3 == 'light':
content += str('color: black; }')
# Place css sheet in '/var/www/musimatic/css' directory:
with open('/var/www/musimatic/css/index.css', 'w') as f:
f.write(content)
f.close()
def create_css_sheet_with_grey_purple_scheme():
print('Now entering create_css_sheet_with_grey_purple_scheme() function...')
content = str('body { background-color: grey; }')
content += str('#top_banner_div { border-top: 3px solid blue; border-bottom: 3px solid blue; background-color: purple; ')
content += str('color: white; text-align: center; }')
content += str('#left_menu_div { font-size: 15px; width: 134px; float: left; clear: both; ')
content += str('font-family: Arial, Helvetica, sans-serif; }')
content += str('#left_menu_div a { color: white; }')
content += str('#left_menu_div a:hover { text-decoration:none;')
content += str('text-shadow:-1px 0 red,0 1px red,1px 0 red,0 -1px red,-1px -1px red,1px 1px red,-1px 1px red,1px -1px red;')
content += str('transition:0.3s }')
content += str('.left_menu_section { border-radius: 5px; overflow: hidden; box-shadow: 4px 4px 10px -5px rgba(0,0,0,0.75);')
content += str('margin: 0 auto 15px 0; }')
content += str('.left_menu_section p { margin: 0; }')
content += str('.left_menu_top_bar { color: lightblue; box-shadow: 0 16px 20px rgba(255,255,255,.15) inset; text-align: center;')
content += str('margin-bottom: 0px; }')
content += str('.left_menu_bottom_section { padding: 4px; background-color: black; }')
# Place css sheet in '/var/www/musimatic/css' directory:
with open('/var/www/musimatic/css/index.css', 'w') as f:
f.write(content)
f.close()
def main():
random_number = random.randint(1, 100)
if random_number < 50:
print('HEADS! Revert back to the grey purple color scheme!')
create_css_sheet_with_grey_purple_scheme()
elif random_number > 50:
print('TAILS! Let\'s change the color palette!')
random_palette = grab_lospec_palette()
create_css_sheet_with_lospec_palette(random_palette)
if __name__ == "__main__":
main()
Here’s my ‘ArtGalleryCreator’ Python 3 project, which is an art gallery page that literally creates itself:
import os
from pathlib import Path
from pathlib import PurePath
from pathlib import PosixPath
import pprint
import itertools
from wand.image import Image as wand_image
import wand
import pendulum
def create_thumbnails():
print('CALLING create_thumbnails() FUNCTION...')
art_gallery_path = '/var/www/musimatic/images/ArtGallery'
os.chdir(art_gallery_path)
picture_directories = list(filter(os.path.isdir, os.listdir(art_gallery_path)))
for directory in picture_directories:
print('Checking for thumbnails directory')
thumbs_path = str('/var/www/musimatic/images/ArtGallery/' + str(directory) + '/thumbs')
print('thumbs_path: ' + str(thumbs_path))
# Check if a thumbnails directory exist
thumbs_path_exists = Path(thumbs_path).exists()
if thumbs_path_exists:
print('thumbs_path_exists is true: thumbnail directory exists')
# if not thumbails directory:
if not thumbs_path_exists:
print('thumbs_path_exists is false: thumbnail directory does NOT exist')
# mkdir thumbnails
# https://csatlas.com/python-create-directory/
Path(thumbs_path).mkdir()
# Create globs for each file type
picture_paths_jpg = (x.resolve() for x in Path(directory).glob("*.jpg"))
picture_paths_png = (x.resolve() for x in Path(directory).glob("*.png"))
picture_paths = itertools.chain(picture_paths_jpg, picture_paths_png)
picture_paths_strings = [str(p) for p in picture_paths]
# Cycle through each picture_path string
print('Cycling through each picture_path string')
for picture_path in picture_paths_strings:
# Use PosixPath() to split path parts accordingly
current_filename = PosixPath(picture_path).name
current_stem = PosixPath(picture_path).stem
current_parent = PosixPath(picture_path).parent
print('current_filename: ' + str(current_filename))
print('current_stem: ' + str(current_stem))
print('current_parent: ' + str(current_parent))
thumb_image_version = str(str(current_parent) + '/thumbs/thumb_' + current_filename)
# https://www.geeksforgeeks.org/python-check-if-a-file-or-directory-exists/
thumb_image_version_exists = Path(thumb_image_version).exists()
print('thumb_image_version: ' + str(thumb_image_version))
print('thumb_image_version_exists: ' + str(thumb_image_version_exists))
# if not thumbnails/image.ext:
if not thumb_image_version_exists:
print('Creating new thumbnail image...')
# create_thumbnail(path_to_image, thumbnail_path)
# with Image(filename = picture_path) as image:
# https://www.geeksforgeeks.org/wand-thumbnail-function-python/
with wand_image(filename = picture_path) as image:
with image.clone() as thumbnail:
thumbnail.thumbnail(175, 150)
thumbnail.save(filename=thumb_image_version)
def create_thumbnails_gifs():
print('CALLING create_thumbnails() FUNCTION...')
art_gallery_path = '/var/www/musimatic/images/ArtGallery'
os.chdir(art_gallery_path)
picture_directories = list(filter(os.path.isdir, os.listdir(art_gallery_path)))
for directory in picture_directories:
print('Checking for thumbnails directory')
thumbs_path = str('/var/www/musimatic/images/ArtGallery/' + str(directory) + '/thumbs')
print('thumbs_path: ' + str(thumbs_path))
# Check if a thumbnails directory exist
thumbs_path_exists = Path(thumbs_path).exists()
if thumbs_path_exists:
print('thumbs_path_exists is true: thumbnail directory exists')
# if not thumbails directory:
if not thumbs_path_exists:
print('thumbs_path_exists is false: thumbnail directory does NOT exist')
# mkdir thumbnails
Path(thumbs_path).mkdir()
# Create globs for each file type
picture_paths_gif = (x.resolve() for x in Path(directory).glob("*.gif"))
picture_paths = itertools.chain(picture_paths_gif)
picture_paths_strings = [str(p) for p in picture_paths]
# Cycle through each picture_path string
print('Cycling through each picture_path string')
for picture_path in picture_paths_strings:
# Use PosixPath() to split path parts accordingly
current_filename = PosixPath(picture_path).name
current_stem = PosixPath(picture_path).stem
current_parent = PosixPath(picture_path).parent
print('current_filename: ' + str(current_filename))
print('current_stem: ' + str(current_stem))
print('current_parent: ' + str(current_parent))
thumb_image_version = str(str(current_parent) + '/thumbs/thumb_' + current_filename)
thumb_image_version_exists = Path(thumb_image_version).exists()
print('thumb_image_version: ' + str(thumb_image_version))
print('thumb_image_version_exists: ' + str(thumb_image_version_exists))
# if not thumbnails/image.ext:
if not thumb_image_version_exists:
print('Creating new thumbnail gif image...')
# Taken from this SO post:
# https://stackoverflow.com/questions/9988517/resize-gif-animation-pil-imagemagick-python
# TODO: Create thumbnail versions of GIF images
def main():
print('CALLING main() FUNCTION...')
with open('/var/www/musimatic/pythonprojectwebsites/ArtGallery/artgallery.html', 'w') as f:
f.write('<!DOCTYPE html>')
f.write('<html>')
f.write('<head>')
f.write('<title>Art Gallery</title>')
f.write('<meta charset="utf-8"/>')
f.write('<link rel="stylesheet" href="https://musimatic.xyz/css/artgallery.css" type="text/css"/>')
f.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>')
f.write('<link rel="shortcut icon" type="image/ico" href="favicon/artpalette.ico"/>')
f.write('</head>')
f.write('<body>')
print('CREATING LEFT MENU')
f.write('<div id="left_menu">')
f.write('<h1>Art Gallery</h1>')
f.write('<a href="http://www.musimatic.xyz">BACK TO HOMEPAGE</a>')
current_date_eastern = pendulum.now('America/New_York').format('dddd, MMMM D, YYYY')
current_time_eastern = pendulum.now('America/New_York').format('hh:mm:ss A')
f.write('<p>Last Time Updated:</p>')
f.write('<p>' + str(current_date_eastern) + ' at ' + str(current_time_eastern) + ' EDT</p>')
art_gallery_path = '/var/www/musimatic/images/ArtGallery'
os.chdir(art_gallery_path)
picture_directories = sorted(filter(os.path.isdir, os.listdir(art_gallery_path)))
for directory in picture_directories:
picture_directory_anchor = str('<a href="#' + str(directory) + '">' + str(directory) + '</a>')
f.write(picture_directory_anchor)
f.write('<br />')
f.write('</div>')
print('CREATING IMAGE GALLERY FOR RIGHT SIDE')
f.write('<div id="right_art_gallery">')
print('WORKING ON CREATING IMG TAGS')
for directory in picture_directories:
picture_directory_header = str('<h1 id="' + str(directory) + '">' + str(directory) + '</h1>')
f.write(picture_directory_header)
f.write('<br />')
# SO Post on Globs:
# https://stackoverflow.com/questions/4568580/python-glob-multiple-filetypes
picture_paths_jpg = (x.resolve() for x in Path(directory).glob("*.jpg"))
picture_paths_png = (x.resolve() for x in Path(directory).glob("*.png"))
# TODO: Once I fix the 'create_thumbnails_gifs()' function, return to this:
# picture_paths_gif = (x.resolve() for x in Path(directory).glob("*.gif"))
# picture_paths = itertools.chain(picture_paths_jpg, picture_paths_png, picture_paths_gif)
picture_paths = itertools.chain(picture_paths_jpg, picture_paths_png)
# SO Post on string replacement:
# https://stackoverflow.com/questions/9452108/how-to-use-string-replace-in-python-3-x
# picture_paths_strings = [str(p).replace('/var/www/musimatic/', 'https://musimatic.xyz/') for p in picture_paths]
picture_paths_strings = [str(p) for p in picture_paths]
# pprint.pprint(picture_paths_strings)
for picture_path in picture_paths_strings:
current_filename = PosixPath(picture_path).name
current_stem = PosixPath(picture_path).stem
current_parent = PosixPath(picture_path).parent
regular_image_version = str(picture_path).replace('/var/www/musimatic/', 'https://musimatic.xyz/')
thumb_image_version = str(str(current_parent) + '/thumbs/thumb_' + current_filename)
thumb_image_version = str(thumb_image_version).replace('/var/www/musimatic/', 'https://musimatic.xyz/')
print('thumb_image_version: ' + str(thumb_image_version))
picture_img_tag = str('<a data-fancybox="gallery" href="' + str(regular_image_version) + '" data-fancybox="' + str(current_filename) + '" data-caption="' + str(current_filename) + '"><img src="' + str(thumb_image_version) + '"/></a>')
f.write(picture_img_tag)
# Sealing off right side of page's div tag for the image gallery portion:
f.write('</div>')
f.write('<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>')
f.write('<script type="text/javascript" src="https://musimatic.xyz/js/artgallery.js"></script>')
f.write('</body>')
f.write('</html>')
print('ART GALLERY COMPLETE!')
if __name__ == '__main__':
create_thumbnails()
# create_thumbnails_gifs()
main()