[Resolved] Add Opacity to image and display text based on custom field value

[Fergal]

Hey there,

I have a custom field ‘filledexpired’ that equals 1 if the job has been filled/expired.

I would like to make the following adjustments to elements in a query loop if the value of this custom field equals 1:

• The image is in it’s own container of a query loop. Would like to add opacity: .3 to this image.
• Would also like to display text, maybe in a div, that reads “Filled / Expired”

We can get the value with
$my_meta = get_post_meta(get_the_ID(), 'filledexpired', true);

and test the value with
if( $my_meta == 1)

Can you please help with this?

[Fernando]

Hi Fergal,

You’ll need to create a Hook Element to add a style tag to your page for the CSS.

For instance, you can add change-opacity class to the classlist of your Block then add this code in your Hook:

<?php

$my_meta = get_post_meta(get_the_ID(), 'filledexpired', true);
if( $my_meta == 1) { ?>
<style>

.change-opacity {
    opacity: 0.3 !important;
}

</style>

<?php } ?>

Make sure Execute PHP is enabled in your Hook Element settings.

[Fergal]

Hey Fernando,

This is almost working perfectly thank you! The only thing is, after the home page it applies the class but not the style for some reason.

E.g., .com/page/2/

Any idea what is going on?

Thanks,
Fergal

[Fernando]

Try using generate_hook_element_display.

add_filter( 'generate_hook_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && is_home() ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

Replace 100 with the Element post id. Let me know how it goes.

[Fergal]

I added the code and replaced 100 with the my front page content template element post ID, but don’t think it did anything.

[Fergal]

Hey Fernando,

I noticed something interesting that hopefully can help us debug what is going on. I added vardump to code you previously helped me with where we apply strikethrough on the post title:

// strike through post titles if filledexpired == 1
add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-title' ) !== false ) {
        $my_meta = get_post_meta(get_the_ID(), 'filledexpired', true);
		//$my_meta = rwmb_meta('filledexpired', get_the_ID());
        var_dump( $my_meta );
		
		if( $my_meta == 1) {
			$my_new_class = 'my-strikethrough';
			$myreplace1 = 'class="';
			$myinsert1 = 'class=" ' . $my_new_class . ' ';
			$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
		}
    }
    return $block_content;
}, 10, 2 );

It seems like whatever the meta value is for the top post of the “All Jobs” section is the meta value that is used for the image opacity for all posts on the page. It’s almost like a global meta value for that page and I’m not sure why this is. See above the “Featured Jobs” section there are two meta values even when there is just one post in the featured jobs section. Can you please help debug this?

Thanks,
Fergal

[Fernando]

Yes, just realized we need a different approach to get this to work. The other approach I thought of is to also add a class to the Image Block. For instance, my-image, then add another snippet:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-image' ) !== false ) {
        $my_meta = get_post_meta(get_the_ID(), 'filledexpired', true);
		//$my_meta = rwmb_meta('filledexpired', get_the_ID());

		
		if( $my_meta == 1) {
			$my_new_class = 'change-opacity';
			$myreplace1 = 'class="';
			$myinsert1 = 'class=" ' . $my_new_class . ' ';
			$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
		}
    }
    return $block_content;
}, 10, 2 );

Then add this CSS in Additional CSS:

.change-opacity {
    opacity: 0.3 !important;
}

Remove the Hook Element we had, and the Snippet we also added for that here: https://generatepress.com/forums/topic/add-opacity-to-image-and-display-text-based-on-custom-field-value/#post-2342246

[Fergal]

Hey Fernando,

The latest solution worked thank you so much for figuring that out!

The last piece is overlaying the text, maybe in a div, that reads “Filled / Expired” on top of the image that has opacity. Again based on the filledexpired value == 1.

Can you please help with this?

Thanks,
Fergal

[Fernando]

Great!

Let’s do the text overlay one step at a time. Can you add a GB Headline Block with text “Placeholder” under the image?

Can you also give this Headline Block a class of my-overlay-text?

Let us know once you’ve done so, and we’ll position it first through CSS.

[Fergal]

Hey Fernando,

Sounds great. I’ve completed those steps and look forward to the next steps.

On a side note, every now and then I see this message when updating an element https://imgur.com/a/pSV1Fe8

Is this something minor or something I should eventually create a topic for?

Regards,
Fergal

[Fernando]

Great. Can you add placeholder-div to the class list of the Container holding the image and headline blocks, then add this CSS:

.gb-headline.my-overlay-text {
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    z-index: 9999;
}

.gb-container.placeholder-div {
    position:relative;
}

As for the error, it’s an issue that occurs sometimes because of the browser. Can you try using a different browser? For instance, Opera GX or something else.

[Fergal]

Thanks for the next steps. I’ve completed those and it is looking great! I’m assuming we are now at the step of adding in the conditional logic to display the text when the custom field == 1. Thanks again and I’m looking forward to the next steps!

Ok great. The updates seem to work even when that error displays, but good to know a different browser can help with this.

[Fernando]

Great! Now we can add a Snippet to change the text depending on the value of your custom field:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-overlay-text' ) !== false ) {
        $my_meta = get_post_meta(get_the_ID(), 'filledexpired', true);

		$myreplace1 = 'placeholder';
$myinsert1 = 'placeholder';
		if( $my_meta == 1) {
			$myinsert1 = 'filled';
			
		} else {
$myinsert1 = 'expired';
}
$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
    }
    return $block_content;
}, 10, 2 );

[Fergal]

It’s working! Thank you Fernando!

Now do I just update it as follows?

        if ($my_meta == 1) {
            $myinsert1 = 'Filled / Expired';
        } else {
            $myinsert1 = '';
        }

And if I want to adjust the font size I can just target this div with .my-overlay-text in the CSS?

Thanks,
Fergal

[Fernando]

Great! Yes, you can just modify that, and yes, you can target that class for the font or you can alter it in the Block settings itself.

[Author]

Posts