Last active
October 17, 2019 20:44
-
-
Save isotrope/4f6ef48f04ee92ad57a22ba5da03003f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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