jQuery replace an image on click
jQuery replace an image on click- example below, this is a method to swap numerous images in HTML by manipulating the images src attribute value from the click of another element such as a button. HTML <div class=”button-container”> <button class=”black-button”></button> <button class=”red-button”></button> <button class=”blue-button”></button> <button class=”yellow-button”></button> </div> <img id=”change-image” src=”/wp-content/uploads/2018/09/black.jpg” alt=”Black Image” /> jQuery jQuery(document).ready(function($){ $(‘.black-button’).on({…
Read MoreAdd and Show Images in Taxonomy Templates and in Single and Archive Posts
You can add an image to a Category Taxonomy in WordPress by using ACF and selecting the categories taxonomy, so now a new image field appears in the category back end page, the same process can be applied to other taxonomy templates such as custom taxonomies. Create a ACF Image Field for Taxonomy Create…
Read MoreAdd The Title Attribute To Featured Image in WordPress
The title attribute for the WordPress featured post has been removed for a while, but you can get it back with the wp_get_attachment_image_attributes filter which can add the HTML attribute markup back in, add to your functions.php file… add_filter( ‘wp_get_attachment_image_attributes’, ‘tl_add_img_title’, 10, 2 ); // Add title attribute to featured image function tl_add_img_title( $attr, $attachment…
Read MoreImage Carousel Thumbnail Slider with ACF Gallery Field in WordPress
Here is a guide on how to make an image carousel thumbnail slider with ACF in WordPress using the ACF gallery field. Lightslider, a lightweight image slider seems to fit the bill perfectly – I need it to just display simple thumbnails below the main image which on click/touch show the image in the main slide…
Read MoreRemove Unused Image Media Sizes In Your WordPress Theme
Keeping your WordPress image media library under control can mean a big difference to your site loading faster as well as your hard disk size footprint with the ability to easily back up or migrate your site. You basically need to remove any unused image sizes and images themselves not used, optimise existing image sizes and ensure future…
Read MoreRemove WordPress Default Image Sizes
WordPress image sizes contain defaults, small, medium and large as well as medium-large which is used in their implementation of responsive images. You can remove these default images with a WordPress filter intermediate_image_sizes_advanced Why you may want to do this could be that you definitely don’t need certain sizes or you are saving on web disk…
Read MoreAdd background images to widget areas using Customizer in Genesis
How to use the customiser to upload and set images as CSS backgrounds to widgetised areas in Genesis. Taking the Altitude Pro theme as an example as it uses a number of front page widget areas in which you can set the background image via the Customizer, this is great if you need to have…
Read MoreAdd Multiple Site Background Images To Genesis Agency Pro Theme
You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme. Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px. Prepare your images Get your images ready at 1600 x 1000px and…
Read MoreCreate a Loop of Featured Images in a Slider from Posts in Genesis
You can create a slider of Featured Images from the posts in Genesis by creating a custom loop and using Slick Slider. Setting Up Slick Slider First download and set up the Slick files needed, you’ll need to file these in your theme’s js and css directories: slick.min.js ~> js slick-theme.css ~>css ajax-loader.gif ~>css fonts/ ~>css…
Read MoreSetting up SVG Fallback Images in WordPress
SVG images are almost 96% supported in browsers but need a bit of backward compatibility for the 4% of stragglers, out of the box WordPress does not support the upload of SVG images via the media loader but you can circumnavigate that by adding the image format to the list of allowed types. There is a…
Read More