jQuery – Preload Images – Prevent Image Flicker / Blinking The First Time You Hover

Here is how you can preload images which are needed later (e.g. when a hover is performed). You may notice that when replacing an image on the hover state, you get this horrible flicker, that is because the image is loaded as you hover the element. The below code will load the image on page load and therefore overcome this problem.


$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("hover-img-1.jpg","hover-image-2.jpg");

Simly add all the images you want to preload in the array of $.preloadImages and you should be good to go. Depending on your requirements, you can place this code outside or inside the $(document).ready() code.

Hope this helps!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to create a responsive Pinterest style layout with CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Import WordPress Posts Including Images From One WordPress Site To Another

Today, we are going to show you how to import the images from WordPress posts from one website to another.

I’m sure you have tried going to Tools –> Import / Export and checking the box to include images and then you see that only the post content gets imported right?

Why the images do not get imported

The reason for this is the export step that causes issues with the image attachment. The WordPress export feature doesn’t include the ‘attachment’ post type unless you select the All content export option. If you are simply just trying to export posts from one website to another; you will lose your attachments, unfortunately.

If you do a compare from exporting just Posts and All content, the issue is quite obvious. Within the first file; in which we specified we only wanted Published statuses, the attachments are referenced in the posts, but the attachment table is ignored. In the second file, in which we exported All Statuses; the attachment table is included. In other words, the WordPress export function defines Attachment posts as something other than Published. Seems a bit of a pain but fortunately, we have a solution to the problem.

Imagine if you had a blog with 900 posts all with featured images and images within the posts and then there wasn’t a way to import this to a new site? Well, whenever there is a problem, there is always a good solution 😉

How to get your images into your new website…

Okay so if you are only wanting to import/export posts with images, then we recommend using the Auto Upload Images plugin, which can be used even to upload the images after you’ve imported the posts already.

What exactly does this plugin do?

  • It looks for image URLs in your posts (imported posts do still have image URLs in them, but they point to the site the content was exported from);
  • It then gets those external images and uploads them to the local WordPress uploads directory and adds the images to the media library;
  • And finally, it replaces the old image URLs with new URLs.

This process is easy to do and is relatively quick. Once you’ve finished the import, you can remove the plugin once the work is completed.

Step by step process

Step 1: Prepare your export file from the old website

Simply go to Tools > Export and export your posts only.

Step 2: Import your posts into your new website

On your new website, again go to Tools > Import and import the posts you exported. The importer has an option to download and import file attachments, but this won’t work if you’re not migrating all content, so you can simply ignore this option.

Step 3: Install and activate the Auto Upload Images plugin

Download the Auto Upload Images plugin and add it to your plugins folder, or simply search the name in your new website and install and activate the plugin. This will add an option under Settings > Auto Upload Images, but the default settings are all you need.

Step 4: Get the image from your old site into your new site

As of now, the plugin doesn’t have an option to automatically go through your posts and bulk upload all the images. Instead of this, it updates each post individually when you save them. If you have a lot of blog posts on your website, this can be some serious tedious work but we have a solution to that. You can go to your posts overview screen and bulk update your posts.

So what you do here is you select multiple posts and then under Bulk Actions; choose Edit and press the Apply button. Then, without making any adjustments, click the Update button. Depending on your server you may get a timeout as the process runs, so it’s a good idea to do this maybe 20 to 50 posts at a time.

To change the Pagination, you can click Screen Options at the top right and change the default value to the value of your choice.

Step 5: Check your posts and deactivate/uninstall the plugin

When all is done you can check your posts and confirm they now reference local images. You then no longer need the plugin and you can safely deactivate and delete it.

Do note, it’s always a good idea to make a backup of your new site first (at least of your site’s database).

Alternative Solution?

The other solution is to use the Export Featured Images plugin. Although the plugin hasn’t been updated in a very long time, it still works! This will allow you to export the featured images from posts or custom post types (CPT’s) by creating a WordPress XML export including the images.

Step by step process

  • First export the posts from your old site via Tool > Export and Import the posts to your new website
  • Then use this plugin in your old site and go to Tools > Export Featured Images and select post types. This will create a new .xml file for you.
  • Now, in your new site go to Tool and select WordPress Import. Then select the .xml file which you downloaded in the previous step.

And that’s it, just as simple as that. Now you will have all your posts mapped with featured images, pretty sweet right?

If you have found this helpful, or have a different solution you would like us to mention, please leave a comment below!

Happy Coding.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Replace an image in an using CSS

Today we are going to show you a nice little feature using CSS box-sizing as an image replacement technique.

I stumbled across this when I was asked to replace an on of the sites we built with another image hosted elsewhere. Sounds easy right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.

Okay so let’s say we have the following HTML:-


<head>
  <title>Your Page Title</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="//exampledomain.com/banner.png">
  </div>
</body>

This is simple to do with JavaScript, but I wanted to see if there was another, more simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.


/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://exampledomain.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

It worked perfectly and here are some reasons why:-

  • It works on just about any element, even empty ones like or

  • Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
  • Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share