Support

Account

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);
    			}
    		}
    	});
    });