Echo Background Image Breaking site

[CDG]

I am trying to add a background image via a custom style, but it breaks my site. I am a php novice, can someone point out my error please?

The echo is being used other places on this page, so I know this code is ok:

<?php echo $event->data->thumbnails['medium']; ?>

but I am missing something here, this keeps breaking the page:

<?php
        echo '<article data-style="'.$label_style.'" style="background-image:url(\<?php echo $event->data->thumbnails['medium']; ?>\")" class="mec-event-article mec-clear '.$this->get_event_classes($event).'"' . $colorful_bg_color . '>';
?>

Thanks for any help, as I learn!

[gw1500se]

As you can see from the formatting, the php echo is being treated as part of the style attribute. You need to get it out of those quotes and use concatenation instead.

[Barand]

Try it without the <?php echo ... ?>

You are already inside a php block of code

echo "<article data-style='$label_style' style='background-image:url({$event->data->thumbnails['medium']})' class='mec-event-article mec-clear {$this->get_event_classes($event)} $colorful_bg_color>";

 

[gw1500se]

I think those single quotes will make that fail as well. This might work:

echo "<article data-style=\"$label_style\" style=\"background-image:url($event->data->thumbnails['medium']\") class=\"mec-event-article mec-clear $this->get_event_classes($event) $colorful_bg_color\"";

 

[CDG]

Thanks for all the help!  I have narrowed it down to this part of the line, as this is what I added and started screwing things up.

style="' . background-image:url(<?php echo $event->data->thumbnails['medium']; ?> . '"

I added the concatenate to this...but, I am not really sure how to do it correctly. 

 

[CDG]

the other two suggestions start to work...but, still break the site...Im trying a lot of different things now, thanks for the suggestions.

Edited May 20, 2019 by CDG

[ginerjm]

One CANNOT post a very small (and out of context) snippet of code and expect it to be debugged.  If you have a problem with a line of code post that line.  Not a piece of it.  As was pointed out already, you were using php tags inside of php tags and that is part of the problem.

As a php noob, you need to recognize that one does not need to switch into and out of php mode with every line of code.  Good programming practice is to write all of your php code in php mode and all of your html outside of it.  Don't mix and match except for the parts that need to be "built" from a combination of php logic and html presentation, such as a complex link statement or an html table row, etc.  Personally I write my php scripts with very few php on/off tags - maybe 2-3 pairs in scripts that may be 300+ lines long.  Get the idea?

 

So let's see this problem line in its entirety.

[CDG]

Thanks ginerjm,

 

This is the entire line with my attept at adding concatenation and removing the second call to turn php on.  You post is really helpful as I learn!

        <?php
        echo '<article data-style="'.$label_style.'" style="background-image:' .url($event->data->thumbnails['medium']);. '" class="mec-event-article mec-clear '.$this->get_event_classes($event).'"' . $colorful_bg_color . '>';
        ?>

 

Edited May 20, 2019 by CDG

[CDG]

I guess my intention with pointing out that section of the line is, that if I remove it all together, then the site works, but without the modification I am trying to achieve.

(below is a slight different version, as I am blindly fumbling about, so if i remove this the page loads fine, so something in here is screwy :

style="'.background-image:url($event->data->thumbnails['medium']).'"

 

[gw1500se]

As we said that is because your syntax is wrong.

[ginerjm]

Sometimes our desires to use OO coding inside other pieces of code (and other complex notation) can get us into trouble.  Here's my attempt at resolving that issue here.  I wasn't sure about that last piece of your statement but assumed it was a class name so this is what I did:

$url = $event->data->thumbnails['medium'];
$cls = $this->get_event_classes($event);
 echo "<article data-style='$label_style' 
			style='background-image:url($url)' 
			class='mec-event-article mec-clear $cls $colorful_bg_color'>";

Note the lack of php mode tags - I am assuming that this part of your script is already in php mode.  And notice how using a double quote as the outermost quote of a string allows you to avoid using the php tag in the middle of your string, as well as removing all of the concatenation too.  Remember - using double quotes in this fashion will allow your embedded php vars to be properly interpreted even though they may themselves be wrapped inside single quotes.  An important rule to learn as you improve your php skills.

Please examine it carefully.  I may have mis-interpreted your intent, but I do think that you can correct any of that without changing my line very much.  If you study it and try to understand how it works, it will be a learning experience.  I may have the background image url coded wrongly - there may need to be quotes in there somewhere so if so this may be the corrected method:

style=\"background-image:url('$url')\"

Edited May 20, 2019 by ginerjm
correct background image

[cyberRobot]

FYI - the following line of code has an extra semi-colon in the middle, after the call to url():

<?php
echo '<article data-style="'.$label_style.'" style="background-image:' .url($event->data->thumbnails['medium']);. '" class="mec-event-article mec-clear '.$this->get_event_classes($event).'"' . $colorful_bg_color . '>';
?>

 

With that said, I think ginerjm's suggestion for creating variables like $url will make the code easier to read down the road, when you're less familiar with the code.

[CDG]

Thanks everyone...  I am playing and learning!  cyberRobot...thanks for pointing that out, i did finally see that...  Ill report back as I progress. ginerjm's suggestion is great...

Edited May 20, 2019 by CDG

[cyberRobot]

I just noticed that the call to url() should go with your CSS. So it should be enclosed in your single quotes.

<?php
echo '<article data-style="'.$label_style.'" style="background-image:url(' . $event->data->thumbnails['medium']. ');" class="mec-event-article mec-clear '.$this->get_event_classes($event).'"' . $colorful_bg_color . '>';
?>

Once it's enclosed, the semi-colon is fine. Of course, the point is probably moot if you're using ginerjm's code. ?

[CDG]

Victory, although i studied other templates in this plugin that were working...thanks for getting me some new understanding of php.  This is what did it, the first bit is farteher up in the page, where the calls are specifed:

$event_thumb_url = $event->data->featured_image['large'];

<article class="mec-event-cover-modern <?php echo $this->get_event_classes($event); ?>" style="background: url('<?php echo $event_thumb_url; ?>'); height: 678px;background-size: cover;">

 

[cyberRobot]

In case you're interested, there's a tag for opening PHP and echoing at the same time.

<article class="mec-event-cover-modern <?=$this->get_event_classes($event)?>" style="background: url('<?=$event_thumb_url?>'); height: 678px;background-size: cover;">

I don't remember what the tag is called.

[ginerjm]

And after all we told you you still think that YOUR solution should have a php tag embedded inside it.  WHY?