WYWIWYG Widget Block/Background Image Field

• toad78

• October 27, 2016 at 6:13 am

So I’ve been pondering this issue for awhile and have read a variety of posts to determine how to solve this issue but can’t find the right answer to code it correctly:

I’ve created a custom field for WYSIWYG Widget Blocks for users to upload an image to use as a background image (Image, Image URL). After the Widget Block is created, I go into Appearance > Widgets and assign the block to it’s ‘Sidebar’.

I am able to get the Widget Block to post, but the background image (ACF field) will not display. I understand that I have to post the widget ID (https://www.advancedcustomfields.com/resources/get-values-widget/) in order to post the Widget Block the custom field is being used for. My issue is this scenario:

What if the admin wants to create a variety of Widget Blocks with different background images? How then can I code the template to determine to match the background image with the correct Widget Block? Because this doesn’t work (this posts an empty background URL:

<?php if ( is_active_sidebar( 'content-bottom' ) ) : 
	<div class="botcot" style="background-image: url('<?php the_field('widget_background_image'); ?>');">
		<?php dynamic_sidebar( 'content-bottom' ); ?>
    </div>
<?php endif;?>  

This does but only for ONE Widget Block (Block ID 62):

<?php if ( is_active_sidebar( 'content-bottom' ) ) : ?>
	<div class="botcot" style="background-image: url('<?php the_field('widget_background_image', 62); ?>');">
		<?php dynamic_sidebar( 'content-bottom' ); ?>
    </div>
<?php endif;?>

So my challenge still stands on how to post the background images for a variety of Widget Blocks that would be placed in their Sidebar positions?

• toad78

• November 3, 2016 at 4:29 am

Nobody?

• John Huebner

• November 3, 2016 at 5:37 am

This is just a guess, so I’m not sure if it will do you any good. Basically you need to alter the widget arguments for ‘before_widget’ and ‘after_widget’ based on the custom field. Like most widgets, where are no hooks in the widget itself to make these changes https://plugins.svn.wordpress.org/wysiwyg-widgets/trunk/includes/class-widget.php.

The closest I’ve been able to find is this WP hook https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/. From looking at it I’m guessing that $params contains information on all of the widgets that are in the sidebar, but again, this is just a guess. If the guess is correct you could loop through all of the widgets, find the right ones, get your custom field value and then modify the before and after widget arguments to include your container div with the background image.

• toad78

• November 4, 2016 at 2:02 pm

I guess I’m going to take a different approach to this.

I’ve now just assigned the Custom Field directly to a Text Widget and I’m trying to get the values that way.

Return Value: Image URL

Code:

<?php 

$image = get_field('widget_background_image', 'widget_' . $widget_id);

if( !empty($image) ): ?>

	<div style="background-image: url('<?php echo $image['url']; ?>');"></div>

<?php endif; ?>

Now it is my understanding that I should be seeing a background image based on this code, but all I get is the text in return and no image.

Capture-1.jp....jpg

• John Huebner

• November 4, 2016 at 10:17 pm

The main problem with WP widgets, and with all widgets that other people build that are based on the WP widget model, is that there are no filters or hooks inside the widgets to make modifications. I’ve had the same problem with existing widget code and making modifications and I almost always end up building my own custom widgets because it’s practically impossible to easily make changes to the existing ones.

Widgets aren’t overly complicated, you might even be able to convince the author or the one your using to add some hook so that you can filter the widget args. Maybe a filter that passes the arguments so that you can modify the before and after widget settings.

• toad78

• November 5, 2016 at 10:25 am

There’s a thought. It’s worth mentioning I suppose.

Stupid question: Will ACF ever make its own Custom Widget feature to where I can create the above scenario?

• John Huebner

• November 6, 2016 at 12:38 am

Anything’s possible, but I doubt it. I think that there is too much involved beyond managing custom field values which is the focus of ACF.