Displaying a shortcode
-
Hi. I’m trying to add the shortcode generated by the plugin Gallery Photoblocks into a template. I am using ACF to create a custom post type with custom fields but I’m not sure what type of field I should select for the Photoblock shortcode. I have tried as a Text field and adding this custom field to the template using Meta Field Block but it’s showing the shortcode [photoblocks id=4] rather than the gallery. Please help 🙂
-
Hi @maxstub,
You don’t need to create any field to display shortcodes. Simply choose the field type as
dynamicand 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:
- Create a ACF text field called
gallery_shortcodefor inputting your shortcode for each portfolio - Add MFB to your template, set the field type as
dynamicand the field name asmy_gallery - 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_gallerywith[my_gallery]. Don’t forget to update it in the custom code above.Best, Phi.
It works 🙂 Thanks a lot! 5-star support!
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 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.
- Create a ACF text field called
The topic ‘Displaying a shortcode’ is closed to new replies.