Month-based Background Image in Bricks

If you are looking to have different background images of an element for different quarters in a year, here’s one way of doing it:

Register a custom function that returns your desired quarter-specific image URL by adding this code in child theme‘s functions.php or a code snippets plugin:

// Function to return a specific image based on the current quarter.
function bl_get_month_image_url(): string {
	$month = date( 'F' );
	$month_image_url = '';

	switch ( $month ) {
		case 'January':
		case 'February':
		case 'March':
			$month_image_url = '/wp-content/uploads/2022/04/quarter1.jpg';
			break;
		case 'April':
		case 'May':
		case 'June':
			$month_image_url = '/wp-content/uploads/2022/04/quarter2.jpg';
			break;
		case 'July':
		case 'August':
		case 'September':
			$month_image_url = '/wp-content/uploads/2022/04/quarter3.jpg';
			break;
		case 'October':
		case 'November':
		case 'December':
			$month_image_url = '/wp-content/uploads/2022/04/quarter4.jpg';
			break;
	}

	return $month_image_url;
}

Replace the URLs for the four images.

In the Bricks editor select your element and set this for the image URL (dynamic data):

echo:{bl_get_month_image_url}

Reference

https://stackoverflow.com/a/4163212/778809

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro

1 comment

  • What is the syntax if I want to add multiple images to the "image gallery" widget?

Leave your comment