Displaying a shortcode

Hi @maxstub,

You don’t need to create any field to display shortcodes. Simply choose the field type as dynamic and paste the shortcode in the field name.

Best, Phi.

Hi @mr2p Thanks for the reply. I’m not sure that will work. Each gallery generates a shortcode so if I paste [photoblocks id=4], for example, in the template then all the pages generated from that template will show the same gallery. Just to elaborate, this is for a Portfolio section showcasing multiple Projects, each with a gallery of images ([photoblocks id=1], [photoblocks id=2] etc). Thanks again.

Hi @maxstub,

Below are steps to display your shortcode:

1. Create a ACF text field called gallery_shortcode for inputting your shortcode for each portfolio
2. Add MFB to your template, set the field type as dynamic and the field name as my_gallery
3. Insert the custom code into your theme/plugin.

You don’t need to create a field for my_gallery. It is just a placeholder to display custom code.

Here is the custom code:

add_filter(
  'meta_field_block_get_block_content',
  function ( $block_content, $attributes, $block, $post_id, $object_type ) {
    $field_name = $attributes['fieldName'] ?? '';

    if ( 'my_gallery' === $field_name ) {
      $shortcode_value = get_post_meta( $post_id, 'gallery_shortcode', true );
      if ( $shortcode_value ) {
        $block_content = do_shortcode( $shortcode_value );
      }
    }

    return $block_content;
  },
  10,
  5
);

Let’s me know if you still need further assistance.

Best, Phi.

Hi @mr2p Thanks again for your reply. I followed your instructions and, although it now displays something, what it displays on the page looks more like the unprocessed gallery (the below is for shortcode [photoblocks id=3]:

#photoblocks-3 {width: 100%;} #photoblocks-3 .pb-block {border-color: #333333;} #photoblocks-3 .pb-title {color: #ffffff;font-size: 20px;} #photoblocks-3 .pb-description {color: rgba(255, 255, 255, 0.7);font-size: 14px;} #photoblocks-3 .pb-block.pb-type-text .pb-overlay {background-color: #ffffff;} #photoblocks-3 .pb-block.pb-type-text .pb-title, #photoblocks-3 .pb-block.pb-type-text .pb-description {color: #333333;} #photoblocks-3 .pb-block.pb-type-text .pb-title {font-size: 16px;} #photoblocks-3 .pb-block.pb-type-text .pb-description {font-size: 12px;} #photoblocks-3 .pb-overlay {background: rgba(0, 0, 0, 0.15);} #photoblocks-3.pb-lift.show-empty-overlay .pb-block.pb-type-image:hover, #photoblocks-3.pb-lift .pb-block.pb-type-image.with-text:hover { box-shadow: rgba(0, 0, 0, 0.15) 0 0 20px; } #photoblocks-3 .pb-block { } #photoblocks-3 .pb-block .pb-social button {color: #ffffff;font-size: 14px;} #photoblocks-3 ul.pb-filters a.selected {border-color: #444444;} #photoblocks-3 ul.pb-filters.pb-filters-style-boxed a.selected {border-color: #444444;} .photoblocks-fancybox-3 .fancybox-bg {background-color: rgba(0, 0, 0, 0.75);} #photoblocks-3 .pb-blocks .pb-type-image {max-width: calc( 100% – 0px )}

Hi @maxstub, it is not unprocessed, it is encoded. I think you can skip this encoding step by replacing my_gallery with [my_gallery]. Don’t forget to update it in the custom code above.

Best, Phi.

It works ?? Thanks a lot! 5-star support!

@maxstub You’re welcome. I’m glad you sorted it out. If you don’t mind, please help this plugin grow by giving it a rating here.

Thanks, Phi.

Hi @mr2p quick question: I’m trying to insert a video embed ACF field. In ACF I have to define the dimensions of the video but that makes it non-responsive. I think I could wrap the MFB inside an iFrame with 100% width but how could I insert the field in there? Or is there a better solution?

Thanks! Ramon

Hi Ramon @maxstub,

You could add some custom CSS to make the video responsive like this one from ACF. I think that is the best solution.

Best, Phi.

Thanks Phi @mr2p ! Once again a very helpful response ??

• This reply was modified 2 months, 3 weeks ago by maxstub.
• This reply was modified 2 months, 3 weeks ago by maxstub.

Hi Phi?@mr2p Do you know if it’s possible to carry forward the focal point for the background image of a Cover block? I have a Cover block on the template with Featured Image as the background image. Some of the featured images don’t look good when shown as full width and I was thinking maybe I could use ACF to enter the focal point values and then use MFB to somehow add those to the template. Or maybe there is a different way of doing it?

Hi Ramon?@maxstub,

You can accomplish that with MFB to display custom CSS for your custom focal point value. However why not simply crop your featured images? It’s much easier than writting some custom code.

Best, Phi.