Help Me with Discussing Banner Sizes for Responsive Sites

I posted sent this to a client asking about what the right banner image size is for a #WordPress site. Where am I off and could have improved it?

So when creating custom headers for sites that are responsive and will be seen on different sizes, there are really three basic approaches:

1. Resizing/Scaling – The whole image is always shown, but it resizes smaller on smaller screens. The end result of this is that the detail of the the image is lots and titles that are now 1/4 the original size and are unreadable.

2. Centered – Allows for a single image to be used that can be as wide enough for a large screen, but only the middle is shown. This means that the most important info, like the title, has to be in the middle 320 pixels. It will also result in Google yelling at you because you are serving a very wide image on phones with a very limited width screen. A variance of this is left justified with the same results.

3. Multiple images – Based upon the size of the screen, the best image is displayed to the reader. This can be combined with #2 to cover multiple dimensions with less of a penalty from really wide images.

As with everything else, the answer that involves the most work, is the best answer. So #3 is best way to go.

With your last image, I created a three images (attached) that had the spirit of the first image. The first was just resized to fit the 1280 width screen.

The common sizes are: (
320 for iphone 3&4,
768 for ipads,
1080 new tablets,
1280 for desktops & newer

You could go NUTS creating images for all the different dimensions. Take a look at the second article in the links below and you can see how many “common” breakpoints there are. If you create a site with three banners 320, 768, 1280, I think that covers most of the basis, especially if the readable content is mostly centered and can fall off the edges without any loss of message.

Some good articles:

How do you split a text field/textarea by line breaks?

Sometimes you want to provide a simple way for users to enter multiple values.  Perhaps the simplest way for the user is to understand is allow them to enter new values on each line.  Historically that’s how Internet Explorer allowed you to configure multiple home pages: 1 per line. It’s a tested method that works.

However, how do you then process the information?  There are lots of possiblitities, however I prefer an answer I found was posted back in 2011: Use preg_split().

preg_split( '/\r\n|[\r\n]/', $_POST[ 'yourtextarea' ], PREG_SPLIT_NO_EMPTY )

By using regex, this function will handle entries from various platforms. You don’t need to worry about whether is just a carriage return or just a linefeed or even both at the end of a line.  The split is handled nicely and you get an array returned. It will even, by adding an optional third parameter, ignore any blank lines.  Once you have your value returned, you can write the array out to an option record, or process it however you like.

Once you have the array loaded from your DB, how do you split it into multiple lines again? That’s simple: Use implode().

implode( "\n",  $myarray );

Hope that helps someone!

WordPress and NotePad++

I use NetDrive and NotePad++ to do my WordPress Development, but I’ve customized NPP slightly along the way.
I’ve added the following functions:
Alt-F3 – Search the WordPress codex for the word at the cursor in the editor (usually for filters and actions etc)
Alt-F5 – Look up the word at the cursor as a function on the WordPress Developer wiki (will show the source)
Alt-F6 – Look up the word at the cursor as a function in the WordPress codex (will include examples)

To do this I edited shortcuts.xml

You can edit this file by closing notepad++ and then hitting WindowsKey+R and pasting in: notepad %AppData%\Notepad++\shortcuts.xml
And pressing enter.

 <Shortcut id="41014" Ctrl="no" Alt="no" Shift="yes" Key="116" />
 <Macro name="Trim Trailing and save" Ctrl="no" Alt="yes" Shift="yes" Key="83">
 <Action type="2" message="0" wParam="42024" lParam="0" sParam="" />
 <Action type="2" message="0" wParam="41006" lParam="0" sParam="" />
 <Command name="Launch in Firefox" Ctrl="yes" Alt="yes" Shift="yes" Key="88">firefox &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in IE" Ctrl="yes" Alt="yes" Shift="yes" Key="73">iexplore &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in Chrome" Ctrl="yes" Alt="yes" Shift="yes" Key="82">chrome &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in Safari" Ctrl="yes" Alt="yes" Shift="yes" Key="70">safari &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Get php help" Ctrl="no" Alt="yes" Shift="no" Key="112">$(CURRENT_WORD)</Command>
 <Command name="Google Search" Ctrl="no" Alt="yes" Shift="no" Key="113">$(CURRENT_WORD)</Command>
 <Command name="Codex Search" Ctrl="no" Alt="yes" Shift="no" Key="114">$(CURRENT_WORD)</Command>
 <Command name="WP Developer Function" Ctrl="no" Alt="yes" Shift="no" Key="116">$(CURRENT_WORD)/</Command>
 <Command name="Codex Function" Ctrl="no" Alt="yes" Shift="no" Key="117">$(CURRENT_WORD)</Command>
 <Command name="Open containing folder" Ctrl="no" Alt="no" Shift="no" Key="0">explorer $(CURRENT_DIRECTORY)</Command>
 <Command name="Open current dir cmd" Ctrl="no" Alt="no" Shift="no" Key="0">cmd /K cd /d $(CURRENT_DIRECTORY)</Command>
 <Command name="Open in another instance" Ctrl="no" Alt="yes" Shift="yes" Key="79">$(NPP_DIRECTORY)\notepad++.exe $(CURRENT_WORD) -nosession -multiInst</Command>
 <PluginCommands />
 <ScintillaKeys />


How to find Joomla WordPress or Drupal version from Linux CLI

I was about to rewrite some of these queries again, and decided to google instead.  I found this page with them already written:

So this too gets stored away in my cave.  Enjoy:

WordPress version


find /home/*/public_html/ -type f -iwholename “*/wp-includes/version.php” -exec grep -H “\$wp_version =” {} \;


find /var/www/vhosts/*/httpdocs/ -type f -iwholename “*/wp-includes/version.php” -exec grep -H “\$wp_version =” {} \;

Windows/IIS (default path) with Powershell:

Get-ChildItem -Path “C:\inetpub\wwwroot\” -Filter “version.php” -Recurse | Select-String -pattern “\`$wp_version =”


Joomla! 1/2/3 version and release:


find /home/*/public_html/ -type f \( -iwholename ‘*/libraries/joomla/version.php’ -o -iwholename ‘*/libraries/cms/version.php’ -o -iwholename ‘*/libraries/cms/version/version.php’ \) -print -exec perl -e ‘while (<>) { $release = $1 if m/ \$RELEASE\s+= .([\d.]+).;/; $dev = $1 if m/ \$DEV_LEVEL\s+= .(\d+).;/; } print qq($release.$dev\n);’ {} \; && echo “-“


find /var/www/vhosts/*/httpdocs/ -type f \( -iwholename ‘*/libraries/joomla/version.php’ -o -iwholename ‘*/libraries/cms/version.php’ -o -iwholename ‘*/libraries/cms/version/version.php’ \) -print -exec perl -e ‘while (<>) { $release = $1 if m/ \$RELEASE\s+= .([\d.]+).;/; $dev = $1 if m/ \$DEV_LEVEL\s+= .(\d+).;/; } print qq($release.$dev\n);’ {} \; && echo “-“


Drupal version:


find /home/*/public_html/ -type f -iwholename “*/modules/system/” -exec grep -H “version = \”” {} \;


find /var/www/vhosts/*/httpdocs/ -type f -iwholename “*/modules/system/” -exec grep -H “version = \”” {} \;


Latest version information:



Advanced Google Search Operators

Sometimes a simple Google search won’t do. Today I needed to find some malformed URLs in a site.   I couldn’t remember how to search for specific text in a URL.

I had a hard time finding the Google documentation of search commands this morning.  It I needed the allinurl: function.

I don’t want to have to search that hard again so here is the documentation in my Code Cave:

Search Service Search Operators
Web Search allinanchor:allintext:allintitle:allinurl:cache:define:filetype:id:inanchor:info:intext:intitle:inurl:link:related:site:
Image Search allintitle:allinurl:filetype:inurl:intitle:site:
Groups allintext:allintitle:author:group:insubject:intext:intitle:
Directory allintext:allintitle:allinurl:ext:filetype:intext:intitle:inurl:
News allintext:allintitle:allinurl:intext:intitle:inurl:location:source:
Product Search allintext:allintitle:

Source and additional information:

Finding large files on a Linux server

Here are a couple commands you might find useful.

This command finds files that are larger than half a gig:

find / -type f  -size +500M -exec ls -lh {} \;

This command finds files that are larger than 1 gig:

find / -type f  -size +1G -exec ls -lh {} \;

This command finds files that are larger than 1 gig excluding the home directory which might be on a different mount. (notice the removal of the -type f so that the not works on paths):

find / -not \( -path /home -o -path /boot -o -path /tmp \)  -size +1G -exec ls -lh {} \;