I'm starting to
Posted: 02 Jun 2008, 11:54
I'm starting to work on some nice themes for Phocagallery and would like to throw some ideas out there that will effect what I come up with.
In brief,
Theme management through the gui
Theme/settings per gallery
Effectively "scalable" imageframes separate from themes
Different imageframe per size or use eg. to identify gallery from photo
Background patterns separate from themes
Whole gallery background color/pattern
Quick buttons to rotate photos 90 degrees
Create thumbs individually or by gallery (a button?)
JavaScript or CSS in themes
JFIF info in detail view, captions and comments
THEMES Management
The current templating system uses one theme at a time in components/com_phocagallery/assets/images. When you load a new theme it overrides the current one. There isn't anyway of switching themes or assigning unique themes to each gallery.
I'm not sure where the different themes should go. Currently it appears the one theme is in assets. Perhaps we build out this directory one more level deep.
/components/com_phocagallery/assets/theme/bluetheme
/components/com_phocagallery/assets/theme/bluetheme/phocagallery.css
/components/com_phocagallery/assets/theme/bluetheme/images/
/components/com_phocagallery/assets/theme/redtheme
....
Inside of each theme directory would be themename.css file and an images directory so the theme would be self contained and the css file would always be named the same. There'd be a pointer in each gallery referencing the theme and other attributes (columns, thumbnail sizes etc..) relevant to that gallery. When setting up the gallery there'd be a drop down menu listing all the themes. There'd be a global interface to upload or delete themes and set global parameters. Probably a lot of code could be lifted from com_templates. I don't think this stage would take hardly any code at all to get working...
Imageframes aka. "SHADOWS"
Currently a statically sized image called a "shadow" is in assets/images. This is very limiting and could be expanded. I think shadows should be split apart from themes and grown to be more useful. Other galleries have implemented full fledged imageframes that encompass simple shadows like what Phocagallery uses or just about any frame or border you could think up. Gallery2 uses either CSS or images for this that scale to any thumbnail size you put in and don't require the user to make new ones for each thumbnail size. They way this is handled is there are actually 8 images that make up an imageframe - four corners and four sides and a text file that describes them. The sides are one pixel wide and stretched whereas the corners are used without scaling. A CSS imageframe is very simply a CSS <div> or similar specifying the attributes of the border and as you would expect are very fast to render. The problem with the imageframe system using images in gallery2 is that it's slow to render when viewing a gallery because for every photo you have 9 photos to draw. This gets very painful. It seems that it would make sense that since you only render thumbnails once the frame should be rendered when making thumbnails. Perhaps the getOrCreateThumbnail function would take into consideration a user specified imageframe setting for imageframe. To create the thumbnails for the medium res it would calculate the width/height of the frame and use GDs imagecopymerge function to merge all four corners, four sides and the resized thumbnail into one new image. This would happen for each of the three sizes and the imageframe could be different for each size. Or the "size" metaphor could be stretched a bit and include small (for admin gui), medium image, medium gallery, and large image for the popup. That way galleries and images in galleries could have different imageframes identifying them as galleries or images. This way we could specify an image from the gallery to be the gallery image or use the random functionality already in place (preferably both, I like specifying the image for the gallery).
/components/com_phocagallery/assets/frames/photo
/components/com_phocagallery/assets/frames/wb_26px
/components/com_phocagallery/assets/frames/blackshadow
....
Also because we're using the imagecopymerge function we could also overlay images on top. Think about having a persons name in script overtop a wide border. Positioning could be specified as bottom-center, bottom-right, bottom-left etc. depending on the frame I guess. I haven't though this part out much as no gallery has been able to give me this functionality but I've always wanted it. I would have loved to have a wide imageframe with my name in script centered at the bottom without me having to create it manually. Note: perhaps the download button would point to the origional unmolested image in full size...
"PATTERNS"
Currently in the theme you can specify the background color for the box surrounding the photo as well as border color etc.. This could be separately configurable from the theme like imageframes. A drop down menu would select theme, and pattern/color. If color was set then pattern wouldn't be available etc.. Patterns could be in
/components/com_phocagallery/assets/patterns/
/components/com_phocagallery/assets/patterns/lightswirl
/components/com_phocagallery/assets/patterns/darkswirl
/components/com_phocagallery/assets/patterns/blackkeys
....
Patterns would be small gif or png tilable fill patterns. If it seems like I'm going overboard to just set a background pattern to an image bear with me for a minute.
Whole Gallery background
Here's where the patterns come in. Currently you can specify background color for the area surrounding a photo, I'd like to set the background area of the whole space used for phocagallery. Since photo galleries are a very visual element setting the background would be useful. You don't want to make your entire site a dark color just to set a mood for your photo album because then readability suffers everywhere. If we allow the background of the entire Phocagallery area (maybe it's a <div> or table?) be set then we can have a site that's predominately white but have a nice dark artistic gallery with large white imageframes to show off our photography. The background could be either a color or a fill pattern mentioned above.
Quick buttons to rotate and create thumbs
I'd like to see image rotate buttons that aren't buried in a general purpose "edit photo" area. It's very common to need to rotate a large number of photos that we've just uploaded. I'm sure there's the argument that you could have rotated them first but that's not always an option. Other galleries bury the rotate function deep inside an "edit image" section so each image has to be edited one at a time to rotate the photos. This should be avoided. For less used functions that's fine but rotating should be quick and multi-image friendly. I envision being able to click on 20 photos in a list and clicking a "rotate clockwise" button and all 20 are rotated. Gallery1 had a drop down under each image for the admin that allowed rotation one by one which wasn't too painful. Gallery2 forced me to click on the image, click on edit, click on the rotation tab, click on rotate clockwise, click on save and then back all the way out to the next image. It was so painful I started doing it from the command prompt with ImageMagick!
Create thumbs by gallery
If we have separate settings per gallery (image sizes, columns, themes) then we should be able to create thumbs by gallery too. Also if the imageframes mentioned above were implemented creating all thumbs might be very painful time wise. Can you imagine creating 6000 thumbnails (x3) if you decided to change your sizes? Also if we clicked the "Create thumbs" button it would take care of deleting the old thumbnails so we don't have to log in remotely to the gallery and do it. That should be easy.
Javascript or CSS in themes
This idea just came to me so it may very well be doable already. I don't always want the icons visible. Think about having a transparent icon for download or details and have the real image show up onmousover. This could make for some very clean looking galleries.
Provisions for showing JFIF image details, captions, comments. Captions could probably be shown with image name. The other two could be shown in a modal box or popup specifically for them. Currently comments for categories are allowed. Accommodating for photo comments is more demanding because of popup box screen real estate. The theme system will need to provide for those options.
Photo of example Per gallery configuration
URL
Photo of Different imageframes per gallery and ideas about comment popups..
URL
In brief,
Theme management through the gui
Theme/settings per gallery
Effectively "scalable" imageframes separate from themes
Different imageframe per size or use eg. to identify gallery from photo
Background patterns separate from themes
Whole gallery background color/pattern
Quick buttons to rotate photos 90 degrees
Create thumbs individually or by gallery (a button?)
JavaScript or CSS in themes
JFIF info in detail view, captions and comments
THEMES Management
The current templating system uses one theme at a time in components/com_phocagallery/assets/images. When you load a new theme it overrides the current one. There isn't anyway of switching themes or assigning unique themes to each gallery.
I'm not sure where the different themes should go. Currently it appears the one theme is in assets. Perhaps we build out this directory one more level deep.
/components/com_phocagallery/assets/theme/bluetheme
/components/com_phocagallery/assets/theme/bluetheme/phocagallery.css
/components/com_phocagallery/assets/theme/bluetheme/images/
/components/com_phocagallery/assets/theme/redtheme
....
Inside of each theme directory would be themename.css file and an images directory so the theme would be self contained and the css file would always be named the same. There'd be a pointer in each gallery referencing the theme and other attributes (columns, thumbnail sizes etc..) relevant to that gallery. When setting up the gallery there'd be a drop down menu listing all the themes. There'd be a global interface to upload or delete themes and set global parameters. Probably a lot of code could be lifted from com_templates. I don't think this stage would take hardly any code at all to get working...
Imageframes aka. "SHADOWS"
Currently a statically sized image called a "shadow" is in assets/images. This is very limiting and could be expanded. I think shadows should be split apart from themes and grown to be more useful. Other galleries have implemented full fledged imageframes that encompass simple shadows like what Phocagallery uses or just about any frame or border you could think up. Gallery2 uses either CSS or images for this that scale to any thumbnail size you put in and don't require the user to make new ones for each thumbnail size. They way this is handled is there are actually 8 images that make up an imageframe - four corners and four sides and a text file that describes them. The sides are one pixel wide and stretched whereas the corners are used without scaling. A CSS imageframe is very simply a CSS <div> or similar specifying the attributes of the border and as you would expect are very fast to render. The problem with the imageframe system using images in gallery2 is that it's slow to render when viewing a gallery because for every photo you have 9 photos to draw. This gets very painful. It seems that it would make sense that since you only render thumbnails once the frame should be rendered when making thumbnails. Perhaps the getOrCreateThumbnail function would take into consideration a user specified imageframe setting for imageframe. To create the thumbnails for the medium res it would calculate the width/height of the frame and use GDs imagecopymerge function to merge all four corners, four sides and the resized thumbnail into one new image. This would happen for each of the three sizes and the imageframe could be different for each size. Or the "size" metaphor could be stretched a bit and include small (for admin gui), medium image, medium gallery, and large image for the popup. That way galleries and images in galleries could have different imageframes identifying them as galleries or images. This way we could specify an image from the gallery to be the gallery image or use the random functionality already in place (preferably both, I like specifying the image for the gallery).
/components/com_phocagallery/assets/frames/photo
/components/com_phocagallery/assets/frames/wb_26px
/components/com_phocagallery/assets/frames/blackshadow
....
Also because we're using the imagecopymerge function we could also overlay images on top. Think about having a persons name in script overtop a wide border. Positioning could be specified as bottom-center, bottom-right, bottom-left etc. depending on the frame I guess. I haven't though this part out much as no gallery has been able to give me this functionality but I've always wanted it. I would have loved to have a wide imageframe with my name in script centered at the bottom without me having to create it manually. Note: perhaps the download button would point to the origional unmolested image in full size...
"PATTERNS"
Currently in the theme you can specify the background color for the box surrounding the photo as well as border color etc.. This could be separately configurable from the theme like imageframes. A drop down menu would select theme, and pattern/color. If color was set then pattern wouldn't be available etc.. Patterns could be in
/components/com_phocagallery/assets/patterns/
/components/com_phocagallery/assets/patterns/lightswirl
/components/com_phocagallery/assets/patterns/darkswirl
/components/com_phocagallery/assets/patterns/blackkeys
....
Patterns would be small gif or png tilable fill patterns. If it seems like I'm going overboard to just set a background pattern to an image bear with me for a minute.
Whole Gallery background
Here's where the patterns come in. Currently you can specify background color for the area surrounding a photo, I'd like to set the background area of the whole space used for phocagallery. Since photo galleries are a very visual element setting the background would be useful. You don't want to make your entire site a dark color just to set a mood for your photo album because then readability suffers everywhere. If we allow the background of the entire Phocagallery area (maybe it's a <div> or table?) be set then we can have a site that's predominately white but have a nice dark artistic gallery with large white imageframes to show off our photography. The background could be either a color or a fill pattern mentioned above.
Quick buttons to rotate and create thumbs
I'd like to see image rotate buttons that aren't buried in a general purpose "edit photo" area. It's very common to need to rotate a large number of photos that we've just uploaded. I'm sure there's the argument that you could have rotated them first but that's not always an option. Other galleries bury the rotate function deep inside an "edit image" section so each image has to be edited one at a time to rotate the photos. This should be avoided. For less used functions that's fine but rotating should be quick and multi-image friendly. I envision being able to click on 20 photos in a list and clicking a "rotate clockwise" button and all 20 are rotated. Gallery1 had a drop down under each image for the admin that allowed rotation one by one which wasn't too painful. Gallery2 forced me to click on the image, click on edit, click on the rotation tab, click on rotate clockwise, click on save and then back all the way out to the next image. It was so painful I started doing it from the command prompt with ImageMagick!
Create thumbs by gallery
If we have separate settings per gallery (image sizes, columns, themes) then we should be able to create thumbs by gallery too. Also if the imageframes mentioned above were implemented creating all thumbs might be very painful time wise. Can you imagine creating 6000 thumbnails (x3) if you decided to change your sizes? Also if we clicked the "Create thumbs" button it would take care of deleting the old thumbnails so we don't have to log in remotely to the gallery and do it. That should be easy.
Javascript or CSS in themes
This idea just came to me so it may very well be doable already. I don't always want the icons visible. Think about having a transparent icon for download or details and have the real image show up onmousover. This could make for some very clean looking galleries.
Provisions for showing JFIF image details, captions, comments. Captions could probably be shown with image name. The other two could be shown in a modal box or popup specifically for them. Currently comments for categories are allowed. Accommodating for photo comments is more demanding because of popup box screen real estate. The theme system will need to provide for those options.
Photo of example Per gallery configuration
URL
Photo of Different imageframes per gallery and ideas about comment popups..
URL