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

A Color Wall of All My Blog Posts

I recently wrote my first WordPress plugin, Swatchify, which takes the featured image from a post and generates a color palette from it. As part of this process I ran the…

I recently wrote my first WordPress plugin, Swatchify, which takes the featured image from a post and generates a color palette from it. As part of this process I ran the plugin against all of the posts in my archive.

The result of this process is that all of my posts are now grouped by colors, hex codes, and dominant colors.

Whenever Swatchify runs it takes the palette generated and associates the post with the color taxonomies I programmed into it.

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
Tue Jan
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
Sun Jan

New Art: Anklebiters

I drew each of these cards over the course of a couple nights. I used melted crayon for the dots, china marker for the dark bold colored lines, and pencil…

I drew each of these cards over the course of a couple nights. I used melted crayon for the dots, china marker for the dark bold colored lines, and pencil / pen for the interstitial lines.

Something that I find really cool is the fact that I listened to the song Anklebiters on repeat while I was making these, and at the time I had NOT seen the music video, but after watching it when embedding it in this post I see a TON of weird artistic similarities between the music video and these cards.

View
Type
Tue Jul

Prisma’s Filters Turn Pictures Into Art and Gives Instagram Some Competition

I started playing with this new app called Prisma the other day, and the filters that they provide are absolutely insane. In the below pictures you’ll be able to see…

I started playing with this new app called Prisma the other day, and the filters that they provide are absolutely insane. In the below pictures you’ll be able to see how I took a number of my photos / instagram images and turned them into fully fledged pieces of artwork using their AI.

My favorites have to be the first five or six, but really all of the images I put through the filters were beautiful. If you like the images below you should also check out my post on the Waterlogue App. It does a lot of the same things, but turns your photos into watercolor paintings.


 

IMG_3740

IMG_3741

IMG_3742

IMG_3743

IMG_3744

IMG_3745

IMG_3746

IMG_3747

IMG_3748

IMG_3749

IMG_3750

IMG_3751

IMG_3752

IMG_3753

IMG_3754

IMG_3755

IMG_3756

IMG_3757

IMG_3758

IMG_3759

IMG_3760

IMG_3761

IMG_3762

IMG_3763

IMG_3764

IMG_3765

IMG_3766

IMG_3768 (1)

 

IMG_3769

IMG_3770

IMG_3797

IMG_3798

IMG_3799

IMG_3800

View
Type
Tue Jun

A Memorable “Welcome” Note for a New Employee

Just a nice feel good note left for a new employee reminding him/her that it’s ok to be a human instead of a productivity robot. I think everyone needs to…

New Manager Note

Just a nice feel good note left for a new employee reminding him/her that it’s ok to be a human instead of a productivity robot. I think everyone needs to take a break from reading their “10 Ways to be More Productive” articles in the morning, and read this instead.

 

It’s ok too..

  • Say “I Don’t Know”
  • Ask for more clarity
  • Stay at home when you feel ill
  • Say you don’t understand
  • Ask what acronyms stand for
  • Forget things
  • Introduce yourself
  • Depend on the team
  • Ask for help
  • Not know everything
  • Have quiet days
  • Have loud days, to talk, joke, and laugh
  • Put your headphones on
  • Say “No” when you’re too busy
  • Make mistakes
  • Sing
  • Sigh
  • Not check your email out of hours
  • Not check your email constantly during hours
  • Just Slack it
  • Walk over and ask someone face-to-face
  • Go somewhere else to concentrate
  • Offer feedback on other people’s work
  • Challenge things you’re not comfortable with
  • Say yes when anyone does a coffee run
  • Prefer tea
  • Snack
  • Have a messy desk
  • Have a tidy desk
  • Work how you like to work
  • Ask the management to fix it
  • Have off-days
  • Have days off

 

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!