Output HappyFiles Folders in Metabox Select-Field

This tutorial is part of a series where I’m gonna show you how to output custom HappyFiles Galleries and Sliders. Part one will cover a little Meta Box Integration, so you can also manage the galleries and sliders inside your Bricks’ single templates.

Bricks 1.5.0 will introduce the possibility to query against the post_type “attachment” which will bring the opportunity to query after HappyFiles folders. That’s the major reason for me to separate this tutorial in different steps as you would still need this step of the tutorial for outputting it dynamically to your single template.

Register the code first

First, you need to copy & paste the provided PHP Snippet to fetch all HappyFiles folders and output them in the correct format for MetaBox.

In case you don’t know where to place that snippet I recommend you to download & install the child theme from your Bricks account and paste the snippet in the functions.php file of it!

<?php
function get_happyfile_folders() {
    $outputChilds = true;
    $args = [
        "taxonomy" => "happyfiles_category",
        //"slug" => "downloads", // get Folder by slug
        "orderby" => "name",
        "order" => "ASC",
        "hide_empty" => false,
    ];

    $folders = get_terms( $args );

    $selectOptions = [];
    foreach ( $folders as $folder ) {
        if ( ! $outputChilds && $folder->parent != 0 ) {
            continue;
        }
        $selectOptions[$folder->term_id] = $folder->name;
    }
    return $selectOptions;
}
?>

From now on you have acces to the function get_happyfile_folders() which basically only looks for all HappyFiles folders and returns them in the needed format.

Parameters ($outputChild)

If you don’t want to have the option to select child folders then you should definitely switch $outputChilds to false.

Add your MetaBox Fields

Next, you have to add your Metabox fields. I normally use MetaBox for CPTs like Job Listings for all the stuff that can be standardized. I’ve developed the snippet above for a customer who sells Fences. So my CPT was about the different fence types and he could choose which HappyFiles gallery he wants to show on which post type and he is also able to easily keep the reference images up to date.

With that being said as a short demo use-case, you’ll need to register your MetaBox Fields. That snippet above works very well with the MetaBox ‘select’ field. But instead of passing your options you would need to provide the callback-function like so:

HF_MB-Integration

In clean words: callback: get_happyfile_folders

Validate the functionality

We haven’t created an output yet, but from now you should be able to choose a folder from your select-dropdown. You can test it out on your posts.

HF_MB-Integration(2)

How to get the corresponding Images/Files on Frontend (preview)

I’m gonna provide the steps on how to query after the Images/Files on Frontend. Feel free to use that code if you are, like me, impatient and can’t wait for the follow-up guides! 😉

function output_happyfiles() {
    // ENTER THE ID OF YOUR METABOX-FIELD HERE:
    $hf_id = rwmb_meta( 'ID-OF-YOUR-MB-FIELD-GOES-HERE' );
    $args = [
        "post_type" => "attachment",
       // "post_mime_type" => "image",
        "post_status" => "inherit",
        "posts_per_page" => -1,
        "tax_query" => [
            [
                "taxonomy" => "happyfiles_category",
                "field" => "ID",
                "terms" => $hf_id,
            ],
        ],
    ];

    $hf_query = new WP_Query( $args );
    
    // you could probably loop here through the resulsts and output the images!
    return $hf_query->posts;
}
Get access to all 524 Bricks code tutorials with BricksLabs Pro

5 comments

  • Travis Reason

    I'd love to be able to use this setup. How do we output the images in a gallery on the frontend? I can't find the rest of this series.

  • oli thompson

    Hi Sridhar,
    Hopefully this may be a clearer explanation...

    I am basically trying to copy this video tutorial by Nicholas Arce
    https://www.youtube.com/watch?v=7BDK16bxv3k&t=769s

    In this video he is trying to combine the an archive and category templates. Effectively I would just like to create just one archive page that shows category pages. These category pages are defined by the happyfiles folders in the media library (where the images are placed).

    > So the images are organised within a happyfiles media folders
    > In a custom post type the taxonomy field (category) is selected
    > The custom post type archive page queries to the following...
    ---> Category: Name / featured image

    My project looks like his although I haven't added any of the dynamic data queries.

  • oli thompson

    Hi Wolfgang,

    I was just following your great tutorial, which I want to adapt into my project. I was wondering if there is a way to go further to create some kind of taxonomy for media folders.

    My intended use case is to create an archive template for an artist website. On the website there is a commissions "archive" page (including paintings, drawings, sculptures and prints). Within each archive page item there is a separate gallery of images.

    If I am creating media folders for each "archive" page (including paintings, drawings, sculptures and prints) it seems that it could be simpler if I could set the taxonomy of the media folder and link that to my custom post type (so that I would not have to label and sort my media files and post type taxonomies separately.

    Would be really Interested to hear how to might approach this best,
    Many Thanks,
    Oli

Leave your comment

 

Related Tutorials..

Pro
Ordering Meta Box group rows by a sub field in Bricks

Ordering Meta Box group rows by a sub field in Bricks

In the BricksLabs Facebook group a user asks: Any idea how to set the sort order of a cloneable group in the query? In this…
Read more →
Pro
Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

In the Meta Box Facebook group a user asks: Hi all, wondering if I can get some help. For custom field 1, I am using…
Read more →
Categories:
Tags:
Pro
Filtering Query Loop Posts by a Non-empty Custom Field in Bricks

Filtering Query Loop Posts by a Non-empty Custom Field in Bricks

This Pro tutorial shows how we can prefilter the results of a query output by a Bricks query loop to only those for which the…
Read more →
Categories:
Tags:
How to create custom colorthemes for your website with happyfiles

How to create custom colorthemes for your website with happyfiles

Happy Files is certainly known to many as the media management of the Wordpress media library, which is in dire need of improvement.
Developed by Thomas…
Read more →
Limiting the Query Loop Posts Output to Post IDs From a Custom Field in Bricks

Limiting the Query Loop Posts Output to Post IDs From a Custom Field in Bricks

A user asks: Recently Bricks introduced the PHP query editor that lets us modify the query parameters right within the query dialog of the builder…
Read more →
Categories:
Tags:
Pro
Media Library PDF Attachments Listing in Bricks

Media Library PDF Attachments Listing in Bricks

Updated on 9 Sep 2024 This Pro tutorial provides the steps for displaying PDF files from a HappyFiles folder as a list/grid using a Bricks…
Read more →