PHP contact form returns 504 gateway error after moving to Digital Ocean

This one had me scratching my head for a while – using php7.0-fpm and the latest nginx on Debian 8 Jessie I was seeing our PHP contact form working correctly but returning a Gateway 504 error upon submission, which was resulting in a great deal of resubmitted forms and error notifications from users. This only started occuring after we moved our site to Digital Ocean – it turns out that it was a IP priority issue and the following resolved it:

vim /etc/gai.conf

and uncommenting the following line:

precedence ::ffff:0:0/96  100

Then a reboot. Voila, the contact form worked properly again.

September 18, 2016September 18, 2016

How to pass through a USB device to a Windows Virtualbox VM

Running a Mac with Windows running in a Virtualbox virtual machine? Here’s how to pass through a USB device so that whenever the VM (Virtual Machine) is running and the USB device is plugged into a USB port it appears in the Windows VM and not in Mac OS X. Open up Virtualbox and make sure that the Windows VM is not running:

Click on “Settings” at the top and you should see this screen:

Click on “Ports” (third from the right hand side in the icon menu at the top):

It defaults to Serial – click on USB:

Nobody wants to be using USB 1.1 (slow) so click on USB 2.0:

Then plug in your USB device that you want to pass through. In a nutshell, we will be setting up the specific USB devices we select on this screen to be passed through to the Windows VM whenever they are plugged in while the VM is powered on. If the virtual machine is closed down when you plug in the USB device the normal Mac OS X system will read the USB device as usual. Click on the icon on the right that has a little green plus and you should see a listing of USB devices that are eligible for passthrough:

In this instance we are selecting the SanDisk Cruzer Blade. Click on it.

Now you should see it listed under “USB Device Filters”. The USB controller has been moved to USB 3.0 in the above screen shot – ignore that, as USB 3.0 currently does not work on Windows 7 VMs. Click OK, and go back to the main Virtualbox screen. Safely remove the USB device from your computer and then start the Windows virtual machine.

If you have only just selected USB 2.0 for the first time you will probably see the above screen. Otherwise, you can now plug your USB device in:

…and it should be picked up as if it were plugged into a physical Windows computer:

All done. Now, if you look in Finder in Mac OS X you won’t see the drive:

Closing down the VM, though, and unplugging/reinserting the drive will make it show up as normal:

In the above screen shot it is appearing as “NO NAME”. All done! Incidentally, if you want a USB thumbdrive to work in both Windows and OS X you want it formatted into FAT32 or ExFAT rather than NTFS or Mac OS X Extended. If you wish to remove the USB device from the passthrough list, click on the USB device in the list and then click on the little red minus sign on the right hand side.

March 10, 2016

Owncloud Nine: How to reset the admin password

Well, about ten minutes after installing the new Owncloud Nine we found out that we had typo’d the admin password. Fortunately, it’s an easy fix. Run the following (this worked on Debian with a fresh Owncloud 9 install):

cd /path/to/owncloud sudo -u webserveruser php occ user:resetpassword adminaccountname

In our case the command was:

cd /var/www/cloud sudo -u www-data php occ user:resetpassword admin

It should prompt you for your password twice:

Owncloud Nine - How to reset the admin password — Owncloud Nine – How to reset the admin password

Assuming there are no more typos, that’s all done!

March 4, 2016

Adding products to Woocommerce

First, log into your website at:

yourwebsiteurl.com/wp-admin/

Enter your username and password and you should be directed to your WordPress dashboard. First, we’ll upload some images to go with the products you’re adding today. On the left you will see Media:

Hover over it and you should see “Library” and “Add New”:

Click “Add New”.

Drag and drop some files in, or click “Select Files” and choose them from your file system. You will see the progress bars for each file below the selection area. Once all of the relevant media files are uploaded, look on the left for “Products” – hover over it and you should see “Add Product”:

Click on that, and you’ll unsurprisingly be taken to the “New Product” screen.

Here you can add the product name, choose the category it should appear in – you can pick multiple categories – and add the contents for the product page, including additional photos/videos. Add the text in the blank white box on the lower left, and add images/video/etc. with the “Add Media” button. Scrolling down you should see some more info you need to add:

Most of it is self-explanatory – you’ll need to set a product image that appears in the search results and category views, and click on the various tabs in the area with the red rectangle around it to add the various info there. Once you have done that, head back up to the top and click “Publish” to make the product live!

January 18, 2016

Checking whether nginx cache is working

Just set up nginx caching and wondering whether it’s working properly? You can check it pretty easily:

curl -I URL.goes.here

That should return a bunch of information, but the important bit is:

X-Proxy-Cache: MISS

Well, in this case it’s not working. If it’s working you’ll see a HIT there.

November 28, 2015December 5, 2015

Drupal 8: Configure block or Place Block do nothing

In short, clicking on “Place Block” results in a brief loading icon and then nothing, and Configure Block results in a “This website encountered an unexpected error” message. The fix was found here:

https://www.drupal.org/node/2597506

Edit the following file – the “core” directory should be in your Drupal 8 root directory:

[drupal root]/core/lib/Drupal/Core/Annotation/Translation.php

Before the final }, add the following text:

public function __toString() { return $this->translation->__toString(); }

Now try placing a block again and it should work. Please note that until this change is added to the Drupal code this is probably going to revert when you upgrade Drupal.

November 19, 2015

Drupal 8 – How to enable multi image upload

One of the great things about Drupal 8 is that it has multi-image uploading capabilities built-in, unlike Drupal 7. By default, however, it’s a single image at a time. To enable multiple image upload for articles, for example, navigate to: siteurl/admin/structure/types/manage/article/fields

Drupal 8 - Enabling Multiple Image Uploads

Click “edit” next to the Image field type, and you’re taken to:

Click on “Field Settings” and scroll down until you see:

Set to “unlimited” as in the above image, save, and you should be good to go!

November 16, 2015

apt-add-repository: command not found on Ubuntu

Following a tutorial where you’re supposed to add a repository with apt-add-repository but the command isn’t found? You can install it by doing the following:

sudo apt-get install software-properties-common python-software-properties

Then re-run the apt-add-repository command and it should work!

November 16, 2015November 16, 2015

How to caption an image – HTML5

How do you caption an image in HTML? One way is using figure tags. Without them, you might use the following:

<img src=”image.jpg” align=”center” />

…to create this:

So, you have an image using the above. How do you make it into an image with a caption?

<figure> <img src=”image.jpg” align=”center”/> <figcaption><center>Caption goes here</center></figcaption> </figure>

Caption goes here

Like that!

November 15, 2015November 15, 2015

SEO: How many words long to make image alt text?

Image alt text purpose

When looking at making sure your image alt text works for your SEO purposes, don’t forget that one of the main purposes of alt text is to provide visually impaired people a description of the content they’re looking at. It can be easy to get carried away filling it up with SEO-oriented keywords, leaving it useless for screen readers and affecting the readability of your website for those who rely on screen readers. So, that said… When looking at your image alt text for SEO purposes, is longer better? Not necessarily!

Current thinking regarding alt text

According to here, here and here below 125 characters is good – probably 10-15 words is a sweet spot to aim for. Beyond that doesn’t seem to provide much usefulness for SEO.

For visually impaired readers, however, there may be a benefit from having longer alt text component to the image – something to keep in mind when looking at your content. From the Penn State University link it seems that some screen readers break the text up into 125-character chunks, though, so longer than that limit may not work well anyway.

Images that aren’t part of content

If you don’t want to put alt text in for every image or have on-page images that aren’t part of the content, at least put in an empty entry – e.g.

img src=”blah.jpg” alt=””

That way screen readers will skip it and not say “image”.

Modules/plugins relating to alt text

There’s a Drupal plugin which scans your website for missing alt text; it’s a dev release but it may be worth looking at if you’re trying to revamp your site and ensure that the alt text is present and appropriate.

Switched On Tech Design

Posts