Displaying a function value on the featured image

If it was done with HTML (it was) you can do it with WP ?? Replicate what was done in the old site on your template. Create a div container for everything (div.imagen01 in the old site). Within that div, output an anchor link containing the featured image. After that, but still within div.imagen01 output another div with “SCONTO” and the discount amount.

Absolute position the sconto div so it overlays the image in whichever corner you like. Style as desired. The old site uses a semi-transparent .png image as the background, but you can instead specify a semi-transparent background color using the rgba() function. For example:
div.lbl_sconto { background-color: rgba(180,180,180,0.3);
The RGB values are color components as usual, 0-255 each. The A part is a 0-1 transparency factor.

In case you were unaware, the red extra discount for some posts is part of the image itself, it’s not HTML.

Ok, this is done: https://test.sacconicase.com/case-vacanza/italia/toscana/marina-di-massa-appartamenti-vacanze/

But when the discount number is not set it shouldnt come out “-%”

https://test.sacconicase.com/case-vacanza/italia/friuli-venezia-giulia/lignano-pineta-appartamenti-vacanze/

How can I fix it? I have the following in content.php:

<div class=imagen01>
<?php sacconicase_post_thumbnail();?>
<div class="mostrasconto"><?php echo ("&nbsp"),"-", get_the_author_meta('discount', $post->post_author ),"%" ;?>
</div></div>

I tryed with the following but it’s not working:

<?php $discount=get_the_author_meta ('discount', $post->post_author);

if ( ! empty( trim( $discount ) {
echo ("&nbsp"),"-", get_the_author_meta('discount', $post->post_author )),"%" ;

}

?>

If there is no discount you should not output the mostrasconto div at all. Even if you successfully suppressed the -% with your conditional with what you have now, there’d still be an empty gray box in the corner. If you conditionally remove the div along with the -% then there will be no gray box at all.

Someone wrote me the following solution, but it’s not working:

<div class="imagen01">
<?php sacconicase_post_thumbnail();?>
<?php 
$discount = get_the_author_meta('discount', $post->post_author );
if !empty($discount) { ?>
    <div class="mostrasconto"><?php echo ("&nbsp"),"-", $discount,"%" ;?></div></div>
<?php } ?>

I tryed myself to invent something:

<div class="imagen01">
<?php sacconicase_post_thumbnail();?>

<?php
$discount = get_the_author_meta('discount', $post->post_author );

if !empty($discount) {
$output=  '<div class="mostrasconto">'. '-' . $discount . '%' .'</div>';
echo $output;

}

?>
</div>

NOT working ??

Probably the external div must wrap 1 statement and not 2, I tryed also to make something in this direction, even transorming sacconicase_post_thumbnail(); in a variable, but I got nothing…

• This reply was modified 1 year, 6 months ago by sacconi.

Maybe

<div class="imagen01">
<?php sacconicase_post_thumbnail();
$discount = trim( get_the_author_meta ('discount', $post->post_author ));
if ( ! empty( $discount )) {
    echo '<div class="mostrasconto">';
    echo '&nbsp;-', $discount,'%';
    echo '</div>';
}?>
</div>

? (untested)
Pretty much what you tried last, probably it was not working only due to syntax errors. It looks like your logic was sound.

I assumed you have a global $post; line somewhere before this, it is needed in order to get the author ID.

It works! Even if I cant see a global $post; before…

On the mobile the discount is out of the picture, without any style: https://test.sacconicase.com/case-vacanza/italia/toscana/marina-di-massa-appartamenti-vacanze/

and it is displayed also in the single post page: https://test.sacconicase.com/marina-di-massa-zona-viale-roma-appartamento-con-giardino/

but it shouldnt appear here. First because the slider is a plugin, nothing to do with featured images, and then because I put a specific css:

.single-post div.mostrasconto  {display:none;
	}

This is working on desktop, not on mobile

• This reply was modified 1 year, 6 months ago by sacconi.

Maybe these css are working only on desktop and I need a specific set for mobiles?

div.imagen01{
	position:relative;
	}
div.mostrasconto {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 87px;
  height: 45px;
	font-size:30px;
	font-weight:bold;
	color:#F3F5CE;
	  background-color: rgba(180,180,180,0.6);
	border-top-left-radius:10px;
}
.single-post div.mostrasconto  {display:none;
	}

Needing a different set of rules for mobiles is common. We use media queries to do so. You need to determine at what display width to switch from desktop rules to mobile rules. There are likely already other media queries in your CSS, the width already used there is likely the width you want for your own media queries.

max-width: 769px

In this case I dont understand why I should need a different set of rules for little devices

Because some devices are less than 300px wide and a 769px wide layout doesn’t work for some reason. You only need enough rules in the media query to correct whatever the layout issue might be.

In other cases it could be using a different layout approach for all widths would eliminate the need for media queries.

I tryed to change px values into % values but nothing changes. Any adice to have a solution for all the divices?