BeBuilder 3 - Add Support for additional WordPress Image Sizes
Thank you for all the hard work that clearly went into BeBuilder 3! Transitioning to it has been overwhelmingly positive.
I am currently struggling with one aspect however. Our client has requested the ability to select from some additional hard cropped image sizes. The built in WordPress functionality for additional sizes seems appropriate. In our child theme we have defined 3 new sizes:
add_action( 'after_setup_theme', 'bvt_setup_custom_images' );
function bvt_setup_custom_images() {
add_image_size( 'large-4-3', 1000, 750, true ); // 1000 pixels wide by 750 pixels tall, hard crop mode
add_image_size( 'large-3-4', 750, 1000, true ); // 750 pixels wide by 1000 pixels tall, hard crop mode
add_image_size( 'full-width-splash', 1800, 600, true ); // 1800 pixels wide by 600 pixels tall, hard crop mode
}
Then we also added a filter to add those image sizes to the admin interface:
add_filter( 'image_size_names_choose', 'bvt_custom_images_add_to_ui' );
function bvt_custom_images_add_to_ui( $sizes ) {
return array_merge( $sizes, array(
'large-4-3' => __( 'Large Cropped 4:3' ),
'large-3-4' => __( 'Large Cropped 3:4' ),
'full-width-splash' => __( 'Full Width Splash' )
) );
}
Now this works great with the WordPress Content editor, and we can also select from these new sizes when adding images with the rich text editor that's inside a BeBuilder Column element.
Frustratingly though, the other BeBuilder elements, most importantly the Image Element, do not utilize this filter for the image size chooser. In previous versions I found a way to make it work by overriding the class Mfn_Builder_Fields (located in /functions/builder/class-mfn-builder-fields.php) and adding my new choices to the Image Element fields, like so:
array(
'id' => 'size',
'type' => 'select',
're_render' => true,
'title' => __('Size', 'mfn-opts'),
'desc' => __('Select image size from <a target="_blank" href="options-media.php">Settings > Media > Image sizes</a> (Media Library images only)<br />or use below fields for HTML resize', 'mfn-opts'),
'options' => array(
'full' => __('Full size', 'mfn-opts'),
'large' => __('Large', 'mfn-opts') .' | '. mfn_get_image_sizes('large', 1),
'medium' => __('Medium', 'mfn-opts') .' | '. mfn_get_image_sizes('medium', 1),
'thumbnail' => __('Thumbnail', 'mfn-opts') .' | '. mfn_get_image_sizes('thumbnail', 1),
'large-4-3' => __('Large Cropped 4:3', 'mfn-opts'),
'large-3-4' => __('Large Cropped 3:4', 'mfn-opts'),
'full-width-splash' => __('Full Width Splash', 'mfn-opts'),
),
'std' => 'full',
),
This had worked for our needs in the previous versions of BeBuilder, but it seems that BeBuilder 3 does not utilize this class for generating its fields. Adding the new size elements do not appear in the drop down size chooser anymore. I have not been able to locate in the theme code anywhere else that is responsible for creating the image size chooser options in BeBuilder 3.
Ideally it would be great if the BeBuilder Image Element supported the built in WordPress filter for adding image sizes, but if that is not feasible, can you point me in the right direction where I can similarly override the theme code to add them as I did in the past?
Thanks!
Mark Mitchell
Comments
Hi,
Sorry, but what you ask for requires file customization which in reference to the Item Support Policy is not allowed. http://themeforest.net/page/item_support_policy
So if you want to modify files and don't know how, you should contact your web developer. Item Policy says:
Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customization services or checking out the great service providers on Envato Studio.
If you would like to see this feature in future updates, please, let us know on the following topic:
https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest
Thanks
Hi Phil,
I understand that you cannot provide detailed custom solutions. However I am a developer and am trying to implement this for a client that is requesting this functionality. We had developed a solution that worked in prior versions of BeTheme but now no longer does with the new builder. As a developer, I am unsure where to turn to solve this. It is not covered in the documentation (understandably because it involves code customization) and I haven't been able to locate in the source code where the element fields are generated for new BeBuilder - as the changes to the class that was used before does not seem to apply. I was hoping the support forum might be able to point me in the right direction.
Is there another avenue of support for developers trying to make customizations other than just trying to reverse engineer the parent theme's code and figure it out?
Thank you.
I can lead you to which files are responsible for what.
The whole logic and functionality of the image element are placed in the theme-shortcodes.php file in the function sc_image.
Size selection is placed in the class-mfn-builder-fields file.
But if you need assistance with adjusting it, I suggest checking the following link:
https://www.rewrkz.com/
or you can check our FB group, and ask for help there:
https://www.facebook.com/groups/betheme/
Best regards
Thank you for the additional information. I was not aware of the FB group - I will join that as well.