Пользовательский блок изображений ACF Gutenberg - PullRequest
Новая
       21

Пользовательский блок изображений ACF Gutenberg

0 голосов
/ 02 марта 2020

Я пытаюсь создать пользовательский блок ACF Gutenberg, в котором будет изображение с различными размерами и ссылка на URL. Это будет встроенное объявление на странице, которое откроется на новой вкладке.

Объявления имеют различные размеры, поэтому у меня есть функция, позволяющая создавать собственные размеры изображений и разрешать их выбор при загрузке. изображение. (изображение-размеры. php). Если я использую блок изображения Гутенберга, появляется опция размера изображения, которая имеет все мои собственные размеры. Но когда я загружаю через свой блок изображений, он не дает вам возможности для размера.

Итак, как я могу получить раскрывающийся размер изображения для моего пользовательского блока? такой же, как основной блок изображения.

размеры изображения. php

<?php
/**
 * Add Custom Image sizes for House Ads.
 */
function set_custom_image_sizes() {
    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 );
    }
}
add_action( 'after_setup_theme', 'set_custom_image_sizes' );

/**
 *  Alow Custom Sized Images to be selected in Image Size List
 */
function create_custom_image_sizes($sizes){
   return array_merge( $sizes, array(
        'Square' =>  __('Square - 250x250'),
        'Small-Square' =>  __('Small Square - 200x200'),
        'Banner' =>  __('Banner - 468x60'),
        'Leaderboard' =>  __('Leaderboard - 728x90'),
        'Inline-Rectangle' =>  __('Inline Rectangle - 300x250'),
        'Large-Rectange' =>  __('Large Rectange - 336x280'),
        'Skyscraper' =>  __('Skyscraper - 120x600'),
        'Wide-Skyscraper' =>  __('Wide Skyscraper - 160x600'),
        'Half-Page-Ad' =>  __('Half Page Ad - 300x600'),
        'Large-Leaderboard' =>  __('Large Leaderboard - 970x90'),
        'Blog-Large-Rectangle' =>  __('Blog Large Rectangle - 2000x400') 
    ));
}
add_filter('image_size_names_choose', 'create_custom_image_sizes');

house-ad. php

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

acf json

{
    "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": "seamless",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": 1,
    "description": "",
    "modified": 1582916959
}

acf_register_block_type(array(
            'name'              => 'house-ads',
            'title'             => __('House Ads'),
            'description'       => __('House Ads. Various sizes.'),
            'category'          => 'my-custom-blocks',
            '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);
            },
        ));
...