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 630 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 a Reply to Dima (Cancel Reply)

 

Related Tutorials..

Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories:
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:
Pro
Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

How to register a new dynamic tag for setting excerpt word limits and outputting an ellipsis (...) at the end.
Categories:
Pro
Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Bricks lacks built-in dynamic tags for ACF field labels, prefixes, and suffixes. This tutorial shows how to add them using custom dynamic tags.
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
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…
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: