Home › Forums › Add-ons › Gallery Field › Gallery Field options per image › Reply To: Gallery Field options per image
Here we go, I’m done:
What the following script does is:
• Capturing two events (mouseup on the gallery field, click on the “Add Size” button)
• I get the list of images of the related gallery field
• I get the list of selects
• I build the <option> list
• For each select I get the actual :selected option value, replace the full select content, then apply back the selected option
• I’m happy 😉
jQuery(document).ready(function($){
// Make sure acf is loaded
if (typeof acf == 'undefined') { return; }
var galleryACFextension = acf.ajax.extend({
events: {
'mouseup [data-key="field_57dd76189c3ad"]': '_state_change',
'click [data-key="field_5831de130046f"]': '_state_change'
},
_state_change: function(event){
// Take action only if:
// --> "Add Size" button have been clicked. This button contains an attribute 'data-event="add-row"'
// --> A gallery thumbnail have been moved
if ((event.srcElement.dataset.event === 'add-row') || event.srcElement.offsetParent.className === 'thumbnail'){
setTimeout(function(){ // Slight timeout to make sure everything is propagated
var
// customSizeField = event.currentTarget,
// galleryElements = $(customSizeField).closest('.acf-fields').find('.acf-gallery-attachment').find('img'),
// customSizeFieldSelects = $(customSizeField).find('.acf-field-5831de3000470').find('select'),
galleryFields = $(event.srcElement.offsetParent).closest('.acf-fields'),
galleryElements = galleryFields.find('.acf-gallery-attachment').find('img'),
customSizeFieldSelects = galleryFields.find('.acf-field-5831de3000470').find('select'),
optionsOutput = '';
// Build <options> output
optionsOutput += '<option value="">Choose an image to custom size</option>';
galleryElements.each(function(index){
var
imageFilename = $(this).attr('src').split("/").pop(),
imageTitle = $(this).attr('title');
optionsOutput += '<option value="' + imageFilename + '">' + (index + 1) + ' • ' + imageTitle + ' • ' + imageFilename + '</option>';
});
// Set <options> for each select, taking care of the already set ones
customSizeFieldSelects.each(function(){
var selectedOptionValue = $(this).find(":selected").val();
$(this).html(optionsOutput);
$(this).val(selectedOptionValue);
});
}, 100);
}
}
});
});
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.