myblog2_1.png

Draggable Slideshow

created: 1258772476|%e %B %Y, %H:%M
ed-johnson

Let's see if this works.

Cool!
I found a bit of javascript that can create a Draggable Slideshow. Details are here:
http://www.codelifter.com/main/javascript/draggableslideshow.html

Note to self: Fix the CSS on this site!

overLIB Demo

created: 1252793335|%e %B %Y, %H:%M
Ed Johnson

I propose Wikidot consider adding the free overLIB javascript library and creating a module to use it's features. overLIB is for creating popups and tooltips and has many, many, many configurable options.

I created a small demo and even wrote up a rough draft of the documentation:




Hallelujah!

created: 1239135639|%e %B %Y, %H:%M
Ed Johnson

I just noticed I finally made guru! I guess it just took taking on a new project that required creating a lot of pages to get me over the hump.

Boy, it would have been nice to get some special notification from Wikidot. And cake! I might just have to raise a glass to celebrate tonight. ;)

Photo Gallery Update

created: 1239130571|%e %B %Y, %H:%M
Ed Johnson

It didn't take Michal and company to help solve some of the issues I presented in my Photo Gallery post a couple of days ago.

We now have an order option that can be used in the "simple" [[gallery...]] mode. For example:

[[gallery order="dateAdded" size="medium"]]

the order option currently supports name (the default if not specified), nameDesc, dateAdded and dateAddedDesc.

I expect to see a random option in the near future.

This change is going to make it really easy to set up a family photo album site. I envision setting up the improved gallery module in a live template. Then, all I have to do is let my family create a new page, add some descriptive text ("Our vacation in Maui - winter 2009") and save the page. Once they use the new Multi File Uploader to upload their photos, they're done and we have an instant addition to our photo album!

Photo Gallery

created: 1238771698|%e %B %Y, %H:%M
Ed Johnson

Now that the Multi File Uploader is a reality for Pro accounts (coming in a month for free accounts), I am anxious to start a photo gallery site for my family and extended family. One thing I noticed is that when I uploaded multiple files, I got a result that was not desirable. Initially, I didn't pay attention to the order of the files as they were being uploaded.

My images are all named sequentially, by number, with the files names my camera created. I think the files did not upload in numerical order because my [[gallery]] did not display them in order. As a workaround, I tried to explicitly define the order by using the following code:

[[gallery viewer="false"]]
: 100_4709.JPG
: 100_4710.JPG
: 100_4711.JPG
<snip>
: 100_4726.JPG
: 100_4727.JPG
: 100_4728.JPG
[[/gallery]]

Still no love. I got the same order as if I didn't list the images individually. I then did a more controlled "experiment" to try and see what's happening.
[edit: Not true. I made a typo in my [[gallery]] ... [[/gallery]] block when testing that wasn't allowing the images to be displayed in the order I wanted. The above method DOES WORK as a workaround.]

Here's the sequence of events:

Select files to be uploaded

Tip: In Windows, select the files from the bottom, up (i.e click on the last file in the sequence and then shift-click the first file so they get listed in alpha/numerical order in the filename field).

MultiFileUpload1.jpg

Preview the file list

Here's the order the files were listed by the Wikidot uploader:

MultiFileUpload2.jpg

Wikidot's file display

Wikidot does sort the file list for display purposes.

MultiFileUpload3.jpg

Conclusions

  • Even though I was careful to populate my filename field in the order I wanted the files displayed/uploaded, it didn't work. The files ended up being listed in some order that was probably determined by my operating system.
  • After the files were uploaded, the gallery module displayed them in the reverse order they were uploaded. I'm sure the thinking is that you would generally want newest files uploaded to be displayed first.
  • It looks like I'm going to have to ask for some new parameters to be added to the gallery module so I can control the order of the images being displayed.
  • [edit: In spite of my silly typo getting me all worked up, I think adding some sort options is still a good idea. Being able to create a template with a simple [[gallery sort="sort_option"]] would keep things simple for non-techie users so they don't have to create a large gallery block to control the order of images.]
  • It would also be nice if some options could be built into the multi file uploader to rearrange the file list before starting the upload.

My Test Gallery

I want these displayed in the order 100_4709.JPG, 100_4710.JPG … 100_4728.JPG, but can't control that right now (see the workaround notes above - it can be done).

Animoto

created: 1238551024|%e %B %Y, %H:%M
Ed Johnson

My very hip and cool Aunt Mar and Uncle Pete (DraugalisPhotography.com) have set up an account on Animoto and had some fun with pictures of my grandkids. Photos courtesy of my very hip and cool wife!


Ava Baby and Her Big Brother (Myles)


Wikidot Rocks!

Wikidot API

created: 1237952153|%e %B %Y, %H:%M
Ed Johnson

I've had a chance to play around a bit with the new Wikidot API and so far it looks promising! I posted a sample script. I'll have more content related to installing and using Python for Windows later on.

Steal This CSS! Part 2

created: 1236028026|%e %B %Y, %H:%M
Ed Johnson

Read Part 1

If you looked at my CSS file in Part 1, you'll see that I don't exactly follow conventional formatting. Essentially, I took each page element's CSS block and converted into individual lines, each with a single CSS style on it. For example, a "conventional" section of CSS might look like this:

#header h1 {
    position: absolute;
    text-align: top;
    width: 360px;
    padding: 0;
    margin: 0;
    border-bottom: none;
    left: 10px;
    top: 25px;
    font-size: 1.5em;
}

Using MS Excel with a couple of simple macros and formulas, I split each block so that a single CSS sytle is on its own line and the result is like this:
#header h1 {    border-bottom: none; }
#header h1 {    font-size: 1.5em; }
#header h1 {    left: 10px; }
#header h1 {    margin: 0; }
#header h1 {    padding: 0; }
#header h1 {    position: absolute; }
#header h1 {    text-align: top; }
#header h1 {    top: 25px; }
#header h1 {    width: 360px; }

I then sorted the entire CSS file in order by page element to get the complete result you see in Part 1.
There are 2 things I really like about this non-conventional formatting.
  1. If you use the Web Developer or Firebug plugins with Firefox to edit CSS, it's really simple to find the block you want to change.
  2. I can quickly resort my CSS by style. Doing this, I can quickly change, for example, the color scheme of my entire site and not worry about missing any page elements.

For example, here are all of the CSS styles that have the background color that I assigned to the top navigation bar on this site:

#edit-cancel-button:hover {    background: #254b5c; }
#edit-diff-button:hover {    background: #254b5c; }
#edit-preview-button:hover {    background: #254b5c; }
#edit-save-button:hover {    background: #254b5c; }
#edit-save-continue-button:hover {    background: #254b5c; }
#ntf-cancel:hover {    background: #254b5c; }
#ntf-post:hover {    background: #254b5c; }
#ntf-preview:hover {    background: #254b5c; }
#side-bar h1 a:hover {    background: #254b5c; }
#side-bar h1:hover {    background: #254b5c; }
#side-bar h1:hover a {    background: #254b5c; }
#top-bar {    background: #254b5c; }
.page-options-bottom a:hover {    background: #254b5c; }
body {    background: #254b5c; }
input.button:hover {    background: #254b5c; }

As you can see, if you wanted to steal my CSS and edit the colors, you can do it easily by having all of the elements that share the same color grouped together. The other thing this method helps me with is in identifying colors that I may have missed editing.
Note: The reason for the gap between the "{" and the style name is that there is a tab character in between. This is also useful since you can copy this code and paste it directly into Excel and it will end up in 2 columns, rather than one. Conversely, copying the 2 columns and pasting it back into your custom CSS box in Wikidot creates the tab space. Bottom line? It's easy to go back and forth between Excel and Wikidot!

You can download the Excel file I used and try it out yourself. Let known what you think!

If you like the layout of my CSS, but want to change the color scheme, I suggest you visit one of the many sites devoted to web site color schemes and create your own scheme. Then grab my Excel file and start sorting and editing. A couple of sites I like for color schemes are ColorBlender and ColorScheme Designer.

Steal This CSS!

created: 1235969370|%e %B %Y, %H:%M
Ed Johnson

I launched my new theme today. Ever since reading Rob Elliot's gem on the community site, I have been spending most of my free time tweaking things in custom CSS.

This actually turned into a 2-part project. Part 1 is the result you see (identifying the page elements and applying styles to create the new theme). Those who use the Firebug or Web Developer plugins for Firefox know how great those tools are. What's always been a challenge for me is tracking down where a particular element is located in the CSS. The other issue is that sometimes the same element and style are repeated in more than one place in a CSS file.

This is where my second project came in. I decided to create my CSS file in a way that would be easy for those using the Firefox plugins to "have a play" (as my friends across the pond might say). I also set up my CSS in Microsoft Excel so I could easily sort it in different ways. For example, it's easy for me to list all of my color styles together or to quickly resort the list in order of element. I'll save the full story for another day.
Read Part 2

Like the new look I've created? Then…

Dropbox

created: 1235154377|%e %B %Y, %H:%M
Ed Johnson

I just read a review about Dropbox, a file hosting/sharing site that the editors of MaximumPC really like. I just created an account today and I'm going to try hosting my Wikidot OS V1 installable ISO on Dropbox to see how well it performs. Here are links to the ISO and corresponding md5 hash file:
mywikidot_backup_rev_393_20090123.iso (1.0 GB)
mywikidot_backup_rev_393_20090123.iso.md5 (93 bytes)
If you find it takes too long to download (it took about 3 hours to upload through the Dropbox client), send me a PM and we can look at a Plan B to get you the ISO file.


The articile on how to use this ISO with a virtual machine is here: installable-iso-and-a-virtual-machine

Fast-CGI Issue

created: 1234107416|%e %B %Y, %H:%M
Ed Johnson

Yesterday, I was working on a new wiki site on my server at work and just about had a heart attack after saving a page and returning to my index page. I got the dreaded


500 Internal Server Error


The page had actually saved fine. The problem was with my index page that had a ListPages module that was doing some fancy includes based on this thread on the community site. I inspected the server logs and found this type of entry for every 500 error:

2009-02-07 15:04:13: (mod_fastcgi.c.2471) unexpected end-of-file (perhaps the fastcgi process died): pid: 6075 socket: unix:/var/run/lighttpd/php-fastcgi.socket-3

2009-02-07 15:04:13: (mod_fastcgi.c.3281) response not received, request sent: 1089 on socket: unix:/var/run/lighttpd/php-fastcgi.socket-3 for /index.php , closing connection

I was able to manually delete the "broken" page by using pgAdmin3. BTW, I love how nice PostgreSQL is when deleting records with dependencies. It deletes data in related tables without making a fuss.

After rebooting my server, I tried one more time to recreate the index page as it was just to make sure it wasn't some kind of fluke error. Same result. Now I'm in way over my head. Since the error log indicated "(perhaps the fastcgi process died)", I decided to try giving more memory to php-cgi. I increased my memory limit in the php.ini file here (was 32M):
/etc/php5/cgi/php.ini

;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;
max_execution_time = 30     ; Maximum execution time of each script, in seconds
max_input_time = 60 ; Maximum amount of time each script may spend parsing request data
;max_input_nesting_level = 64 ; Maximum input variable nesting level
memory_limit = 64M      ; Maximum amount of memory a script may consume (16MB)

This seems to have solved my problem. I'm not sure if I should be looking at anything else or making other config changes. At this point it's working, so I'm going to mark this as "solved for now". I updated ubuntu-8-04-with-lighttpd-install to indicate this change. I'll be doing the same with my next Installable ISO

MyWikidot rev 393

created: 1231099991|%e %B %Y, %H:%M
Ed Johnson

I just completed updating my installable ISO (MyWikidot ISO And A Virtual Machine) to rev 393.

I really believe this is a great way to distribute Wikidot to those who want to use it with a VM or install it on their own hardware for use as a home server or a production server at work.

If you're interested in getting a copy, send Ed Johnson a private message and I can send you a link and download instructions.


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License