7th Sep '22
/
1 comment

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

Get access to all 633 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

 

Related Tutorials..

Pro
ACF Repeater sub field value dynamic data condition in Bricks

ACF Repeater sub field value dynamic data condition in Bricks

This Pro tutorial provides the steps to output an element on single posts (can be of any post type) only if a specified ACF (Pro)…
How to List Your Posts Divided by Categories in Bricks

How to List Your Posts Divided by Categories in Bricks

In this tutorial, we'll learn how to display a list of posts divided by each category. The DOM tree Here is how I structured my…
Categories:
Pro
Host Post’s Term in Bricks Query Loop

Host Post’s Term in Bricks Query Loop

Updated on 4 Mar 2025 In the BricksLabs Facebook group a user asked: Hi everyone, I’m facing a tricky situation that might have a simple…
Categories:
Conditionally Outputting Elements only for Posts that have a Specific Taxonomy Term

Conditionally Outputting Elements only for Posts that have a Specific Taxonomy Term

Using the core WordPress has_term() function for checking if the current post has a specific term of a given taxonomy.
Categories:
Pro
Media File Attachment Data in Bricks

Media File Attachment Data in Bricks

With a 'Media' query loop, this tutorial shows how we can retrieve various attachment-specific properties inside of the loop.
Categories:
Pro
Month and Day Condition in Bricks

Month and Day Condition in Bricks

This Pro tutorial shows how we can define a custom function that takes in a month in the three-letter format (like Dec) and a day…
Categories:
Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
Checking for Post Type in Bricks

Checking for Post Type in Bricks

A way to output elements conditionally based on the current post type in the loop in Bricks.
Categories: