Bricks template with standard Wordpress password protection

Hi guys

maybe someone can tell me if I made a mistake or if this is not possible.

My question: Can a Bricks template (and its content) be password protected via the standard Wordpress function?

I am trying to create password protected galleries in Bricks. I plan to create a password protected Bricks template and add this template into the pages that should contain the password protected gallery.

For this I made a template with Bricks. The template only contains a gallery widget.

In the Wordpress part of the template, I selected password protected:

password

Now my problem:

When I add the Bricks template into a Bricks page and view the page in the front end, instead of the standard Wordpress form to enter the password, the template content - e.g. the gallery - is shown .

If I render the template directly from Wordpress via preview, the password form is shown and the gallery is hidden.

Does this mean that a Bricks template cannot be password protected via the standard Wordpress function if the template becomes part of another Bricks page?

Thanks

Patric

1 Like

@Patric Could using a specific role for the permitted users be a solution for that? This way you could use the conditions in Bricks.

Hi David

thanks. Unfortunately, I can’t use user roles.

The gallery has to be accessible for any visitor that knows the password.

I need a similar functionality like Envira Gallery that has password protection. When I add the shortcode for the Envira Gallery in the unprotected post, the gallery is correctly password protected.

I assume Envira achieves this functionality by using a custom post type?

I am now looking into trying with a custom post type gallery with standard wordpress password functionality. The question is, how do I get that into a Bricks page or template while keeping the Wordpress password functionality…

Cheers

Patric

I have tried this now. The password protection seems to be related to the page (not the template).

Hi David

yes, that confirms what I thought.

I guess that’s the reason that the Wordpress password protection is lost on the way.

It would have been soooo easy.

I am now trying to write a code to overcome that. Let’s see…

Cheers

Patric

Hi

here is my code that I wrote.

It can be used to show a password protected content from a custom post type inside a Bricks page, post or template. This is necessary as standard Wordpress password protected content is shown without password if the page or post, inside which the password protected content shall be shown, is itself not password protected.

In my code below, I use the functionality to show an ACF gallery (with setting return format = image ID) if the visitor has entered the password. You can replace the gallery code with anything that shall be password protected.

<?php 

// First we enque the photoswipe for the lightbox functionality. This also requires a java script. This is optional.
wp_enqueue_script( 'bricks-photoswipe' );
wp_enqueue_style( 'bricks-photoswipe' );
// now the actual code starts
global $post;
/* The query args include the post ID to find the matching gallery. Explanation: In the custom post type gallery, a field
chochete_id exists that contains the post_id, to which the
gallery belongs to. This is used to "match" the gallery with the
post / page.
*/
$chochete_id = $post->ID;

$args = array(
    'numberposts'   => -1,
    'post_type'     => 'chochete_gallery',
    'meta_key'      => 'chochete_id',
    'meta_value'    => $chochete_id
);

$the_query = new WP_Query( $args );

if( $the_query->have_posts() ):
  while( $the_query->have_posts() ) : $the_query->the_post();

    // Check first if the gallery is not password protected
    if ( ! post_password_required( $post ) ) 
    {
    /* Continue if no password is required or password cookie is present. We can execute the gallery code now */

    $image_ids = get_field('chochete_gallerie');
    
    if( $image_ids ) 
      {
    // Generate string of ids ("123,456,789").
    $images_string = implode( ',', $image_ids );
    // Generate and do shortcode.
    $shortcode = sprintf( '[' .'gallery ids="%s" columns="5" size="medium" link="none" ]', esc_attr($images_string)); 
         
    echo do_shortcode( $shortcode );
      }
       
    }else{
    // password is required and no password cookie exists
    echo get_the_password_form();
    }  
 
  endwhile; 
    ?> </ul><?php
endif; ?>

<?php wp_reset_query();

?>

Cheers

Patric

Ok, here comes version 2, in case somebody is interested.

This version uses the Bricks image-gallery element. The ACF gallery to be used has to use “Array” as the Return Format.

<?php 

global $post;
/* The query args include the post ID to find the matching gallery. Explanation: In the custom post type gallery, a field
chochete_id exists that contains the post_id, to which the
gallery belongs to. This is used to "match" the gallery with the
post / page.
*/
$chochete_id = $post->ID;

$args = array(
    'numberposts'   => -1,
    'post_type'     => 'chochete_gallery',
    'meta_key'      => 'chochete_id',
    'meta_value'    => $chochete_id
);

$the_query = new WP_Query( $args );

if( $the_query->have_posts() ):
  while( $the_query->have_posts() ) : $the_query->the_post();

    // Check first if the gallery is not password protected
    if ( ! post_password_required( $post ) ) 
    {
    /* Continue if no password is required or password cookie is     present. We can execute the gallery code now */
    $images = get_field('chochete_gallerie');
    if( $images ): 
   
        foreach( $images as $image ):
              
                $gallery_settings['items']['images'][] = [
                'id' => $image['id'],
                'full' => esc_url($image['url']),
                'url' => esc_url($image['url'])
                 ];
            
        endforeach;
    
   endif;
   
    $gallery_settings['items']['size'] = 'thumbnail';
    $gallery_settings['link'] = 'lightbox';
    $gallery_settings['layout'] = 'grid'; 
  //  $gallery_settings['columns'] = '4';  
  //  $gallery_settings['gutter'] = '10';  
  
  /* Note: The gallery columns and gutter are set in the 
   css of this code element:
  .bricks-layout-wrapper {
  --columns: 4 !important;
  --gutter: 10px !important;
    }
  */      
  
// Initialize the Bricks gallery class with our settings
$new_gallery = new \Bricks\Element_Image_Gallery( ['settings' => $gallery_settings] );

// Setup frontend actions and filters for the element if any
$new_gallery->load();

ob_start();

// Enqueue the necessary scripts & styles, populate and output the HTML
$new_gallery->init();

echo ob_get_clean();
      
       
    }else{
    // password is required and no password cookie exists
    echo get_the_password_form();
    }  
 
  endwhile; 
 
endif;

wp_reset_query();

?>
1 Like

Hi Guys

here comes version 3 with an ACF relationship field that connects the ACF gallery CPT to the post CPT. With this link no “manual” query is necessary anymore to match the gallery with the post.

You can of course add any content into the CPT that will be connected to the post CPT, not just a gallery like I did. Whatever content you add will be password protected in the front-end (if you add the standard Wordpress password protection of course), even if the post CPT itself is not password protected.

Add the ACF relationship field (pointing to the ACF gallery CPT) into the post CPT and assign an ACF gallery directly inside the post (of the post CPT).

 <?php 
// This code needs the ACF relationship field
$featured_gallery = get_field('the_acf_rel_field'); //This is the ACF relationship field

if( $featured_gallery ): 
 foreach( $featured_gallery as $gallery_post ): 
//Here we get the ACF gallery field
  $images = get_field( 'acf_gallery_field', $gallery_post->ID );
   if( $images ): 
     foreach( $images as $image ):
      $gallery_settings['items']['images'][] = [
                'id' => $image['id'],
                'full' => esc_url($image['url']),
                'url' => esc_url($image['url'])];
     endforeach;
//Show the front-end how many images were found
    echo "<span style='color: #7a7a7a';>(".count($gallery_settings['items']['images'])." Images)<br></span>";
   endif;
 endforeach;

$gallery_settings['items']['size'] = 'medium';
$gallery_settings['link'] = 'lightbox';
$gallery_settings['layout'] = 'masonry';

if (post_password_required( $gallery_post->ID ) ) 
     // password is required and no password cookie exists
  {  echo get_the_password_form();
  }else{

$new_gallery = new \Bricks\Element_Image_Gallery( ['settings' => $gallery_settings] );

// Setup frontend actions and filters for the element if any
$new_gallery->load();

ob_start();

// Enqueue the necessary scripts & styles, populate and output the HTML
$new_gallery->init();

echo ob_get_clean();
} //end of password check routine
endif;

?>

In the css settings of the code element, type this (i.e. for 5 columns and 10px gap):

.bricks-layout-wrapper {
  --columns: 5 !important;
  --gutter: 10px !important;
}

Cheers

Patric

1 Like

For completeness’ sake, here is the link to the “How To” article that explains how you can achieve the same with using the Bricks conditions and 1 line of code instead of the solution above.

Cheers

Patric

2 Likes