Posts Tagged: HTML CSS
What are the Best Image Size Dimensions for Responsive Web Design?
When building image carousels, jumbotrons, or full background sections you will often need to properly size an image. Below are some recommendations based on the most common device screen sizes and if you are using parallax or fixed background images. Desktop (1920×1080) 2000px x 360px, 4000px x 720px (retina) Parallax (images need to be as… Read more »
Category: Common Questions
WooCommerce Product Category and Terms Select Filters [code snippet]
The code below will help you add a form select filter for Woocommerce online shop on WordPress.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php $categories = get_terms( ['taxonomy' => 'product_cat', 'hide_empty' => true] ); ?> <div class="product-categories"> <h3>Categories</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $categories as $category ) { ?> <option value="<?php echo get_term_link( $category->term_id ); ?>"><?php echo $category->name; ?></option> <?php } ?> </select> </div> <?php $terms = get_terms(array('taxonomy' => 'product_tag', 'hide_empty' => true)); ?> <div class="product-tags" > <h3>Template Tags</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $terms as $term ) { ?> <option value="<?php echo get_term_link( $term->term_id, 'product_tag' ); ?>"><?php echo $term->name; ?></option> <?php } ?> </select> </div> <script> jQuery(document).ready(function() { var queryString = window.location.href; console.log(queryString); jQuery(".shop-filter > option").each(function() { if (this.value == queryString) { this.selected = 'selected'; } }); }); </script> |
Category: Code Snippets
How to Remove Default HubSpot CTA Styles
HubSpot allows marketers to create custom styled CTA buttons. This can be a problem if you have a large team who may not know how to follow brand guidelines. This creative freedom can make buttons look inconsistent across your website. You could educate all of your users to never create custom styles. Or you could… Read more »
Category: Code Snippets
Scale Up and Crop an Image WordPress [code snippet]
In WordPress you may need to increase the size of all thumbnails but WordPress does not res up the images to prevent distortion. Using the method outlined in this example you can use object-fit to make undersized images fit your desired aspect ratio. .img-crop__polyfill image is sized to the desired dimensions. This will help keep… Read more »
Category: Code Snippets
How to Get a Wistia Video Thumbnail Without the API
Wistia video provides some handy embed codes for your videos but what if you want to create a custom player or use the thumbnail image by itself. You can use their API but the setup could me more complicated than you need. Thankfully Wistia provides Oauth url’s used in WordPress to grab the data for… Read more »
Category: Code Snippets
Media Query Sass Mixin [code snippet]
The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.
Category: Code Snippets
How Do You Get the URL Parameters and Append to Href or Src of Another Element?
Do you want to grab the url parameters and pass them to a button href or iframe src? This is common when you are running a paid ad campaign to a landing page that links to a form on another page. You want to track the source of the form submission by duplicating the url… Read more »
Category: Code Snippets
Console Log JavaScript Objects to See Data Structure [code snippet]
When working with JavaScript objects and arrays it is often tricky to reference the correct index of the data you need. These console functions allow you to visually see the structure so that job is a bit easier. Writes your object as a data table and also dropdown menu
1 | console.table($yourObject); |
Writes your object as a… Read more »
Category: Code Snippets
Uncaught TypeError: Cannot read property ‘msie’ of undefined when upgrading to WordPress 5.5
Recently when upgrading an older site to WordPress 5.5 I noticed a javascript error in the console that read Uncaught TypeError: Cannot read property ‘msie’ of undefined. If you have a plugin or script that relied on an older version of jQuery it will no longer work because WordPress updated their jQuery version. In order… Read more »
Category: Code Snippets
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.
Category: Code Snippets