I've been creating responsive WordPress themes pretty much since Ethan Marcotte wrote his Responsive Web Design article on A List Apart and I've been tinkering around with various ways to make images responsive in WordPress. I want to share my current method to accomplish it.
Here's My Solution
How This Script Works
- This script basically takes the content and adds a filter that strips out all of the height & width attributes before printing the content to the screen
- In addition to applying this to the content I also apply this script to the post thumbnail so your Featured Image for each blog post is also responsive
My Rationale
Separation between content and presentation – This is a biggie you hear all the time in web development. Some solutions add a filter to the image_send_to_editor filter in the admin area but by doing so we are actually permanently modifying the content of the site. We want the ability to switch back back to a static theme should we ever choose to do so – this is why we need to put the filter after the content comes out of the database.
Backwards Compatibility – This is another big issue in web. If I'm running a website and I don't want to update all of my previous posts & pages then we need to implement a solution that affects content already in the database. Putting the filter after the content comes out of this database solves this.