Support

Account

Home Forums Gutenberg ACF Image Size help

Helping

ACF Image Size help

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.