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;
}
Instant access to 390+ Bricks code tutorials with BricksLabs Pro

3 comments

  • 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