Using Pods Image URL with Oxygen’s Dynamic Data

Oxygen currently does not have integration with Pods like it does with ACF and Meta Box.

That doesn’t mean we can not set the URL of Oxygen’s Image component to be pulled from a File / Image / Video [type="file"] type of Pods field, thanks to Oxygen’s dynamic data feature.

This tutorial provides the steps to register a custom function that takes the field name and property as parameters and returns the specified property’s value for the supplied field name. We can then use this with PHP Function Return value in Oxygen.

We are going to add a hero image field and retrieve its URL inside Oxygen.

Step 1

Install and activate Pods.

Pods Admin > Add New.

Create a new Pod attached to your desired post type – let’s say page in this example.

For this you could simply click on “Add custom fields to Pages” under One-Click Quick Actions.

Specify the Label for the field as say, Hero Image.

Pods should autofill the field name as hero_image.

Select the Field Type as File / Image / Video.

Step 2

Edit your Page(s) and populate the field.

Step 3

Edit the Template that applies to all the Pages with Oxygen and add a Code Block (temporarily).

PHP & HTML:

<?php
	echo pods()->field( 'hero_image._src' );
?>

We are using Pods’ field() traversal notation while specifying the name of our custom field and the property name to be pulled. src is for the full-sized image’s URL.

The above should print the URL of the image field.

Now that you know that’s working let’s create a custom function which takes the field name and property as the arguments (or inputs) and returns (or outputs) the value of the given field’s given property.

You can delete the Code Block.

Step 4

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Get Pods Field’s Field Data

Code:

function wpdd_get_pod_field_data( $field_name, $property ) {
	return pods()->field( "{$field_name}" . '._' . "{$property}" );
}

Set the snippet to run everywhere. Save changes and activate.

Step 5

Back in the Oxygen editor, add an Image component.

Click data button and in the “Insert Dynamic Data” dialog, click “PHP Function Return value”.

Function Name: wpdd_get_pod_field_data
Function Arguments: hero_image,src

Note: It is important NOT to have a space after the comma in function arguments in Oxygen editor.

Click INSERT.

That’s it! You should be able to see the image associated with the current Page being viewed.

This is not meant to be comprehensive tutorial on using Pods with Oxygen and should be considered an introduction. If there is anything particular you are looking to do with Pods and Oxygen, feel free to ask in our Facebook group and we may able to write a tutorial or two for our site members.