Heck, I'm so amazing I can screw up something in 5 minutes that'll take someone 5 hours to repair!
I Love It. I Hate It. I Love It ...
- Thread starter pete
- Start date
The continuing saga of my love/hate relationship with Gallery 3. AKA, "I code hard so you get a nicer looking product."
So, I decided to try adding some information I have on my big chart o' makes and models onto my gallery. Trial and error led me to almost what I wanted, which is the nice table that's on this sample page.
Tables are incredibly easy to make either by hand or with a WYSIWYG HTML editor. I have Macromedia Dreamweaver MX and it's 3 clicks. However, that's regular HTML. Not Gallery 3 HTML.
So, here's how it went:
* Create a new table in Dreamweaver.
* Paste in table entries from my website.
* Check to see if it looks good in a browser.
* Test with the W3C Markup Validation Service to make sure code is 100% compliant -- in other words, "Should work in any browser."
* Paste code into the "Edit Album" field in Gallery 3.
* Cry because all the entries are screwed up.
Alignment? Negative. Gigantic blank space between header and table? You betcha. I spend about 15-20 minutes to see if it's a problem with the theme I'm using or some odd little setting in Gallery 3. Nope.
I Google to see if Gallery 3 uses some sort of odd table format. Yah. They do. Explanation page. *Sigh*
So, I try just modifying my code with Gallery 3's addition. Fails. So I Google for this "caption" tag that I've never used, but Gallery 3 seems to. Ah. It's CSS being called by HTML. Grand.
If you check the above linky for that CSS-aware table, it's got this nice, neat layout:
<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
<TH>Header 1 <TD>Cell 1 <TD>Cell 2
<TR id="row2">
<TH>Header 2 <TD>Cell 3 <TD>Cell 4
<TR id="row3">
<TH>Header 3 <TD>Cell 5 <TD>Cell 6
</TABLE>
Shiny. I copy and paste it into Gallery 3 and it works like a champ. The next step is to modify the code for my use: I axe the caption, I change the <TH> stuff to <TD> -- I've got three columns -- and axe row 3. Additionally, so I can read the code easier, I insert a couple carriage returns between each "row."
I test. It fails. It doesn't like the carriage returns between the lines. Hunh? That's different. Well, I can cope with that. If I'm really interested, I could always add a couple comment tags.
So, I fill in the top row of my table with no further drama. However, the second row has multiple lines. OK. So I copy and paste one of my multi-lines into one block (call it "Cell 3" in the above example). Crash. Burn. Why? Well, I'm using the the very standard, very compatible <span> tag for each line of text. Gallery 3 doesn't like that. It wants the XHTML tag <br />. Arrrrrgggggghhhhh.
OK, so I do all of that for Cell 3 and proceed to fill in the next cell. Test. Crash. Burn. Why? Again it's a carriage return: Gallery 3 wants a tab between things like, say, the 5 and the < in the above example, not a carriage return. I do a face palm. I must say that it's more painful when you wear glasses.
Anyhow, after sorting all that, I think the page came out quite nicely. If anyone wants the full code I used, drop me a line. You've also got to install Gallery 3's HTML Purifier plug-in.
So, I decided to try adding some information I have on my big chart o' makes and models onto my gallery. Trial and error led me to almost what I wanted, which is the nice table that's on this sample page.
Tables are incredibly easy to make either by hand or with a WYSIWYG HTML editor. I have Macromedia Dreamweaver MX and it's 3 clicks. However, that's regular HTML. Not Gallery 3 HTML.
So, here's how it went:
* Create a new table in Dreamweaver.
* Paste in table entries from my website.
* Check to see if it looks good in a browser.
* Test with the W3C Markup Validation Service to make sure code is 100% compliant -- in other words, "Should work in any browser."
* Paste code into the "Edit Album" field in Gallery 3.
* Cry because all the entries are screwed up.
Alignment? Negative. Gigantic blank space between header and table? You betcha. I spend about 15-20 minutes to see if it's a problem with the theme I'm using or some odd little setting in Gallery 3. Nope.
I Google to see if Gallery 3 uses some sort of odd table format. Yah. They do. Explanation page. *Sigh*
So, I try just modifying my code with Gallery 3's addition. Fails. So I Google for this "caption" tag that I've never used, but Gallery 3 seems to. Ah. It's CSS being called by HTML. Grand.
If you check the above linky for that CSS-aware table, it's got this nice, neat layout:
<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
<TH>Header 1 <TD>Cell 1 <TD>Cell 2
<TR id="row2">
<TH>Header 2 <TD>Cell 3 <TD>Cell 4
<TR id="row3">
<TH>Header 3 <TD>Cell 5 <TD>Cell 6
</TABLE>
Shiny. I copy and paste it into Gallery 3 and it works like a champ. The next step is to modify the code for my use: I axe the caption, I change the <TH> stuff to <TD> -- I've got three columns -- and axe row 3. Additionally, so I can read the code easier, I insert a couple carriage returns between each "row."
I test. It fails. It doesn't like the carriage returns between the lines. Hunh? That's different. Well, I can cope with that. If I'm really interested, I could always add a couple comment tags.
So, I fill in the top row of my table with no further drama. However, the second row has multiple lines. OK. So I copy and paste one of my multi-lines into one block (call it "Cell 3" in the above example). Crash. Burn. Why? Well, I'm using the the very standard, very compatible <span> tag for each line of text. Gallery 3 doesn't like that. It wants the XHTML tag <br />. Arrrrrgggggghhhhh.
OK, so I do all of that for Cell 3 and proceed to fill in the next cell. Test. Crash. Burn. Why? Again it's a carriage return: Gallery 3 wants a tab between things like, say, the 5 and the < in the above example, not a carriage return. I do a face palm. I must say that it's more painful when you wear glasses.
Anyhow, after sorting all that, I think the page came out quite nicely. If anyone wants the full code I used, drop me a line. You've also got to install Gallery 3's HTML Purifier plug-in.
I guess this is the main problem with many of these "content management systems" (or whatever category tag they may have). They often don't separate contents from form well enough. And they let the user (have to) use inline code that is then parsed and analysed by some engine, a process often fails.
(and don't get me started on databases. Databases are evil.)
Well, yes and no. Gallery 1 and 2 were these behemoths that could do just about anything and fairly well, too. However, they were user-unfriendly and required a person with good computer skills to maintain it.
Gallery 3 was designed specifically to do two things: display photos and display videos. Really easy user and admin interfaces, too. The problem is that if you want to do anything above and beyond that, it's annoyingly difficult.
The "yes and no" comes from the fact that there is documentation on how to create a theme (colors, font choice, etc.) but there's no documentation to do what I just did. HTML coding? Bah, beyond most users. That's the general feeling I get. It just strikes me as odd: why have a feature and not document it? Because too many people would ask questions about it?
Remember: Gallery 3 = MySQL back-end, so there's your database.
As a matter of fact, one of the reasons why I didn't do a space-saving drop-down menu is because Forms aren't supported at all. Allegedly. You may have seen that I have drop-down menus for each maker ....
In my continuing website saga, I wanted to do one thing: change the size of the fonts for my tables o' links (that's the big box at the bottom of this page, for example, that has the header of "General Info," "Galleries," and "Modern Website(s)"). In HTML, you used to be able to use something like ...
... and that'd work great. However, times have changed and now you have to use CSS (Cascading Style Sheets) where you list all your various text attributes. Um. OK.
I tried creating the table and slapped the CSS in it, as I would with normal code. It looked fine when I previewed it, but I had used HTML and CSS not Gallery 3 HTML and CSS, so it didn't do much of anything when I copied the code into Gallery 3.
So,
1. I took a look at documentation for the theme (read "colors and fonts") I use for Gallery 3. I use something called "Grey Dragon," which is almost universally accepted by Gallery 3 users as the best theme because it's so configure-able. I had to create a directory on my webserver, a couple subdirectories and ...
2. A stand-alone CSS file called "custom.css." I've never done a stand-alone CSS file. My copy of Dreamweaver 2004 "supports" CSS, but really doesn't have the tools to create a stand-alone page. So, I hit da Google. I looked at the W3C School article on CSS and fonts, as W3C is the organization that "built" (or "maintains") the standard. It just served to confuse me.
However, I brought home my work computer. It happens to have Dreamweaver from Adobe Creative Suite 5.5, which is about a year old and about 7 years newer than my copy of Dreamweaver. So I played around with it and found a way to create a separate .CSS file in this version of Dreamweaver. I then studied the output. Here's the entire contents of the file:
What this code means is, "Any text in the row called 'row 2' in the table should be set to 9pt."
I just created a text file with that code in it, named it "custom.css" and uploaded it to the server. Instant font change!
Only took me an hour to get this result. Well, it's good to learn a new thing every day ....
Code:
<font size="9">This is some text!</font>... and that'd work great. However, times have changed and now you have to use CSS (Cascading Style Sheets) where you list all your various text attributes. Um. OK.
I tried creating the table and slapped the CSS in it, as I would with normal code. It looked fine when I previewed it, but I had used HTML and CSS not Gallery 3 HTML and CSS, so it didn't do much of anything when I copied the code into Gallery 3.
So,
1. I took a look at documentation for the theme (read "colors and fonts") I use for Gallery 3. I use something called "Grey Dragon," which is almost universally accepted by Gallery 3 users as the best theme because it's so configure-able. I had to create a directory on my webserver, a couple subdirectories and ...
2. A stand-alone CSS file called "custom.css." I've never done a stand-alone CSS file. My copy of Dreamweaver 2004 "supports" CSS, but really doesn't have the tools to create a stand-alone page. So, I hit da Google. I looked at the W3C School article on CSS and fonts, as W3C is the organization that "built" (or "maintains") the standard. It just served to confuse me.
However, I brought home my work computer. It happens to have Dreamweaver from Adobe Creative Suite 5.5, which is about a year old and about 7 years newer than my copy of Dreamweaver. So I played around with it and found a way to create a separate .CSS file in this version of Dreamweaver. I then studied the output. Here's the entire contents of the file:
Code:
#row2 td a {
font-size: 9pt;
}What this code means is, "Any text in the row called 'row 2' in the table should be set to 9pt."
I just created a text file with that code in it, named it "custom.css" and uploaded it to the server. Instant font change!
Only took me an hour to get this result. Well, it's good to learn a new thing every day ....
Now that really too hard. Since I started using Life Writer, instead of DreamWeaver, my life has been much easier. But then, I inherit the CSS and such for the work I do. So I am mostly doing pages with video links, art, and such.
Continuing on CSS:
Now that I know that CSS does work -- after a fashion -- that means I can use CSS drop-down menus. That's good because I can do the "list" thing and have lots of additional options that use less space, both vertically and horizontally. I could even replace the "shortcut" menu (Home, Makes A-E, etc.). It'll take some research and trial and error. I tried one of the CSS menu generators and instead of a horizontal menu, I got a vertical one with some not-too-pleasing shading. Thankfully, there are a zillion CSS menus I could use. (Hmm. I also have to see how and if I could use the same CSS for menus that have different items. I think that will be easy, tho.)
Now that I know that CSS does work -- after a fashion -- that means I can use CSS drop-down menus. That's good because I can do the "list" thing and have lots of additional options that use less space, both vertically and horizontally. I could even replace the "shortcut" menu (Home, Makes A-E, etc.). It'll take some research and trial and error. I tried one of the CSS menu generators and instead of a horizontal menu, I got a vertical one with some not-too-pleasing shading. Thankfully, there are a zillion CSS menus I could use. (Hmm. I also have to see how and if I could use the same CSS for menus that have different items. I think that will be easy, tho.)
(I can post some html code and the corresponding screen shot next week, if you want, just to demonstrate the power of CSS.)
Thing is, CSS will help you style your page. I am not sure if it's cool to use CSS to create menus (that will fail on half of the browsers and nearly all netbooks that don't have >= 768px of vertical screen resolution) and other stuff it wasn't really intended for.
I really hate to say that, but in a way I must (this hurts) admit that Apple really has spent some heavy thinking re user interaction. Question should not be "how do I make that menu" but rather "how would a user find the desired info fastest". Simplicity wears a black turtleneck. (this hurts even more, but he got a point there)
In extremis, we wouldn't have menus and the like but just two panels - "find" and "take a tour". No, "take the tour" if the search field was empty when the button was pressed. Rename the button to "Go" ("Do it" is already taken). There.
Thing is, CSS will help you style your page. I am not sure if it's cool to use CSS to create menus (that will fail on half of the browsers and nearly all netbooks that don't have >= 768px of vertical screen resolution) and other stuff it wasn't really intended for.
I really hate to say that, but in a way I must (this hurts) admit that Apple really has spent some heavy thinking re user interaction. Question should not be "how do I make that menu" but rather "how would a user find the desired info fastest". Simplicity wears a black turtleneck. (this hurts even more, but he got a point there)
In extremis, we wouldn't have menus and the like but just two panels - "find" and "take a tour". No, "take the tour" if the search field was empty when the button was pressed. Rename the button to "Go" ("Do it" is already taken). There.
A bit of the Apple philosophy definitely was, "If the user HAS to open the manual, it's too complicated." That philosophy made things consistent: cmd+p is "print" in most Macintosh apps. Windows? Even Microsoft apps aren't consistent.
When doing any updates to my websites, I do keep in mind that some people might be browsing using tablets or other things, so I'm trying to juggle usability, clarity and the behemoth that is Gallery 3. A lot of different sets of rules!
There are a couple of things that I do have to assume, though. One of those is that you have something better than a dial-up connection. I've also mentioned elsewhere that, when I initially created saxpics.com, 800x600 was big and 1024x768 was huge. Now, 1280x1024 is a minimum monitor resolution, and I try to find the biggest, best pictures out there.
As far as a CSS menu goes, I'll see what I can do with it. I can't do HTML or Java because of limitations in Gallery 3. I've tried.
When doing any updates to my websites, I do keep in mind that some people might be browsing using tablets or other things, so I'm trying to juggle usability, clarity and the behemoth that is Gallery 3. A lot of different sets of rules!
There are a couple of things that I do have to assume, though. One of those is that you have something better than a dial-up connection. I've also mentioned elsewhere that, when I initially created saxpics.com, 800x600 was big and 1024x768 was huge. Now, 1280x1024 is a minimum monitor resolution, and I try to find the biggest, best pictures out there.
As far as a CSS menu goes, I'll see what I can do with it. I can't do HTML or Java because of limitations in Gallery 3. I've tried.
Well, that wasn't a fun hour and 1/2. I tried several CSS menus -- even really old ones -- and I couldn't get them to be horizontal. They'd stay vertical and be all over random parts of the page. Absolutely no difference for vertical menus. I additionally had the spacing issues that I've mentioned before. For g. whiz, I also tried a pure HTML 5 menu. Didn't work either.
I think it's probable that the CSS I'm limited to in Gallery 3, unless I feel like playing with the source code of Gallery 3, is limited to text effects.
Oh, well ....
I think it's probable that the CSS I'm limited to in Gallery 3, unless I feel like playing with the source code of Gallery 3, is limited to text effects.
Oh, well ....
Ah, yes. Jim spelling the name properly does help ....
I might take a look, but I've disliked Microsoft for web authoring ever since I found out about all the extra HTML code that their other HTML WYSIWYG programs, Expression and Front Page, insert.
I might take a look, but I've disliked Microsoft for web authoring ever since I found out about all the extra HTML code that their other HTML WYSIWYG programs, Expression and Front Page, insert.
Gawd, how embarrassing. These long work hours and too many gigs are turning me into a ghost on this site. NOTE: A friend of mine felt she had to start a blog to use LiveWriter as an editor. You don't; just close the account setup it you only want the HTML code.
Doesn't work with Live Essentials 2012 - no way past setting up some account. (or I'm doin' sumthin' wrong)
FWIW, there are a ton of Microsoft products that are available for free if you're a student or inexpensive if you work for an academic institution. It's through Microsoft's DreamSpark website. You can get Microsoft Expression Web Studio -- MS's suite of web-publishing apps -- there, as well as programming tools.
I mentioned someplace that I actually bought Dreamweaver MX 2004 some time after it had been replaced with another version of the product. I remember it being pretty cheap. That reminds me to see if I can find a newer version on a used/old software website ....
I mentioned someplace that I actually bought Dreamweaver MX 2004 some time after it had been replaced with another version of the product. I remember it being pretty cheap. That reminds me to see if I can find a newer version on a used/old software website ....
I'll take a look this weekend.
