ACF Image Size help

• jon.imms2020

• February 28, 2020 at 8:08 am

hello there,

I am trying to create an ACF Gutenberg block, which will embed an image ad on the page. I’ve created the ACF block, and registered some custom sizes (image-sizes.php).

When i try to use the block on the page, it allows me to enter the url link, and upload the image, but it will not allow me to select the image size?

I want to beable to upload the image, and then select image size as “Banner” for example?

Not sure what i’m doing wrong here, or to add this functionality

house-ad.php

<a href="<?php the_field('house_ad_url') ?>" target="_blank">
    <img src="<?php the_field('house_ad_image') ?>" alt="Buildertrend">
</a>

blocks.php

acf_register_block_type(array(
            'name'              => 'house-ads',
            'title'             => __('House Ads'),
            'description'       => __('House Ads. Various sizes.'),
            'category'          => 'buildertrend',
            'icon'				=> 'screenoptions',
            'mode' 				=> $acf_mode,
            'supports'			=> array('align' => false, 'multiple' => true),
            'post_types' 		=> $default_supported_post_types,
            'render_template'   => '_partials/block.php',
            'enqueue_assets' => function(){
				wp_enqueue_style('house-ad-css', CHILD_URI . '_assets/_dist/house-ad.css', array(), filemtime(CHILD_PATH . '_assets/_dist/house-ad.css'));
				wp_enqueue_script('house-ad-js', CHILD_URI . '_assets/_dist/house-ad.js', array(), filemtime(CHILD_PATH . '_assets/_dist/house-ad.js'), true);
			},
        ));

ACF JSON file

{
    "key": "group_5e569ee954507",
    "title": "Block - On Page House Ad",
    "fields": [
        {
            "key": "field_5e56a2cafcb41",
            "label": "House Ad URL",
            "name": "house_ad_url",
            "type": "url",
            "instructions": "",
            "required": 1,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "default_value": "",
            "placeholder": ""
        },
        {
            "key": "field_5e56a324fcb42",
            "label": "House Ad Image",
            "name": "house_ad_image",
            "type": "image",
            "instructions": "",
            "required": 1,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "return_format": "id",
            "preview_size": "full",
            "library": "all",
            "min_width": "",
            "min_height": "",
            "min_size": "",
            "max_width": "",
            "max_height": "",
            "max_size": "",
            "mime_types": ""
        }
    ],
    "location": [
        [
            {
                "param": "block",
                "operator": "==",
                "value": "acf\/house-ads"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": 1,
    "description": "",
    "modified": 1582828394
}

images-sizes.php

<?php
/**
 * Add Custom Image sizes for House Ads.
 */
if ( function_exists( 'add_image_size' ) ) 
    add_theme_support('post-thumbnails');
    if (function_exists('add_image_size')) {
	    add_image_size( 'Square', 250, 250, true );
	    add_image_size( 'Small-Square', 200, 200, true );
	    add_image_size( 'Banner', 468, 60, true );
        add_image_size( 'Leaderboard', 728, 90, true );
        add_image_size( 'Inline-Rectangle', 300, 250, true );
	    add_image_size( 'Large-Rectange', 336, 280, true );
	    add_image_size( 'Skyscraper', 120, 600, true );
        add_image_size( 'Wide-Skyscraper', 160, 600, true );
        add_image_size( 'Half-Page-Ad', 300, 600, true );
	    add_image_size( 'Large-Leaderboard', 970, 90, true );
	    add_image_size( 'Blog-Large-Rectangle', 2000, 400, true );
}

• John Huebner

• February 28, 2020 at 11:45 pm

Whether or not you’re using gutenberg, selecting the image size to be shown/returned is not a feature built into ACF image fields. See the documentation https://www.advancedcustomfields.com/resources/image/

You can return the image ID, the URL which always returns the original url, or an image array that contains information on various sizes. If you want to be able to select the site then you’d need to create some type of choice field to allow selection and then deal with showing the correct size image in your code.