jameelmoses/acf-flexible-content-preview

Transforms ACF's flexible content field's layout list into a modal with image previews.

⛔ [DEPRECATED] Flexible Content Preview has become Flexible Content Extended for Advanced Custom Fields

Transforms ACF's flexible content field's layout list into a modal with image previews.

Image Conventions

• The size of the image should be 732 x 300.
• They should be named based on the layout's name (text_block) with underscores converted to dashes (text-block.jpg).

Image Location

Images should be placed in your theme. By default, images are located here: THEME/lib/admin/images/acf-flexible-content-preview.

Also note that you can filter this path, but it MUST be in your theme:

add_filter( 'acf-flexible-content-preview.images_path', $path );

NOTE: The path should not have a trailing beginning or trailing slash!

Additionally, you could filter all keys and/or images:

add_filter( 'acf-flexible-content-preview.images', $images );

Requirements

• ACF Pro >= 5.7.O plugin
• WordPress 4.7+ because of [get_theme_file_uri()](https://developer.wordpress.org/reference/functions/get_theme_file_uri)
• PHP 5.6+

Installation

Composer

• Add repository source : { "type": "vcs", "url": "https://github.com/jameelmoses/acf-flexible-content-preview" }.
• Include "acf-flexible-content-preview": "dev-master" in your composer file for last master's commits or a tag released.
• Then add your awesome layout images.

Contributing

Please refer to the contributing guidelines to increase the chance of your pull request to be merged and/or receive the best support for your issue.

Issues & Feature Requests

If you identify any errors or have an idea for improving the plugin, feel free to open an issue or create a pull request. Please provide as much info as needed in order to help us resolving / approve your request.

License

Flexible Content Preview for Advanced Custom Fields is licensed under the GPLv3 or later.

acf-flexible-content-preview's Issues

Child theme compatibility

Version information

• Plugin version : Last
• ACF version : Last
• PHP : PHP 7.2
• WordPress : Last

Steps to reproduce

1. Setup a parent theme and a child theme
2. Add ACF Flexible preview images in the parent theme (in the defalut path)
3. Activate child theme

What was expected

Thumbs should be displayed on Flexible content

What happened instead

Thumbs do not displays on Flexible content, path is looking for images in the child theme

preview image not displaying when block name starts with a number

When a block starts with a number the backgound image styling doesn't get applied.

seems to be fixed if you change the following line:

acf-flexible-content-preview/classes/main.php

Line 30 in 975ece2

$css .= sprintf( "\n\t .acf-fc-popup ul li a[data-layout=%s] .acf-fc-popup-image { background-image: url(\"%s\"); }", $layout_key, $image_url );

to

$css .= sprintf( "\n\t .acf-fc-popup ul li a[data-layout=\"%s\"] .acf-fc-popup-image { background-image: url(\"%s\"); }", $layout_key, $image_url );

Thus surrounding the data-layout attribute with quotes.

Image not showing for Table field added via extension

Version information

• Plugin version : 1.0.1
• ACF version : 5.8.9
• PHP : 7.4.2
• WordPress : 5.4

Steps to reproduce

1. Add field type via extension: https://en-gb.wordpress.org/plugins/advanced-custom-fields-table-field
2. Add images to folder as needed, matching field name ie. 'table.jpg' for field 'table'

What was expected

To see image in modal.

What happened instead

No image was shown despite images shown for sibling fields.

Custom images are not seeked

Version information

• Plugin version : 1.0.3
• ACF version : 5.8
• PHP : 7.3
• WordPress : 5.4.1

Steps to reproduce

1. add_filter('acf-flexible-content-preview.images_path', "dist/images/fcp");
2. add_filter('acf-flexible-content-preview.images_path', function() { return "dist/images/fcp"; });
3. I use a child theme

What was expected

1 returns an add_filter error callback function
2 do not show my images

Thx for your help !

Not an issue but an improvement/idea!

Hi there,

First of all: great f*cking plugin, i love it. I have an idea that will make this plugin even better.

It would be great if you can create subfolders. Any images within this subfolder are automatically subdivided into this 'category'.

As soon as you want to select a block in the admin you can find them much easier because they are divided by 'subfolder/category'.

This allows you to find the right block faster. I made an image to demonstrate this:

I understand that it is a free plugin and that you are under no obligation, but I thought: I share it with you.. maybe it is possible :)

Have a great day.

Preview Images Missing

Maybe this is because I'm trying this with WP 5.3? The images are placed in my theme folder/lib/admin/images/acf-flexible-content-preview/

Preview images don't show for nested flexible content

Version information

• Plugin version : 1.0.0
• ACF version : 5.8.4
• PHP : 7.2
• WordPress : 5.2.3

Steps to reproduce

1. Create an overall flexible content field
2. Create a repeater field inside the flexible content
3. Create a further flexible content field inside the repeater.

What was expected

I was expecting to see the preview images for the sub-flexible content as per normal.

What happened instead

No images appear for the sub-flexible content, they do appear for the overall "parent" flexible content.

PHP8.0 Warnings On Singleton Class

Version information

• Plugin version : Latest
• ACF version : Latest
• PHP : 8.0+
• WordPress : 5.9+

Steps to reproduce

1. Install any version of this plugin on a site running PHP 8+
2. Ensure WP_DEBUG is true and WP_DEBUG_LOG is true
3. Check error log for issues

What was expected

Plugin to run without warnings

What happened instead

Plugin has PHP errors due to final and private being used together in the Singleton class. By definition, a private function is final because it cannot be overridden by any subclass (only protected and public methods may be)

ACF 5.9 no longer shows the modal when adding flexible content

Version information

• Plugin version : 1.0.3
• ACF version : 5.9 (RC-1)
• PHP : 7.4
• WordPress : 5.5

Steps to reproduce

1. Update ACF to 5.9 RC 1
2. Go to edit a post/page with a flexible content field
3. Click add row

What was expected

The modal would appear as normal

What happened instead

Standard ACF behavior of the dropdown/up on top of the button.

Notes

ACF 5.9 has a large revamp of ACF admin. I have a pull request for this coming in a moment. It's an easy fix.

1.0.2 Update Causing Error

The latest update is throwing an error on pages (in WP Admin) using Custom Fields.

Notice: Undefined index: ID in /wp-content/plugins/advanced-custom-fields-pro/includes/acf-field-functions.php on line 361

Appears to be related to acf_get_fields($layout_field).