Type
Thu Jan

Making Multiple Column Marketo Forms Responsive

By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put…

By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put it into.

You can restyle things, to a certain degree, with the custom CSS that Marketo allows you to edit, but this only gets you so far because of the built in html structure of the Marketo forms.

Because of this, I wrote a script that does a lot of the dirty work to make Marketo forms responsive regardless of viewport size.

The Script

The script will resize any Marketo form on the page upon rendering and on window resize. It does some math to calculate how many form fields there are per row and will apply an appropriate width to those rows for any viewport size.

One note is that you also have to include a simple media query for the mobile size. Don’t have time to get into that messiness in this post though.

After Running the Script

Desktop

Mobile

Conclusion

This is just one of the many things you can achieve with the Forms 2.0 api. I have a much more complete and fleshed out script that allows you to:

  • Determine if you want the form styled
  • Specifcy button alignment and text
  • Strip out and entirely restyle the form
  • Adapt the form for a dark or light background
  • Alter radio and checkboxes styling

Comment below or contact me if you are interested in taking a look.

 

View
Type
Wed Jan

Terminal Commands To Clean Up Excess WordPress Image Sizes

This past month when cleaning out my website in an attempt to move hosts I discovered I had over 70,000 images in my WordPress uploads directory. Even after 6 years…

This past month when cleaning out my website in an attempt to move hosts I discovered I had over 70,000 images in my WordPress uploads directory. Even after 6 years of blogging that still seemed like a lot to me…

It turns out that many of these images were thumbnails of various sizes generated by themes I had cycled through over the years. These themes, whenever I would regenerate thumbnails to accomodate them, would bloat up my directory.

Finally after failing to use one of the many plugins out there, like thumbnail cleaner, to rid my uploads folders I had to get creative.

The Terminal

Below are a couple of terminal commands I used to search and destroy unused images.

Search By Size

First I searched for the largest files by navigating to the uploads director and entering the below command.

find . -size +10M -ls

This command finds and lists the largest files in a directory. Anything above 10MB. The files I found only accounted for a small portion of the files in my uploads folder.

By File Pattern

Something I noticed while browsing by file size was that all files ended with the relatively same pattern of something like -150×150.jpg.

From there I decided to remove all of the file sizes generated by WordPress that I was fairly confident I hadn’t used on my site, or didn’t use anymore at least. All of the WordPress generated files used the same pattern at the end so I came up with the below commands.


find . -name *-450x450.* | xargs rm -f
find . -name *-650x650.* | xargs rm -f
find . -name *-600x300.* | xargs rm -f
find . -name *-960x300.* | xargs rm -f
find . -name *-180x137.* | xargs rm -f
find . -name *-150x75.* | xargs rm -f
find . -name *-50x50.* | xargs rm -f
find . -name *-66x66.* | xargs rm -f
find . -name *-52x50.* | xargs rm -f
find . -name *-120x120.* | xargs rm -f
find . -name *-100x100.* | xargs rm -f
find . -name *-500x500.* | xargs rm -f
find . -name *-800x800.* | xargs rm -f
find . -name *-500* | xargs rm -f
find . -name *-700* | xargs rm -f
find . -name *-300x225.* | xargs rm -f

 In reality you could probably do something like the below to just wipe out all WordPress generated thumbnails.

find . -name *-*x*.* | xargs rm -f

Results

I dropped my uploads directory for 70,000 images to 7,000 and also managed to drop the size of my WordPress website from 12GB to something more like 3GB. It made all the difference when trying to migrate a website!

View
Type
Sun Jan

My first WordPress Plugin “Swatchify”

Swatchify is a WordPress plugin that grabs an image from a post or image file and creates a swatch to go with it. Learn more about it by clicking the…

Swatchify is a WordPress plugin that grabs an image from a post or image file and creates a swatch to go with it. Learn more about it by clicking the link to view this post.

View
Type
Thu Feb

How to Create a Custom Google Analytics Landing Page Conversion Rate Report

In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics….

In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics.

You can track form fill with events, but this doesn’t allow you to get a really simple drilldown of form fills per page for some reason…

The reason I needed to generate this report is because Marketo does not provide an out of the box report for landing page conversion when you are using self-hosted landing pages (which I imagine is quite popular because their landing page editor isn’t great).

At the end of this tutorial, your report will look something like the below report.

Screen Shot 2016-02-25 at 8.02.57 PM

To achieve this take a quick view of this video, and if you have questions feel free to ask them below!

 

View
Type
Sun Nov

How to Change Website Highlight / Selection Color With CSS

I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people…

highlight-color-css

I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people will never see it, the ones that door will find it entertaining.

Changing the highlight / selection color is super easy. Simply cut, copy, and paste the below snippet into your stylesheet. Replace the background color, and color properties to your liking, and you’re highlight color will change!

View
Type
Tue Jul

Clearbit’s Logo API

I just spent countless hours generating high resolution JPEGs for the Periodic Table of DevOps and the DevOps Tool Chest, and of course the second I stop doing this super…

clearbitI just spent countless hours generating high resolution JPEGs for the Periodic Table of DevOps and the DevOps Tool Chest, and of course the second I stop doing this super labor intensive work one of my old coworkers sends me this.

Clearbit has an API that will allow you to easily pass a url to it, and receive a nice logo for the company in question.

<img src="https://logo.clearbit.com/{{DOMAIN HERE}}" alt="" />

Here is an example using Google:

You can also send these parameters to alter the image returned:

Parameter Description
size integer Size of the image returned
format string Format of the default – either png or jpg
greyscale boolean Enables greyscaling
View

Subscribe for More!


I send out a monthly newsletter on various topics.

Take a moment to enter your details, and you can select the news you would like to have delivered to your inbox!