Automating Shortcodes to ACF conversion

• Tazintosh

• December 28, 2016 at 3:13 am

Not sure the title is self explanatory, sorry for my english…

Hi folks,

Here’s the thing:
My actual website contains hundreds of posts with my Before|After function. It’s a free tool that allow anyone to compare two images. I’ve done it to show my viewers the adjustment work behind a photography.
Anyway, until now, to handle this, I was using my own shortcode, which basically looks like this (there are much more attributes):
[taz_before_after large="yes" width="1200" height="800" beforeimage="IMG_3164-RAW.jpg"]IMG_3164.jpg[/taz_before_after]

Since I’m now vastly using ACF, I thought it would be much more pleasant for me if I could “visually” create my comparison rather than using shortcodes. That way, I could instantly by editing a post “see” my before and after images, set my function options, etc.
So I did it and so far, everything is perfectly working.

Still, the question is the following: is there a way for me to automate the update of each of my posts by adding and populating my before|after custom field group?

• I can easily dump my database posts containing comparisons and build a file or var that would contain (for ie) the before/after images names, the id of the post, any function attribute, etc.
• Could I easily build a php function that would batch create those ACF comparisons?
• Would you see any other way?

Thanks in advance.
Best regards

Attached is what my ACF fields group actually looks like:

• zeniq_demo

• December 28, 2016 at 10:40 am

I dont understand.

• James

• December 28, 2016 at 11:02 am

Hi @tazintosh

I’m afraid I don’t understand the situation. Could you please share the screenshots of how it looks like right now and let me know how you want it to be? Also, could you please let me know the detailed steps of the automation?

If you want to update a field (or maybe process an image) when you submit or update your post, I think you can use the acf/save_post hook. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/acf-save_post/.

Thanks 🙂

• Tazintosh

• December 28, 2016 at 7:33 pm

Hi guys, I’m sorry for not being able to clearly explain the first time.
I’ll try to complete my first post.

This is the actual state of my website
• the native WordPress content contains my before|after shortcode + my article.
• an ACF flexible field is located right under, giving me access to my brand new ACF before|after fields

┌─────────────────────────────────────────────────────────────────────┐
│Native WordPress Post Content                                        │
│                                                                     │
│                                                                     │
│                                                                     │
│This is where my actual shortcode is.                                │
│                                                                     │
│[taz_before_after large="yes" width="1200" height="800"              │
│beforeimage="IMG_3164-RAW.jpg"]IMG_3164.jpg[/taz_before_after]       │
│                                                                     │
│                                                                     │
│Noiram ego amore. Velisit eugiamconse diamcon cillum luctus pede     │
│facincilit cor viverra, facincilit rcilis tempor. Vendiam verit      │
│iliquiscipis eros doloboreet alis suscipit sagittis utate. Noiram ego│
│amore. Velisit eugiamconse diamcon cillum luctus pede facincilit cor │
│viverra, facincilit rcilis tempor. Vendiam verit iliquiscipis eros   │
│doloboreet alis suscipit sagittis utate. Noiram ego amore. Velisit   │
│eugiamconse diamcon cillum luctus pede facincilit cor viverra,       │
│facincilit rcilis tempor. Vendiam verit iliquiscipis eros doloboreet │
│alis suscipit sagittis utate.                                        │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
                                                                       
┌─────────────────────────────────────────────────────────────────────┐
│Fields Group (Flexible Content)                                      │
│                                                                     │
│                      ┌────────────────────────────────────────────┐ │
│                      │Add new flexible content (ie. Before|After) │ │
│                      └────────────────────────────────────────────┘ │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

This is what I would like to achieve:
• Creating my Before|After comparison using my ACF fields
• Removing my old shortcode

┌─────────────────────────────────────────────────────────────────────┐
│Native WordPress Post Content                                        │
│                                                                     │
│       NO more comparison shortcode                                  │
│Noiram ego amore. Velisit eugiamconse diamcon cillum luctus pede     │
│facincilit cor viverra, facincilit rcilis tempor. Vendiam verit      │
│iliquiscipis eros doloboreet alis suscipit sagittis utate. Noiram ego│
│amore. Velisit eugiamconse diamcon cillum luctus pede facincilit cor │
│viverra, facincilit rcilis tempor. Vendiam verit iliquiscipis eros   │
│doloboreet alis suscipit sagittis utate. Noiram ego amore. Velisit   │
│eugiamconse diamcon cillum luctus pede facincilit cor viverra,       │
│facincilit rcilis tempor. Vendiam verit iliquiscipis eros doloboreet │
│alis suscipit sagittis utate.                                        │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
                                                                       
┌─────────────────────────────────────────────────────────────────────┐
│Fields Group (Flexible Content)                                      │
│                                                                     │
│  ┌───────────────────────────────────────────────────────────────┐  │
│  │Before|After Fields Group                                      │  │
│  │                                                               │  │
│  ├──────────────┬────────────────────────────────────────────────┤  │
│  │   Content    │        ┌─────────────────────────────────────┐ │  │
│  ├─────────────┬┘ Title: │                                     │ │  │
│  │   Options   │         └─────────────────────────────────────┘ │  │
│  ├─────────────┤                                                 │  │
│  │Adv. Options │                                                 │  │
│  ├─────────────┤   Before Image             After Image          │  │
│  │             │  ┌─────────────────┐      ┌─────────────────┐   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │IMG_3164-RAW.jpg │      │   IMG_3164.jpg  │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  │                 │      │                 │   │  │
│  │             │  └─────────────────┘      └─────────────────┘   │  │
│  └─────────────┴─────────────────────────────────────────────────┘  │
│                                                                     │
│                                                                     │
│                                                                     │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

There is no issue doing this manually. I mean, going through all of my posts, one by one, and manually create a new ACF Before|After comparison, and then removing my old shortcode.
The problem is time. I’ve hundreds of posts like this one, and I cannot afford to edit each of them manually.

So I’m searching for a way that would allow me to automate this whole process.
As said, I can easily extract and build a list of all my comparison shortcodes + post ID.
The idea I had would be to make a function that would loop through this list, and add for each of my posts the related ACF before|after comparison.

For now, I don’t need to delete the old shortcode on my post content. I’ll find a way later.

Hope that’s more understandable now.

• James

• December 29, 2016 at 11:08 am

Hi @tazintosh

Thank you very much for the detailed explanation.

For something like that, you need to get the image data from the shortcode first. Because ACF needs the image ID to save the image field, you need to get it by processing the shortcode. I’m not sure how you process the shortcode, so could you please share the code?

After you get the before and after image IDs, you can update the flexible content by using the update_field() function. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/update_field/. Based on your explanation, it should be something like this:

// these are the before and after image IDs. You need to get it from the
// shortcode
$before_image = 99;
$after_image = 100;

// field_123456789abc is the flexible content field key
$field_key = "field_123456789abc";

// set the flexible content value
$value = array(
	array( "before_image_field" => $before_image, "after_image_field" => $after_image, "acf_fc_layout" => "before_layout" ),
	array( "before_image_field" => $before_image, "after_image_field" => $after_image, "acf_fc_layout" => "after_layout" ),
);

// update it
update_field( $field_key, $value, $post_id );

I hope this makes sense 🙂

• Tazintosh

• December 30, 2016 at 4:28 am

Hi James,

Thanks for the explanation. I’ll start working on this after some other tasks I’ve to finish.

To get the images IDs, I already made a function that can get the attachment ID from an image url, so this should not give me any problem.

Yet (without having tested), I’ve some questions about the update_field.
Actually, none of my comparisons posts have any ACF before after comparison set. This means that when I click to edit a post, the flexible content field is available, but no “Before|After Fields Group” (see my drawing) have been added in any way. (BTW, the “Before|After Fields Group” into the flexible content field is a clone).

Is the update_field able to act as if I would myself “add” the “Before|After Fields Group” and then populate its different subfields (before image, after image, etc.)?

• James

• December 30, 2016 at 10:22 am

Hi @tazintosh

Yes, the update_field() function can add or replace the current flexible content value.

If you want to replace the value, you can use the code I gave you before.

If you want to add the value (if you have existing value), you can get the flexible content value first and add the new value like this:

// you need to get the post ID dynamically too
$post_id = 99;

// get the existing value first
$value = get_field('flexible_content_name', $post_id);

// add the value instead of replacing it
$value []= array(
	array( "before_image_field" => $before_image, "after_image_field" => $after_image, "acf_fc_layout" => "before_layout" ),
	array( "before_image_field" => $before_image, "after_image_field" => $after_image, "acf_fc_layout" => "after_layout" ),
);

Also, please keep in mind that a clone field has a different structure based on the settings. Kindly check it first and adjust the value structure before updating it. You can check it like this:

$value = get_field('flexible_content_name', 99);

echo "<pre>";
print_r($value);
echo "</pre>";

I hope this helps 🙂

• Tazintosh

• January 13, 2017 at 10:46 pm

Hi James,

Today, I had the time between two project to continue to work on this.
Thanks to your help and guidance, I made it.
As you can see with the selected solution, I use the first one as I’ve to “add” everything and have no “existing values”.

My format sightly differs:

$value = array(
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after')
);

I’ll continue and hope everything will be ok!
Thanks again.

• Tazintosh

• January 14, 2017 at 8:52 am

Hi again James

Some of my post have more than one before|after shortcode.
I’ve built a huge array of hundreds of comparisons that I’ll loop through, like this:

$BAcomparisonArray = array(
array(
	'postID'			=> 7651,
	'beforeImage'		=> 'photo-7D-IMG_2201-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2201.jpg'
),
array(
	'postID'			=> 7729,
	'beforeImage'		=> 'photo-7D-IMG_2198-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2198.jpg'
),
array(
	'postID'			=> 7729,
	'beforeImage'		=> 'photo-7D-IMG_2201-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2201.jpg'
),
array(
	'postID'			=> 7995,
	'beforeImage'		=> 'photo-7D-IMG_2519-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2519.jpg'
),
array(
	'postID'			=> 7995,
	'beforeImage'		=> 'photo-7D-IMG_2822-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2822.jpg'
),
array(
	'postID'			=> 8008,
	'beforeImage'		=> 'photo-7D-IMG_2519-RAW.jpg',
	'afterImage'		=> 'photo-7D-IMG_2519.jpg'
));

But as you can see, for the posts where I have multiple before|after, the subarray appear multiple times with the same ID.

With my actual code (see below), only one before|after is added to my flexible content, while I would obviously need as many as necessary:

$value = array(
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after')
);
update_field($field_key, $value, $postID);

Is there a way to force the update field to create new entries?
Example, for ID 7729, the first will act as today by creating a new layout and populating it, but when my loop run through another array with the same ID, I would like a new layout to be created, not just updating my previous one.

I know that if I put as many arrays as necessary in my $value, the related layouts will be created for a same post (see below), but I don’t see quite well how to do this from $BAcomparisonArray.

$value = array(
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after'),
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after'),
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after'),
	array('before_image' => $before_image, 'after_image' => $after_image, 'acf_fc_layout' => 'before_after')
);

• Tazintosh

• January 15, 2017 at 1:55 am

Hi back,

I made it, with your second solution $value []= array(…
Thanks again.