Using PHP shortcode in HTML style="" CSS

Question

I'm not sure if this is possible but I'll ask anyway...

I'm trying to use the PHP shortcode in Advanced Custom fields

<?php the_field('charitynumber'); ?>

for our client to enter a number on the back end between 1-100. This will effect the height of a div showing/hiding an image based on a overall goal number for a charity. I'm thinking of setting it up like

<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>

But cannot think of how to do it or an alternative way.

Are you going to use a database to pull the total height from? Im not sure what the end result is, but there are multiple ways to pull this off... — Rummy
– Rummy, Commented Jul 6, 2016 at 20:38
the shortfield would have to return valid css, then, not just a number. style="100" is wrong. it'd have to be style="height: 100px" or something. — Marc B
– Marc B, Commented Jul 6, 2016 at 20:40
@MarcB Not only returning valid CSS, but also possibly do some math to calculate a percentage height of a div. — Rummy
– Rummy, Commented Jul 6, 2016 at 20:44
@Efrain Anthony Negron no database will be used, the user will enter an integer number on the backend of a wordpress site, ex: 30, which will represent 30% height of the div displaying a charity height bar graph image — runningantelope123
– runningantelope123, Commented Jul 6, 2016 at 20:47
@runningantelope123 I've created a version of what you need in JSFiddle. Im unsure about how you're going to be pulling the height of the div if you're entering the value on a different page than where the graph is displayed, but this is basically the same concept with all of the CSS needed as well. JSFiddle Here — Rummy
– Rummy, Commented Jul 6, 2016 at 21:16

Barmar · Accepted Answer · 2016-07-06 21:05:17Z

2

You need to put the shortcode in a valid style attribute. That means outputting the style name and appending the appropriate units. Also, if the_field() returns a string, you need to echo it.

<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>

answered Jul 6, 2016 at 21:05

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

runningantelope123 Over a year ago

Works exactly as I need, perfect. Thank you

will · Accepted Answer · 2016-07-06 21:06:01Z

Give this a shot - you can

<div class="progress">
   <div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
   <img src="/img_here.jpg">
</div>

Then from there, you just need to style the bar. My example below has the progress bar locked to the bottom, and when you land on the page the progress bar will animate from the top down until it stops at the current percentage.

.progress{
   position: relative;
   width: 50px;
   height: 200px;
}
.progress img{
   width: 50px;
   height: 200px;
   position: absolute;
   z-index: 1;
}
.progress .fillBar{
  width: 50px;
  bottom: 0;
  height: 200px;
  transition: height 0.3s ease-out;
}

Collectives™ on Stack Overflow

Using PHP shortcode in HTML style="" CSS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related