NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}

to

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{

list-style:square;

}

to

ul li{

list-style:none;

}

And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

Centering A Div – Quick Reference Guide

I have been designing web pages using CSS for years now I have to admit, I still have to regularly look up how to center a div. It seems simple enough (maybe I am too used to the old HTML <center> tags), but I as am constantly struggling with it I decided to write a quick reference guide.

Center a Relatively Positioned Div

.centeredDiv {
width: 500 px;
margin-left: auto;
margin-right: auto;
}

Note: You must set a width for this to work

Center Absolutely Positioned Div

.centeredDiv {
width: 100px;
left: 50%;
margin-left: -50px; /*half of the width*/
}

Note: This will center the div relative to the first parent element that is not positioned static or the <html> block if no element is found.

As I was figuring all this out (again) to write it down, I think I am realizing the reason why I always seem to get it wrong. You have to employ different strategies depending on whether or not the element you are trying to center is absolutely position or relatively positioned.

 

Source: http://www.thesitewizard.com/css/center-div-block.shtml
Source: http://www.sitepoint.com/css-center-position-absolute-div/
Source: http://www.w3schools.com/css/css_positioning.asp

HTML5 Canvas performance for scaling sprites

Well…This is likely a nobrainer for most, but for some reason it took me quite a while to figure this one out.  In my latest game asteroidsInc I have been designing I was experiencing some pretty awful frame rates, and so I started to try and optimized the code for better performance.  I was using the JavaScript drawImage function to scale the images I was using as sprites in order to achieve a retro pixely effect.  While it did accomplish the effect I was looking for it turns out the frame rate took a big hit due to the scaling.  To improve the performance I simply used Photoshop to enlarge my images (in order to retain the retro effect) and then used the drawImage function using no scaling. The performance boost was quite significant. In hindsight it seems quite obvious that using the scaling was a bad idea on sprites and would require more resources to render, but hey…sometimes the obvious just takes a little longer.

 

In recap, if you are are trying to animate multiple objects on the canvas it appears that resizing the images themselves has performance advantages over using the drawImage to scale the images.

Safari not liking the HTML5 Audio

 Well this one threw me for a loop….

 I never use Safari, but in an attempt to make my latest HTML5 Game compatible in all the major browsers I downloaded the PC version of Safari to do some testing and trouble shooting to see if it would work. The game worked well in Chrome, Firefox, and I.E. so I assumed it would just work in Safari. But no, to my surprise it started throwing the following error every time I tried playing one of the audio elements.

 TypeError: ‘undefined’ is not a function (evaluating ‘audioElement.play()’)

 After much frustration I came across a post which indicated that HTML5 audio and video tags will not work in Safari without QuickTime. So much for HTML5 not requiring any plug-ins. I installed QuickTime and to my dismay Safari was now giving me the following error when I tried to start it up.

This application has failed to start because QTCF.dll was not found. Re-installing the application may fix this problem.

After trying to reinstall the the browser (this did not work) I found the QTCF.dll file in the Program Files/QuickTime/QTsystem made a copy of it and put it in Windows/System32. This solve the problem and Safari now started up. I was able to load my game with no more errors playing the audio objects. Safari seemed to handle the canvas object fairly well (although the frame rate on seems to be fairly poor).

Source: http://happyworm.com

Source: http://answers.yahoo.com/question/index?qid=20090912133753AAM60Ur

Include an “or” Operator in a JavaScript Switch Statement

I came across a situation where I needed a switch statement in JavaScript to do the exact same thing in multiple cases. For example:

switch (varAnimal)
{
   case ‘dog’:
   sameFunction();
   break;

   case ‘cat’:
   sameFunction();
   break;

   case ‘bird’:
   sameFunction();
   break;
}

While the above code works, if you have a long list of variables it is highly inefficient. To solve the problem I initially tried to use an “or” operator to try and test for the different values as you would do in an “if” statement. For example:

switch (varAnimal)
{
   case ‘dog’ || ‘cat’ || ‘bird’:
   sameFunction();
   break;
}

However this didn’t work. I found on a forum the below method which appears to accomplish what I was trying to do. It essentially lets you use an “or” operator to test for multiple cases which can save a lot of typing. For example:

switch (varAnimal)
{
   case ‘dog’: case ‘cat’: case ‘bird’:
   sameFunction();
   break;
}

Source: http://www.webdeveloper.com/forum/showthread.php?t=191879

Strange Indexing by Google

I know that it usually takes weeks/months to build traffic to a site but I put the blog on a old domain that still had a pagerank of 2. I am hoping by doing this it might help my rankings faster. The blog has been up for a little over a week now I figured that it is possible it might have seen some visits. Checking this was a simple matter as I had installed Google analytics the day I put up the blog to help track traffic (which I highly recommend to anyone). To my disappointment it doesn’t look like any real traffic besides me has been visiting the site (There were a handful of direct referrals from sites who linked to my old site, but I don’t consider these significant as the visitors were probably looking for something else).

 

So, if I have not yet received any traffic the site has probably not been re-indexed. To check this I did a quick search for “infobrink” on Google and I noticed something very strange. The first search engine result was the old version of my homepage (which was expected if the site had not yet been re-indexed), but right below it was one of my newer blog sub-pages that I had recently created. To me this seems awfully strange cause the only way Google could know about that sub page would be via crawling my homepage (I am fairly confident nobody has linked to my new subpages yet). If google was crawling my homepage and updated the index with my subpages why not update the index with the new homepage also? Hum..very strange…

WordPress Page IDs

Using the wordpress “page” widget for the side bar works wonderfully for displaying a list of static pages on your blog.  However by default it displays all of your pages and you may not want this. Luckily the widget comes with the ability to excluded pages.  Less lucky is that in order to exclude the pages you need to know the “page ID”.  As far as I can tell the “page ID” is not displayed anywhere and requires a bit of digging to find.   After logging into the admin dashboard area select the “pages” link.  From there you will be given a list of all the current pages you have created.  An easy way to find the “page ID” is to mouse over (hover not click) the page in question.  If you look at your browser status bar you will notice a link in which you will see “post=” some number.  This post number is the page ID.

For example – If your status bar displayed this:

http://yourpage.com/wp-admin/post.php?post=57&action=edit

 

Your page ID would be 57

 

Source: http://www.techtrot.com/wordpress-page-id/

WordPress captcha problems

On the web one of the most useful tools to combat spam and reduce abuse is a captcha. For this blog I felt that a captcha system was a “must have” as I intend on letting users input comments. I found a free wordpress captcha plug-in made by bestwebsoft (http://wordpress.org/extend/plugins/captcha/)that looked very promising. However to my dismay after installing and activating the captcha plugin, the system did not work. I tried installing other captcha plugins, but they all required API keys and this was unacceptable to me. So I decided to try and get the bestwebsoft plugin to work.

I could tell that the captcha system was activated because it would give me an error if I tried to submit a comment, however the catcha form itself was not showing up in the comments section. To trouble shoot I reactivated the default theme that came with wordpress and the captcha form worked perfectly, so I knew it was a theme issue. It appears that whoever designed the theme I am using didn’t use the default wordpress “comments form” and was manually creating the form from scratch. In order to get the form to show up all I needed to do was include the following line of code in themes comments.php file where I wanted the form to show up.

<?php echo cptch_comment_form();?>

The next problem was that a mysterious “1” was being generated after the captcha form. To solve this problem I had to edit the function “cptch_comment_form()” in the captcha.php plugin file to not return anything. (i.e. from “return true;” to just “return;”). To be truthful I am not entirely certain what all the implications of doing this will be, but the captcha system appears to be working fine.

I imagine other wordpress themes will also be designed this way and will require a similar work-around to get the captcha plugin working.

 

****UPDATE
It appears this problem has been fixed in the most recent version, so if you are still having this issue try updating the plugin

Customizing WordPress Headers

Word press is simply amazing…I’m constantly amazed by the quality of open source software, but that is another topic for another day

As I was setting up my installation for this blog I wanted to customize the header image and style.  I turns out this tasked proved to be a bit more tricky than I had first imagined.  I spent more time then I care to admit trying to edit the header div and image using the appearance editor tool in the admin area.  What took me so long to figure out was that there are multiple css files and the properties I was trying to change were in a different css file altogether.  Even more tricky was that this file was not available in the appearance editor tool.  I found it  in the  “wp-content/themes/” folder.

Now I know that this may be a no-brainer for some, but for me it was a bit tricky because it was not what I was expecting. Here is a trick I learned that might make this easier in the future to help identify the location of the correct css file. In many modern web-browsers you can right click and choose to inspect the element.  This will give you a run down of all the css properties that are currently being applied to that element along with the name/location of the css file (In Chrome you have to mouse over the file name to get the location).

So, if you want the customize the header for your word-press blog just right click on the header somewhere and select “inspect element”.  From here it is simple to figure out the location of the files with the properties you want changed.  After that use your favorite FTP program to download the file and make the desired changes.

 

Unwanted Border around an Image Link

Turns out I am having a harder time customizing this wordpress installation than I imagined. The theme I chose has a default css mouse rollover effect applied to all the anchor tags. I like the effect for the text, but this same effect was applied to the border image and it looked awful. I tried setting the border to 0 with the HTML but this did not work. What I had to do was create a completely new class setting all the attributes to none and then apply this class to the anchor tag around the header image. Like this…

a.headerImage {color: none;border: none;}
a.headerImage:hover {color: none;background: none;border: none;}

and then use the following html to assign the class to your anchor tag

<a href=’http://yoursitehere.com’ class=’headerImage’>

 

Source: http://www.ssi-developer.net/css/link-colours.shtml