Add Custom Content Above the Collection Images

Add some static, custom content above the collection images.

function my_picu_collection_display_before_images() {
	echo '<div style="margin: 1rem; padding: 1rem; background-color: #f0f; color: #fff;">Lorem ipsum dolor sit amet…</div>';
}

add_action( 'picu_before_collection_images', 'my_picu_collection_display_before_images' );Code language: PHP (php)

---

Let’s make it a bit more dynamic, by adding some custom meta data to a collection, which we will then display above the images.

1. Enable custom_fields support for picu collections:

function my_picu_cpt_collection_args( $args ) {
    array_push( $args['supports'], 'custom-fields' );
    return $args;
}

add_filter( 'picu_cpt_collection_args', 'my_picu_cpt_collection_args' );Code language: PHP (php)

When you now edit a collection the Custom Fields meta box will be displayed:

For our example we create a new field called client_message.

Now you can use the picu_before_collection_images filter to display the message:

function my_picu_collection_display_before_images() {
    $message = get_post_meta( get_the_ID(), 'client_message', true );
    if ( ! empty( $message ) ) {
        echo '<div style="margin: 0 1rem;">' . $message . '</div>';
    }
}

add_action( 'picu_before_collection_images', 'my_picu_collection_display_before_images' );Code language: PHP (php)