New theme functionality ideas

[grantmasterflash]

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

[Jan]

Hi,

THEMES Management - if you upload a theme, in fact you will overwrite the parameters for:
- global configuration
- categories view links
- category view link... that is why there is still one theme (you have saved your theme on your disc and if you will change it, you will upload it)... it is not about the desing only... it is about other parameters (display name, description, ...)

"SHADOWS" - I think, this is very powerful, if you want to change the shadow, you only do one image and copy via FTP, you need not to play with 8 images (in fact, there are no designer that do the themes, only users are changing their own ... so for them it is very easy to change the background image....)

I'd like to set the background area of the whole space used for phocagallery ... just change the CSS


Quick buttons to rotate and create thumbs I am working on it (but I am not sure I it will be multiple) I want to do an icon im image list (if there should be an icon for multiple rotating, it must be only one icon there - in toolbar panel)


Thank you for your ideas,
Jan

[grantmasterflash]

I guess the problem I have with the Shadows is that if every time you change the size of your images you need to create new shadows. Either you scale it and deal with the quality problem or you have 8 images on your hard drive that you need to fashion into a new frame anyway. In addition to that if I have three sizes of images I still need to create three unique shadows.

"THEMES Management - if you upload a theme, in fact you will overwrite the parameters for:
- global configuration
- categories view links
- category view link... that is why there is still one theme (you have saved your theme on your disc and if you will change it, you will upload it)... it is not about the desing only... it is about other parameters (display name, description, ...)"

I'm not sure I'm understanding you here.

Grant

[Jan]

every time you change the size of your images
??? I changed the size of my thumbnails one time and I think 99% of Phoca Gallery users did the same

THEMES - It is relating to saving parameters in Joomla! (in global configuration, for every menu links ... every menu links has own parameters, so theme overwrite the paremeters for these menu links)

[grantmasterflash]

Programmers are rarely accused of having very much vision. Myself included. The program I just finished for a corporation was originally about a 1000 line long script and nothing more than a script really. At the time of taking on the job I couldn't adding anything more to it that would take it over 1000 lines. I just invoiced for the job and it's finished at 18,000 lines. Where did the rest of the code come from? User needs.

Anyway never assume you know what 99% of your users do. They may only be doing what they're doing because it's too painful to do it any other way. I flew to California for a week to do nothing other than sit in the corner of a room and watch technicians use my code - I was astonished about what they were attempting to do that I had never written in support for. I asked them why they didn't tell me sooner and they're reply was they thought they were asking too much already.

So lets keep in mind I'm the guy with 6000 images in 100 categories and after this summer it will probably balloon closer to 10,000 so I might not be thinking along the same lines as someone that wants to have a gallery of 20 or 30 pictures. Also the fact that I'm here now means I see a lot of potential in Phocagallery and you too. I've been using php galleries for quite a few years and although I don't agree with some of the directions the galleries have gone (bigger, slower) I do acknowledge that open source apps become the product of their users. Phocagallery is in it's infancy so I think it would be a good time to not program in limitations that will be very hard to change later (ie, what Joomla! has had to do).

So I guess I have a question then. When you install a new theme it changes data in menu links to the components? Its in my humble opinion that themes should be separate from code or at least as much as possible. I'm going to look into your code so I understand it more so I don't ask so many dumb questions.

Thanks
Grant

[Jan]

Anyway never assume you know what 99% of your users do I understand, it is only about my motivation but If I said something about 99%, I still think about this (the other way is how to implement some new feature into the project )


The parameters are saved in database, not in the code, every menu link has own parameters, so these will be changed.

If we speak only about the Theme for all Phoca Gallery menu links, it is easy to change the CSS or HTML, that is all, but Joomla has menu links and every menu link can have own design.

The THEME behaviour doesn't use this to 100% becuase, there is:
- categories view (all menu links to categories view)
- cateogry view (all menu links to specifed category)
- global configuration

There is no possibility to select only one menu link to change the theme (only the group - e.g. all categories view menu links)


See:
https://www.phoca.cz/articles/joomla/com ... id-joomla/

There are no dumb questions... Every question leads to increase the project. Without questions, only images without categories and detail views will be shown...

[grantmasterflash]

My main interest (being human) is of course self serving. There are things I want Phocagallery to do so I don't have to keep bridging an external gallery into Joomla. Besides I see advantage to "taking out the trash" every once in a while. Gallery2 is an amazing gallery but it has so much weight now that it's slow. However, I'd love to see the best features implemented in Phocagallery as long as it doesn't make it slow. Most of those features have to do with themes.

Here are MY needs/wants

Seperate theme/parameters per menu item
A simple drop down in the menu prefs to override theme would do

I've been looking at the code and the location of the theme in assets is very intertwined. Having said that I see very few places where I think a variable for $THEME couldn't be inserted. Keep in mind I've not actually hacked on it at all so it's just an observation.

I think the rest of my needs I can get around by creating shadows in the correct size, and editing CSS files. It's my opinion though that the current hard coded (for size) shadow images is not a long term solution. I fear that at some point you'll be spending all your time pointing people to the section of the docs explaining that. Maybe a quick fix would be to only offer images in the sizes of the shadow files so at least people won't be seeing photos overlapping shadows. I'm going to be scaling shadows to different sizes and see how bad the quality gets without recreating them. Maybe it will be decent enough that in-between sizes could be had by Phocagallery doing a simple scale?

I once complained about a problem in an editor and the developer jumped all over me and YELLED "I wish people would stop asking me that" and my immediate thought was that if the problem were fixed it would get real quiet. It was a feature that had already been developed but it wasn't intuitive enough to find without reading the entire manual twice (and who does that?). As Phocagallery becomes very popular the number of questions taking you away from developing will grow too.

Grant

[Jan]

... the number of questions taking you away from developing will grow too .. yes, you right...

I will take a look at the Theme (if there is a possibility to implement specifed menu links)

Jan

[grantmasterflash]

No hurry, I'd just like you to know where I'm thinking so you can keep it in the back of your mind. Add it to your list of possible things to do and then prioritize I guess.

Hopefully as the community of people using Phocagallery grows some of us can answer forum questions to help keep you free to do more important stuff.

Grant

[Jan]

yes, it is in the feature request list...

Hopefully as the community of people using Phocagallery grows some of us can answer forum questions to help keep you free to do more important stuff I hope so, I only have time to answer the forum questions ...