<p><strong>Custom Blocks Plugin For WordPress</strong><br />
★★★★★</p>
<p><strong>Developers magic wand for WordPress custom blocks.</strong> We created <a href="https://www.lazyblocks.com/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=head" rel="nofollow ugc"><strong>Lazy Blocks WordPress plugin</strong></a>, to help every developer get access to the powerful tools they need to quickly run websites based on WordPress block editor (called Gutenberg).</p>
<p><a href="https://www.lazyblocks.com/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=head" rel="nofollow ugc">Official Site</a> | <a href="https://www.lazyblocks.com/docs/overview/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=head" rel="nofollow ugc">Documentation</a> | <a href="https://github.com/nk-crew/lazy-blocks" rel="nofollow ugc">GitHub</a></p>
<p>Create custom blocks visually, add controls to your blocks using drag & drop, write blocks output using HTML or PHP code. You can create custom blocks as well as custom meta fields for specific post types. Furthermore, you are able to create post templates with predefined blocks for any post type.</p>
<h3>🚀 Easy To Start</h3>
<p>This everything you need to deploy your custom block in WordPress editor:</p>
<p><strong>1. Configure Custom Block</strong> <br /> Give a name to your custom block, set icon, category, etc.</p>
<p><strong>2. Add Controls</strong> <br /> Add control fields like simple text and complex image selectors.</p>
<p><strong>3. Write Output Code</strong> <br /> Output code for your custom block with HTML and PHP support.</p>
<h3>🌟 Features</h3>
<ul>
<li>Custom blocks with output code</li>
<li>Custom blocks for posts meta fields</li>
<li>Large set of predefined controls</li>
<li>Show controls in block content / inspector</li>
<li>Multiple output methods allowed
<ul>
<li>Custom PHP</li>
<li>Custom HTML + Handlebars</li>
<li>Template files in theme folder</li>
</ul>
</li>
<li>Export / Import blocks</li>
</ul>
<h3>🔥 Controls</h3>
<p>To manage custom blocks attributes you need to use Controls. Lazy Blocks have a large set of controls predefined for you:</p>
<ul>
<li>Basic
<ul>
<li>Text</li>
<li>Textarea</li>
<li>Number</li>
<li>Range</li>
<li>URL</li>
<li>Email</li>
<li>Password</li>
</ul>
</li>
<li>Content
<ul>
<li>Image</li>
<li>Gallery</li>
<li>File</li>
<li>Rich Text</li>
<li>Classic Editor</li>
<li>Code Editor</li>
<li>Inner Blocks</li>
</ul>
</li>
<li>Choice
<ul>
<li>Select</li>
<li>Radio</li>
<li>Checkbox</li>
<li>Toggle</li>
</ul>
</li>
<li>Advanced
<ul>
<li>Color Picker</li>
<li>Date Time Picker</li>
</ul>
</li>
<li>Layout
<ul>
<li>Repeater</li>
</ul>
</li>
<li>Custom Controls <a href="https://www.lazyblocks.com/docs/examples/create-custom-control/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=custom_controls" rel="nofollow ugc">read our extensive documentation</a></li>
</ul>
<h3>🏳️ Multilingual</h3>
<p>Lazy Blocks adds a new layer of compatibility for <a href="https://wpml.org/" rel="nofollow ugc">WPML</a>. All text controls of custom blocks are compatible with WPML and ready for translation. <a href="https://www.lazyblocks.com/docs/multilingual/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=wpml" rel="nofollow ugc">https://www.lazyblocks.com/docs/multilingual/</a></p>
<h3>🛠 Built For Developers</h3>
<p>Lazy Blocks built by developers, for developers and gives you unlimited freedom to create custom blocks. Furthermore, there are PHP filters and actions to customize every part of your custom blocks from the backend. Possibility to use PHP and theme templates system.</p>
<p>Every UI part should be intuitive for simple custom blocks, but if you want to create something more complex, you may be required to <a href="https://www.lazyblocks.com/docs/overview/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=developers" rel="nofollow ugc">read our extensive documentation</a>.</p>
<h3>🔥 Lazy Blocks Pro</h3>
<blockquote>
<p>The Lazy Blocks plugin is also available in a professional version which includes more controls and features! <a href="https://www.lazyblocks.com/pro/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=pro" rel="nofollow ugc"><strong>Learn more about Lazy Blocks Pro</strong></a></p>
<p>In order to maintain the free version of the plugin on an ongoing basis, and to provide quick and effective support for free, we offer a Pro version of the plugin. The Pro version allows you to:</p>
</blockquote>
<ul>
<li>
<p><strong>Additional Controls</strong></p>
<ul>
<li><strong>Posts</strong> – Search and select posts based on post type or taxonomy</li>
<li><strong>Taxonomy</strong> – Search and select categories, tags and any other custom taxonomies</li>
<li><strong>Users</strong> – Search and select users based on user roles</li>
<li><strong>Units</strong> – Advanced number input with possibility to select any CSS unit</li>
<li><strong>Message</strong> – Display a helpful message between controls</li>
<li><strong>Code Editor</strong> – Insert code parts using editor with syntax highlighting</li>
</ul>
</li>
<li>
<p><strong>Controls Conditions</strong><br />
Conditionally display/hide controls. In order not to overload your block with a huge list of controls, you can hide some of them depending on the values of other controls.</p>
</li>
<li>
<p><strong>Styles & Scripts</strong><br />
Add custom CSS and JavaScript to your blocks. Define styles for editor and frontend, and script for interactive frontend functionality. Assets are automatically loaded only when needed for optimal performance.</p>
</li>
<li>
<p><strong>Panels and Dividers</strong><br />
The Panels and Dividers provides a way to structure controls into groups. It assists in better organizing the block panel UI.</p>
</li>
<li>
<p><strong>Blocks Preloading</strong><br />
Display blocks preview immediately once the page editor loaded.</p>
</li>
<li>
<p><strong>SEO Enhancements</strong><br />
Additional support for content analysis in Rank Math and Yoast SEO plugins.</p>
</li>
</ul>
<p><a href="https://www.lazyblocks.com/pro/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=pro" rel="nofollow ugc"><strong>Find much more custom blocks features of Lazy Blocks Pro today!</strong></a></p>


Custom Block Builder – Lazy Blocks

This plugin is excellent. That's what WordPress team should have done; but will never ever do. Luckily, there are skilled developers to build such needed features. Thanks for making it!

Simply excellent

Lazy Blocks is a great plugin working out of the box, with an amazing user interface and a lot of great options, allowing to build custom rich blocks very easily. 
It's build for developers and documentation is great too.

Almost perfect !

I really like the direction the new Site Editor in Wordpress is developing - building custom blocks for Gutenberg though can be a nightmare. With the Lazyblocks plugin on the other hand this could not be easier! I'm using it in many of my clients websites, when i quickly need to implement a feature using blocks.
And i couldn't help myself getting my hands on the Pro version just to support the development of this awesome piece of software. Full recommendation!

Thanks and keep up the good work!

Brilliant and useful tool!


We have made some advanced blocks mixed with custom PHP functionality and this plugin has saved us a tremendous amount of time. Highly recommend for devs and non devs.


Fantastic Plugin For Developers

Easily create custom blocks and custom meta fields for Gutenberg without hard coding.

Navneil Naicker

<p><strong>Important Notice for New Users of ACF Photo Gallery Field</strong></p>
<p>If you are installing the ACF Photo Gallery Field for the first time on your WordPress website, we’d like to inform you that this plugin will no longer be maintained as of October 2024. As an alternative, we have launched a new and improved plugin called <a href="https://wordpress.org/plugins/acf-galerie-4/" rel="ugc">ACF Galerie 4</a>.</p>
<p>We encourage you to check out <a href="https://wordpress.org/plugins/acf-galerie-4/" rel="ugc">ACF Galerie 4</a> for enhanced features and ongoing support. ACF Galerie 4 includes a built-in migration tool that seamlessly transfers data from ACF Photo Gallery Field or ACF Gallery Pro to ACF Galerie 4. <a href="https://wordpress.org/support/topic/migrate-from-acf-photo-gallery-field-to-acf-galerie-4/" rel="ugc">Learn more</a>.</p>
<p>Thanks</p>
<p>A lightweight extension of Advanced Custom Field (ACF) that adds <strong>Photo Gallery</strong> field to any post/pages on your WordPress website.</p>
<ul>
<li>Visually create your Fields</li>
<li>Add multiple photos and you can also modify title, caption and link to anything</li>
<li>Assign your fields to multiple edit pages (via custom location rules)</li>
<li>Easily load data through a simple and friendly API</li>
<li>Uses the native WordPress custom post type for ease of use and fast processing</li>
<li>Uses the native WordPress metadata for ease of use and fast processing</li>
<li>Supports WordPress classic and Gutenberg editor</li>
<li>RESTFul API</li>
</ul>
<h4>Donation</h4>
<p>Navneil Naicker is the sole developer working on this free WordPress Plugin in his leisure time. He would like to integrate it with premium plugins like Elementor Pro and Advanced Custom Fields Pro. Please donate to support Navneil in continuing further development of this plugin. Click on the link “<a href="https://www.buymeacoffee.com/navzme" rel="nofollow ugc">https://www.buymeacoffee.com/navzme</a>” to donate.</p>
<h4>Usage</h4>
<p><em>acf_photo_gallery</em> is a helper function that takes in <strong>ACF_FIELD_NAME</strong> and <strong>POST_ID</strong> will query the database and compile the images for you. The output of this function will be an array.</p>
<pre><code>acf_photo_gallery(ACF_FIELD_NAME, POST_ID);
</code></pre>
<h4>Example</h4>
<p>The following example is using Twitter Bootstrap framework to layout. You can use any framework of your choice.</p>
<pre><code><?php
    //Get the images ids from the post_metadata
    $images = acf_photo_gallery('vacation_photos', $post->ID);
    //Check if return array has anything in it
    if( count($images) ):
        //Cool, we got some data so now let's loop over it
        foreach($images as $image):
            $id = $image['id']; // The attachment id of the media
            $title = $image['title']; //The title
            $caption= $image['caption']; //The caption
            $full_image_url= $image['full_image_url']; //Full size image url
            $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
            $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
            $url= $image['url']; //Goto any link when clicked
            $target= $image['target']; //Open normal or new tab
            $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
            $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="col-xs-6 col-md-3">
    <div class="thumbnail">
        <?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
            <img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
        <?php if( !empty($url) ){ ?></a><?php } ?>
    </div>
</div>
<?php endforeach; endif; ?>
</code></pre>
<h4>Add Extra Fields</h4>
<p>To add extra fields add the following to your themes functions.php file.</p>
<pre><code>//Create extra fields called Altnative Text and Status
function my_extra_gallery_fields( $args, $attachment_id, $acf_key ){
    $args['alt'] = array(
        'type' => 'text', 
        'label' => 'Altnative Text', 
        'name' => 'alt', 
        'value' => get_field($field . '_alt', $attachment_id)
    );
    $args['status'] = array(
        'type' => 'select', 
        'label' => 'Status', 
        'name' => 'status', 
        'value' => array(
            array(
                '1' => 'Active',
                 '2' => 'Inactive'
            ), 
            get_field($field . '_status', $attachment_id)
        )
    );
    return $args;
}
add_filter( 'acf_photo_gallery_image_fields', 'my_extra_gallery_fields', 10, 3 );
</code></pre>
<p>Supported field types:<br />
* text, date, color, datetime-local, email, number, tel, time, url, week, range, checkbox, radio, textarea, select</p>
<h4>How to get values of extra fields</h4>
<p>You can use ACF helper function <code>get_field</code></p>
<pre><code>get_field('photo_gallery_alt', $id);
get_field('photo_gallery_class', $id);
</code></pre>
<h4>Pull caption from attachment caption field</h4>
<p>By default the caption is being pulled from description field. Add the following filter to your <code>function.php</code> to pull the caption from attachment caption field.</p>
<pre><code>add_filter( 'acf_photo_gallery_caption_from_attachment', '__return_true' );
</code></pre>
<h4>REST API</h4>
<p>Send HTTP Request to URL to get JSON response of all posts</p>
<pre><code>http://{domain}/wp-json/wp/v2/{POST_TYPE}/
</code></pre>
<p>Send HTTP Request to URL to get JSON response of specific post</p>
<pre><code>http://{domain}/wp-json/wp/v2/{POST_TYPE}/{POST_ID}/
</code></pre>
<p>When you receive the response, see the ACF item which contains ACF photo gallery name and array of images.</p>
<h4>Installation and basic usage tutorial</h4>
<p><iframe loading="lazy" title="ACF Photo Gallery Field - Installation and Basic Usage | WordPress" width="750" height="422" src="https://www.youtube.com/embed/c7u9FwVLe9Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>ACF Photo Gallery Field on WordPress Custom Post Type tutorial</h4>
<p><iframe loading="lazy" title="ACF Photo Gallery Field on WordPress Custom Post Type" width="750" height="422" src="https://www.youtube.com/embed/5iTV0JVFFOE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>How to use Elementor dynamic tags with ACF Photo Gallery Field plugin tutorial</h4>
<p><iframe loading="lazy" title="How to use Elementor dynamic tags with ACF Photo Gallery Field plugin | WordPress" width="750" height="422" src="https://www.youtube.com/embed/XlSx_weZXoU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with: ACF 4, 5 and 6</p>
<h4>Issues</h4>
<p>Just like any other WordPress plugin, this plugin can also cause issues with other themes and plugins. If you are facing issues making this plugin work on your WordPress site, please do ask for help in the support forum. This way we can help you out and prevent this issue from happening to someone else. If you want to talk to me directly, you can contact me via my website <a href="http://www.navz.me/" rel="nofollow ugc">http://www.navz.me/</a></p>


ACF Photo Gallery Field

Hi,

I would like to say that is a nice solution, I use it quite often :)

The great solution :)

PHP Fatal error

A lightweight extension of Advanced Custom Field (ACF) that adds Photo Gallery field to any post/pages on your WordPress website.

Custom Block Builder – Lazy Blocks vs ACF Photo Gallery Field