
Regenerate WordPress media image sizes, programmatically
25/02/2021Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever had an array-like object that you want to iterate over? These annoying collections, which look like arrays, don’t have access to useful array methods like the ‘forEach‘ loop. They include objects with a length property, such as HTMLCollection, NodeList, argument list and even strings. Today I’m going to show you how to make these objects a little bit more useful, by converting them into JavaScript arrays.
Let’s start with a simple scenario where we have 5 divs. Each div has the same class and we query for a HTMLCollection using ‘getElementsByClassName‘.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
const boxes = document.getElementsByClassName('box');
</script>
Here are 4 ways to convert the returned HTMLCollection to an array.
A spread operator will allow us to expand the values of our array-like object and push them into a new array. This works because the HTMLCollection is iterable. The code looks something like this:
const boxArray = [...document.getElementsByClassName('box')];
Array.from does what it sounds like; it converts array-like objects to actual arrays. This is my preferred method of converting to array because it is semantically very easy to read at a glance. You should note that this method isn’t actually supported by Internet Explorer, but who cares about Internet Explorer now anyway…
const boxes = Array.from(document.getElementsByClassName('box'));
More widely supported, we can use the Array.prototype.slice.call() (or [].slice.call for short) methods for converting. Basically we are using the array method ‘slice‘ (which returns a copy of an array) on an array-like object with a ‘call’ method, and then saving the copy into a new array object.
var boxes = Array.prototype.slice.call(document.getElementsByClassName('box'));
var boxes = [].slice.call(document.getElementsByClassName('box'));
Last, but not least, you could solve this problem the good old fashioned way; with a simple iterator loop. From here we could loop our array-like object ‘as-is’ or push each iteration to a new array (in this case ‘boxArray’) for a future use.
const boxes = document.getElementsByClassName('box');
const boxArray = [];
for (let i = 0; i < boxes.length; i++) {
console.log(boxes[i]);
// At this point we could also push the elements to an array
boxArray.push(boxes[i]);
}
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Need to find a directory path relative to your current file? This is how we use dirname() and realpath() to move up directory levels in PHP.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
What are web components? Learn about web components, the shadow DOM, styling and lifecycle callbacks in this JavaScript tutorial series.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Using Bulma but don't know how to integrate it with Nuxt? I'll show you how to load Bulma into your Nuxt project with full control over variables.
Exactly what I needed.
YES I AGREE