Skip to content

Instantly share code, notes, and snippets.

@isotrope
Last active October 17, 2019 20:44
Show Gist options
  • Save isotrope/4f6ef48f04ee92ad57a22ba5da03003f to your computer and use it in GitHub Desktop.
Save isotrope/4f6ef48f04ee92ad57a22ba5da03003f to your computer and use it in GitHub Desktop.
// no conflict-safe mode (passing $ as an alias into our inner closure)
( function ( $ ) {
function acfFieldToGroupBg() {
// cache all our instances of the grab-this element which will be what we work with
var $jsGrabThis = $( '.js-grab-this' );
// none of them? why keep going. ABORT!
if ( $jsGrabThis.length < 1 ) {
return;
}
// it's going to go through all the .js-grab-this that it could find, passing two variables:
// index, basically, of THIS ONE within our array of .js-grab-this (numbers)
// often not that useful, except where you need counters like every nth or "after the first" or ...
// element : a non-jQuery (vanilla) element / .js-grab-this
$jsGrabThis.each( function ( index, element ) {
// element is a vanilla element and not a jQuery selector. let's convert it
var $element = $( element ),
// let's store the value of the image URL (look at the element, and grab its attribute named "src"
imageUrl = $element.attr( 'src' ),
// Might as well find the parents right away
// starting from this element, go up the DOM until you find an element with a class of .wp-block-group and sto there
// there's .parents() and .parent() ... parents keeps going up the DOM nodes until it finds it,
// parent stops at the first parent node... if it doesn't match, you get nothing
// the main group block
$blockGroup = $element.parents( '.wp-block-group' ),
// try to grab a column parent
$colParent = $element.parents( '.wp-block-column' ),
// was it able to find a column parent?
// if so $colParent will be an array of (at least) one element
// you might know count( $some_array ) from PHP, for JS, it's $some_array.length (not a function, a property)
isInsideColumn = $colParent.length > 0,
// the acf block that we won't actually need in a sec.
$acfInfoBlock = $element.parents( '.group-bg' );
// no image src? not much we can do with this one... NEXT!
if ( !imageUrl ) {
// this seems weird, but within $.each(),
// return is sort of like continue; in a while/for loop
// return false; is like a break;
return;
}
// this bit of code was added after you told me that you needed to check for cols... so the info is actually more plentiful in the next block
// the css code is the same in both cases... it's WHAT we apply it to that changes
if ( isInsideColumn ) {
// add it to the column's style
$colParent.css( {
'background-image' : 'url(' + imageUrl + ')',
} );
} else {
// not inside a column? Group Block it is!
// let's add that image to our group block....
// with this function, you can add as many css property : value pairs as you want.
// In many cases, you don't need to put quotes around the property (the key),
// but because it's JS, you can't have, for instance have a dash. background-image HAS to be quoted...
// but there's a version that it'll accept: backgroundImage.
// tl;dr always quote them and you won't have problems
$blockGroup.css( {
'background-image' : 'url(' + imageUrl + ')',
} );
}
// we don't actually need that whole ACF block anymore
$acfInfoBlock.remove();
// next in the each loop
} );
}
// do the dew
acfFieldToGroupBg();
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment