Month: August 2019

Upload webp images to wordpress

wordpress and webp: “Sorry, this file type is not permitted for security reasons.”

Error message when uploading a webp image in wordpress media library

Certain image type like svg, jpeg2000 or webp raises an error when you try to upload them in wordpress as shown in the picture above.

We have already covered how to implement webp in wordpress but there might be some cases where you might want to upload this image manually and serve them to supporting browser via your own script if necessary (that’s not the case for svg though).

Add the following snippet of code to the functions.php file of your template. Comment out or delete the line for the mime type you are not interested in.

function add_mime_types( $mimes ) {
$mimes['webp'] = 'image/webp'; 
$mimes['svg'] = 'image/svg+xml';
$mimes['jpeg2000'] = 'image/jp2'; 
return $mimes; }
add_filter( 'upload_mimes', 'add_mime_types'  );

Troubleshoot BOM issue

BOM: Byte Order Mark

What does it look like:

On the page an invisible element push the html element out of there normal place, messing up alignment.

In the developper code, in firefox it looks like a red dot that display /ufeff on mouse hover.

In a php file it the BOM might cause the header to be sent prematurely, leading to a “header already sent” error.

What is the BOM and why does it causes issue:

BOM is usually invisible in browser but can cause issue by displacing html elements on the page.

W3 consortium write in their dedicated resource on BOM:

At the time this article was written, if you include some external file in a page using PHP and that file starts with a BOM, it may create blank lines.

This is because the BOM is not stripped before inclusion into the page, and acts like a character occupying a line of text. See an example. In the example, a blank line containing the BOM appears above the first item of included text.

https://www.w3.org/International/questions/qa-byte-order-mark#problems

The byte order mark is not present in UTF-8 but some text editor such as Microsoft notepad add it systematically (at the time of writing).

Solution to identify the file starting with BOM:

To find out the php file that included the BOM I SSH into the shared hosting, and found the file using this code: 

find -type f|while read file;do [ "`head -c3 -- "$file"`" == $'\xef\xbb\xbf' ] && echo "found BOM in: $file";done


I downloaded the file through FTP and encoded it in UTF-8 with notepad++ and uploaded back to the server.

Notepad++ offers to format the file in UTF-8 with or without the BOM in the encoding tab.

Use of css sprite

Prepare your css sheet in an image editor. The final format will be in png to keep your images as sharp as possible, webp is also a good candidate if you take care of the brower support.

When laying out your images on the css sprite image, make sure to use consistent spacing between the images. It will help when styling your sheet and keeping it minimal.

You indicate the size of the portion of the picture of the sprite you want to show in the css code. If you want to reuse the height and width of your styling as much as possible, make sure that the image are at least height and width apart from each other (measure from their top left corner as this is the coordinate you will use to display the proper part of the CSS sprites.

Note that this is a cylinder system of coordinate which means if the height you set is larger than the height left between the top left corner of your image and the bottom of the sprite sheet, the remnant will be carried over at the top of the sprite and everything within that value will be displayed. In other words, the sprite repeats itself until it covers the entire height you set.

It works in a similar pattern for the width.

As mentioned above, you indicate what part of the sprite to display by entering the coordinate of the top left corner of your image on the sprite. The top left corner of the sprite is the origin of the coordinate system. Along the top of your image you will have the y axis and along the left side of your image you will have the x axis. So every point in your image will have negative coordinate.

I choosed x and y, because the coordinate along the height of the image will be entered first while the coordinate along the width, second. This match the usual (x,y) way of representing 2D coordinate so that’s why I use this terminology.

Create and hold your private key securely.

The best way to securely create and hold your private key is to do so on an encrypted drive. In that way only you will have access to the data even in the event your drive get lost or stolen.

Why creating a private key directly on an encrypted drive is more secure?

In case you stored your private key on a non encrypted drive, keep in mind that, even if you delete the key from the drive, the data will still be accessible through data recovery process. The only way to make sure the data is not accessible after you erase them is to write zero to the drive, which means you will lose any other data stored on that drive in the process.

That’s the main reason why you should create your private key securely directly on an encrypted drive and don’t move them around. Backup of the key should be also held on an encrypted drive.

To generate your SSL key pair, download and install openSSL.

Generating self signed certificate:

On a windows machine after installing and setting up openssl:

run cmd

cd C:\OpenSSL-Win32\bin

change the path after the cd command to your OpenSSL installation path

openssl genrsa -des3 -out server.key 4096
enter pass phrase for server.key:

Important: enter a password here, nothing will be displayed on screen, you will be ask to confirm this password that will be used during the next step

openssl req -config C:\OpenSSL-Win32\bin\cnf\openssl.cnf -new -key server.key -out server.csr 

enter pass phrase for server.key:

This is the pass phrase you created at the previous step.

Important: leave challenge password blank, virtuemart won’t be able to validate the certificate if anything is entered as chanllenge password. Leave it blank.

Generate certificate: 

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

For 2048 bits long certificate so first line become:

openssl genrsa -des3 -out server.key 2048

Flexbox

A Complete Guide to Flexbox

Flexbox is perfect to manage nice and responsive layout in modern browser. Let’s see how we can integrate it with horme 3 template for virtuemart, together with lazyloading.

Our first implementation does not give desirable result.

The step I took so far:

1- remove matchHeight script

2- change the row div to a flex-container class

3- change the product column

<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . ' ' . $cellwidth ;?>">

to

<div class="product flex-item>" >

The issue is that there is only 3 items per row, leaving an empty column. The add to cart button seems to go all over the place as soon as the third row is reached.

The add to cart button need to be pushed at the bottom of the div. It seems the div height change depending on the scrolling. Everything is fine when the css load but if scrolling down then up, then the div might be displayed with a “too short” height, hiding the add to cart button in the process.

@media query not working under certain screen size

Issue: CSS @media query are not working under a certain width (in my case it was under about 900px).

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }

Solution: check that you have set the view port in your page head meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">