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.
The topic ‘ACF Image Size help’ is closed to new replies.
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.