Media File Attachment Data in Bricks

Updated on 15 Aug 2024

With a query loop of type Posts and Post Type of “Media”, it is possible to output post-specific images (or files or any other attachment types allowed in WordPress Media Library) like the attached images for posts or ACF Gallery field images for building custom galleries in Bricks.

This Pro tutorial shows how we can retrieve these attachment-specific properties:

• ID
• Alternative Text
• Title
• Caption
• Description
• File URL

These can be used inside the query loop enabled-block for dynamic media items listing/grids in Bricks.

Step 1

Ensure that your query type is set up like this:

Step 2

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php

// Function to get attachment description
if ( ! function_exists( 'bl_get_attachment_description' ) ) {
	function bl_get_attachment_description() {
		return get_post( BricksQuery::get_loop_object_id() )->post_content;
	}
}

// Function to get attachment alt text
if ( ! function_exists( 'bl_get_attachment_alt' ) ) {
	function bl_get_attachment_alt() {
		$alt = trim( strip_tags( get_post_meta( BricksQuery::get_loop_object_id(), '_wp_attachment_image_alt', true ) ) );

		if ( empty( $alt ) )
			$alt = wp_get_attachment_caption( BricksQuery::get_loop_object_id() ); // If not, Use the Caption
		if ( empty( $alt ) )
			$alt = get_the_title( BricksQuery::get_loop_object_id() ); // Finally, use the title

		return $alt;
	}
}

// Function to get attachment file size
if ( ! function_exists( 'bl_get_attachment_file_size' ) ) {
	function bl_get_attachment_file_size() {
		$attachment_file = get_attached_file( BricksQuery::get_loop_object_id() );
		$attachment_file_size = filesize( $attachment_file );
		$attachment_file_size = size_format( $attachment_file_size );

		return $attachment_file_size;
	}
}

Step 3

Image

To display the image in the loop, add an Image element and set its source to

{post_id}

Alt text

{echo:bl_get_attachment_alt}

File URL

Title

Caption

Description

{echo:bl_get_attachment_description}

Step 4

Whitelist the functions.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'has_blocks',
    'bl_get_attachment_description',
    'bl_get_attachment_alt',
    'bl_get_attachment_file_size',
    'get_the_title',
    'wp_get_attachment_url'
  ];
} );

References

https://brickslabs.com/media-library-pdf-attachments-listing-in-bricks/

https://core.trac.wordpress.org/browser/tags/4.1/src/wp-includes/media.php#L719