The event, sponosored by Buffalo Bob’s and Element Design, was a part of Grand Haven’s Winterfest. Exposed to the Elements is a benefit for the Juvenile Diabetes Research Foundation.

Read the full article

The issue is that when developers are developing sites using a URL structure such as: http://127.0.0.1/~mysite/images/dog.jpg, timthumb does not correctly parse the folder structure and returns a broken image. In this case, a proper path might be: /home/mysite/public_html/images/dog.jpg, however timthumb creates the broken path: /home/mysite/public_html/~mysite/images/dog.jpg.

For the record, I believe timthumb is a horrible idea and should be avoided at all costs (security and performance issues). However there are many instances where you might purchase a template to find it is completely integrated with timthumb, and the amount of time it could take to remove timthumb from the template is not worth it.

How to fix

Make sure you are using the latest version of timthumb. At the moment of this writing, the version is 2.8.5

At line 209 you will find the code:

$this->src = $this->param('src');

Replace that with:

//check if tilde is found in src
if(strstr($this->param('src'),'~'))
{
   $url_parts = explode('/',$this->param('src'));

   foreach($url_parts as $url_part)
   {
      //do not include any part with a ~ when building new url
      if(!strstr($url_part,'~'))
      {
         $new_dev_url .= $url_part.'/';
      }
   }

   //remove trailing slash
   $new_dev_url = substr($new_dev_url,0,-1);

   $this->src = $new_dev_url;
}
else
{
   $this->src = $this->param('src');
}

This isn’t the most elegant solution, however the only time you should be using it is while you are developing and debugging the site (tildes should never be in the URL of a live website). Once you go live, it will automatically skip over that extra processing and work just as timthumb is intended.

Additional fix for $_SERVER['DOCUMENT_ROOT']

There might be a chance that timthumb is still not working, and that could be because $_SERVER['DOCUMENT_ROOT'] is not being properly defined. To get around this, we need to manually define $_SERVER['DOCUMENT_ROOT'] at the beginning of the document:

Above this line (line 23):

define ('VERSION', '2.8.5');

Insert the root path of your website, something like this:

$_SERVER['DOCUMENT_ROOT'] = '/home/mysite/public_html/';

I hope that helps, and if it is still not working for you, I highly recommend visiting the official timthumb website and talk with the developers.

Currently the only way to re-enable vertical tabs (side tabs) is to roll back to an older version of Chrome. Here are the steps:

1. Uninstall Chrome
2. Install version 16.0.899.0 from http://www.oldapps.com/google_chrom…old_chrome=6660
3. Disable Chrome updates: http://www.chromefans.org/chrome-tu…tic-updates.htm
4. Reactivate side tabs

I recommend you setup Chrome Sync before this process, so you can easily restore everything.

Once you are back up and running, you might get a “This version of Chrome is older than the user profile on this machine” message. To remove that message, follow these steps:

1. Open Windows Explorer, show hidden files
2. Browse to: C:\Users\username\AppData\Local\Google\Chrome\User Data\Default\
3. Delete the “Web Data” file
4. Close and re-open Chrome

Other web-based image cropping services have you upload an image to their server before you can begin working on it. One major disadvantage to this method is the amount of time it takes to upload the image. Depending on your internet connection and image size, it can be upwards to several minutes before you can start cropping. Another disadvantage is various privacy concerns, as your image is now residing on their server.

Croply performs everything in real-time on your computer. Image uploading is instant onto your browser (your image never leaves your computer), and all processing is completed through the HTML5 canvas element. From start to finish, you can crop and process an image in less than 5 seconds.

The results of the cropping process are fantastic as well, the image quality is identical to Photoshop and the file sizes are very similar. Below is a comparison between Croply and Photoshop.

Croply was originally designed for Photoshop-challenged clients. One of the largest hurdles for clients editing their sites was getting the images the correct size for various portions of the site. A feature added onto Croply is a “Share URL”, which is automatically generated based on the dimensions you input. You can create a “Share URL” for a client, and have them use that specific URL for creating images for slideshow areas, content posts, etc.

Croply is the perfect tool for novice to expert web designers, go ahead and bookmark http://croply.com now!

The most ideal way to handle this is to add padding to the container elements at the beginning of the design process. However this was a completely finished, fully tested website. There was not a single container element that could be modified, but instead there were numerous template files and elements acting independently from one another.

It can be argued that the design stretching to the corners of the screen is a good thing, as it utilizes the most amount of space possible on a smaller screen. However this was entirely a cosmetic issue, and the client disagreed with any of the benefits.

The Easy Solution

Create a div at the footer of the site, center it, and set the width of that div to something slighter larger than the rest of the site.

For example, the entire site was set to 950 pixels wide. So right above the </body> tag I added:

<div style="margin:0 auto;height:1px;width:1050px;"></div>

Now when mobile devices view the website, they zoom out to accommodate the 1050 pixel wide div. This creates the padding effect around all containers of the site without modifying any other lines of code. The height is set as 1 pixel so browsers like Safari will recognize the width of the div. To streamline the code you should assign this div a class and define the styles in your stylesheet, but this is the very basic idea of it.

Desktop users should not notice a difference, but if that becomes an issue you can setup a mobile stylesheet to define the div’s styles only when a mobile device is detected.

Download GetParam Here

Installation

• Copy the getparam.php file into: /wp-content/plugins/contact-form-7/modules/

Usage

When editing a form in Contact Form 7, enter the getparam shortcode. There is only one valid parameter which is the name of the $_GET value.

[getparam value]

For example, if the URL is http://mysite.com/contact?ordernum=12345, the shortcode will be:

[getparam ordernum]

Then when building the response email, you can pass the value with [ordernum]

Formally known as 2E Network, Social Media Workshop is a monthly gathering to educate the business community on this constantly growing and changing form of communication, public image, and marketing tool.  Topics and presenters vary every month, while the general focus of Social Media remains constant.  The workshops are coordinated by the Chamber of Commerce Grand Haven, Spring Lake, Ferrysburg and held on the first Friday of the month from October through June, 7:30 am – 9 am.

October’s workshop will focus on the importance of blogging.  According to Huntley, implementing a blog into a company’s website is the single most important factor in search engine optimization.  “A blog gives the ability to provide fresh content to users, which in turn gives the company the opportunity to expand their website into an unlimited number of pages.  A properly executed blogging strategy will increase traffic to a website exponentially, helping the site climb the search engine rankings,” Huntley commented.

Specific points Huntley will cover at the Social Media Workshop include:

• Why should I blog?
• How blogging works
• How to make any “boring” company sound interesting
• Setting up your own blogging strategy
• Tips on executing the strategy

Chad Huntley is the president of Element Design LLC, a West Michigan based website development and internet marketing firm.  His website development portfolio covers over 50 industries including several Fortune 500 corporations, and is a contributor to various open-source web projects. His company offers specific packages for non-profits and small businesses, as well as custom solutions for larger projects.

If you are interested in attending, please register by calling 616.842.4910 or contacting Courtney at colson@grandhavenchamber.org.  The fee is $15 for Chamber members and $20 for non members.  A continental breakfast is provided.  This workshop will be held at JSJ Corporation, 700 Robbins Road.

Within the past several weeks many local businesses have had their Facebook profile pages deleted, losing thousands of followers. This is because they have their business setup on Facebook as a “profile”, instead of a “page”. They have this distinction because only individuals should have profile pages with their personal information, and send “friend requests” to others.

Business pages do not allow you to “friend” others, something a regular Facebook profile allows you to do. Instead, people have to actively find your business page and “like” it. If Facebook allowed businesses to have regular profile pages you would be getting hundreds of “Friend Requests” from businesses. So as a way to prevent spam (and among other reasons) Facebook does not allow businesses to have regular profile pages, and actively deletes those accounts.

How do I know if I have the wrong type?

If you are unsure your business has the wrong type of page, there is an easy way to check:

• Regular Facebook Profiles have a list of friends on the left
• Business Pages do not have friends, and instead have a number of “likes” on the left

If your Business Page has friends on the left, you need to continue to the next step.

Convert a Business Profile to a Business Page

1. Login to your Business profile account
2. Go to the following page: Profile To Business Page Migration
3. Click “Local Business or Place”
4. Fill out the information, then press “Get Started”

This process will convert all of your friends into “likes”, and transfer your profile picture. Everything else including pictures, wall posts, etc will be lost.

Do not wait to do this for your profile page. Even though you lose some information on the transfer process, the most important aspect of your businesses Facebook presence (your followers) will be preserved.

The attribute selector worked as expected in Chrome, however I ran into some issues with Firefox. Take the following code for example:

<div class="aB">
   <div class="aB" style="width: 200px;">Hide this text</div>
</div>

According to the CSS specifications, the following should work when selecting the inner div:

.aB[style="width: 200px;"] {
   display:none;
}

This works in Chrome, however it currently does not work in Firefox. Due to time constraints I was unable to look into this any further, but I assume there are some issues with the colon and semicolon.

To fix this, I used a slightly different version of the attribute selector. Instead of checking for the exact value of the attribute (that includes the colon and semicolon), I used the “contains” selector (*= instead of =).

.aB[style*="width"][style*="200px"] {
   display:none;
}

The above code first looks for an element with the class “aB”, then looks at the style attribute twice. It checks to see if the style attribute has the text “width” and “200px” contained in the attribute. By stacking the two selectors together, both values are required. This method works in Firefox, and works exactly the same as the first method.

Some may argue it makes sense to open up multiple instances of the browser, but this will quickly fill up the task bar on your computer as well. Plus, how do you know which instance of your browser has the site you are looking for?

A very high percentage of people now have widescreen monitors. These monitors are often much larger than the size that websites are designed for (99%+ of websites are designed for 1024 pixels wide monitors). If you haven’t already, you will begin to notice how much wasted horizontal space there is when browsing the internet.

That’s why it makes much more sense to send the tabs to the side of the browser stacked vertically than it is to have them on the top. Compare the tabs in the image above with the image below to see an illustration of what I’m talking about (click the image to view a larger version)

Placing the tabs on the side gives you much more room to add more tabs without losing any information on what each tab contains. It takes some getting used to, but it is well worth it in the end.

If I’ve convinced you to make the switch, here is how you do it:

Enabling Side Tabs on Chrome

If you are using the latest version of Chrome, the following “Side Tabs” option might not be available to you. If not, please view my “Re-enable Vertical Tabs on Google Chrome 16” post.

1. Type in the URL:  about:flags
2. Find “Side Tabs”, then click “enable”
3. Right click a tab on the top of the browser, then click “Use Side Tabs”

Enabling Side Tabs on Firefox

Download an install an extension such as Tree Style Tab.