Not sure how to do this... I'm a bit of a php noob. I'm trying to echo the div class '.header1'
In my css I've given .header1 a background image and I want that to appear, but I'm not having any luck so my code must be wrong. Here it is:
echo '<div class="header1">';
.header1 {
background: url(_images/header1.png);
What am I doing wrong? I've tried it with and without the closing div but neither have worked.
The div tag needs both an ending tag and content.
If there is no content, you need to define it's height and width manually.
A. You echo is working .. you are probably not seeing anything because its an HTML tag try
<?php
echo '<div class="header1">Hello</div>';
?>
B. You should try and make sure you set PHP open tag <?php and close tag ?> as demostrated above
Whenever I echo html in php I like to use the heredoc syntax
$div = <<<DIV
<div class="header1"></div>
DIV;
Just looks so much better, to me, especially when your strings get more complex, i.e. quotes and stuff.
Related
I try to get a news text slider and i try to do it with marquee html code,
but its seams i do some thing wrong, i have try a few times to get it work and faild.
This is the current code
$html= '<marquee behavior="slide" direction="left">'.echo $row['title'].'</marquee>';
HTML marquee tag, already deprecated. You may use instead it Text-Scrolling-Plugin jQuery plugin
For more information Enter here
Additionally, enter your $text in other side and check it. Perhaps exits any error..
echo $text;
I added a simple PHP echo tag on my website:
<?php echo "Test"; ?>
This message should be displayed above the header (which has a green background. The header moves a little, but I can't see the text "Test".
Then I tried this code:
<?php echo "<h1>Test</h1>"; ?>
Again, the header moves a little more, but the text is invisible.
First:
After the normal echo tag:
After adding h1:
Can you help me?
Your PHP echo needs to be inside the HTML body element to be displayed on the page. Everything else you see is a result of the browser attempting to correct invalid HTML (which can look very different between different browsers).
In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:
<?php if(function_exists('show_media_header')){ show_media_header();} ?>
This basically calls the image assigned and places it as an IMG in HTML.
I would like to have it called as a background image with CSS but don't know how. For example:
.header-graphic{ background:url("show_media_header();"); }
I know that will obviously not work but that should explain what I'm trying to do.
Any help would be great.
Thanks!
Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:
.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }
However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.
It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.
However, there is an alternative: Insert just that style into the HTML like so:
<h3 style='background-image: url("<?= show_media_header(); ?>");'>
Foo
</h3>
Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:
h3 {
background-position: left 3px top 3px;
}
This of course assumes the function returns just the image URL; I've not used Wordpress personally.
Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:
<h3>
<?= show_media_header(); ?>
Foo
</h3>
And style it as appropriate like so:
h3 img {
margin: 3px 0 0 3px;
}
I'm gonna post it down here because no one is considering your statement:
"and places it as an IMG in HTML"
You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.
How about if you use descendant CSS selectors as such:
#page #header {
background-image: url("image.jpg");
}
#another-page #header {
background-image: url("another-image.jpg");
}
and so assign each page to its background image.
Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.
Got it to work!
Dug around in the plugin PHP file and found this:
function get_media_header_url() {
global $post;
$post_id = $post->ID;
So I did this:
.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }
Works great!
You guys absolutely pointed me in the right direction. THANKS!!!
I have this code, which I would like to make as small as possible.
As you can see, we are repeating alot of the same HTML code over, but with slight changes.
<?php if( ! $liked_before): // If not liked before, show the link a href?>
<a href="javascript:;" id="action-like">
<div class="action_like" title="Like">
<abbr title="Like">Like</abbr>
</div>
</a>
<?php elseif($liked_before): // else dim it and make non clickable ?>
<p id="action-like" rel="liked_before">
<div class="action_like" title="You Like this" style="opacity: 0.5;">
<abbr title="You Like this">Like</abbr>
</div>
</p>
<?php endif; ?>
Kind of stuck as to how I would condense this into less.
I also have the same code as above straight after, so I have 2 if else statements like this.
As you can see, the only things that change are:
the a href=... tag to a p tag
the title 'Like' -> 'You like this'
the p tag must have the rel, as it is used in the javascript.
Any ideas how I could make this leaner?
Some sort of inline echo.
How would you do it?
I would leave it as is.
From your example, you're also modifying the HTML within the <p> or <a> tag (style and abbr attributes), and hacking together something to solve this trivial "problem" would only lead to less readible and harder to manage code. Especially from an efficiency standpoint, there's nothing to gain here.
This sounds like it could be tidied up using better CSS. You can just use 1 a tag with the class 'liked' to differentiate the two. Very tidy code with just two different a tags.
I'd choose to
Skip the else condition, you don't need it. It's either liked before or not.
wrap it inside a p (or rather a div) in both cases.
Output the a element only in case of the check. Perform the check twide, once for the opening and once for the closing.
Set the opacity using CSS.
Something like this?
<html><?php echo $booleanCondition ? '<b>blah</b>' : '<i>blah</i>';?><html>
For the sake of having the actual answer listed in answers:
Create a function that prints this, and keep calling the function as a one-line code throughout your php-file.
Like this:
<?php
function getHtml($liked_before){
$title='';
$styleAttr='';
if( ! $liked_before){ // If not liked before, show the link a href
$title='Like';
}
else{ // else dim it and make non clickable
$title='You Like this';
$styleAttr=' style="opacity: 0.5;"';
}
$html='<div class="action_like" title="'.$title.'"'.$styleAttr.'><abbr title="'.$title.'">Like</abbr></div>';
if( ! $liked_before){ // If not liked before, show the link a href
$html=''.$html.'';
}
else{ // else dim it and make non clickable
$html='<p id="action-like" rel="liked_before">'.$html.'</p>';
}
return $html;
}
?>
I'm currently using a system for my portfolio where i add three images per project, which schould be inside an ul.
This works fine, but i need those img tags to be wrapped within li tags, and i have no clue how i should do this.
Take this:
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
Make this:
<li><img src="img1.jpg"/></li>
<li><img src="img2.jpg"/></li>
<li><img src="img3.jpg"/></li>
Thanks in advance!
Edit:
Sorry, here's more info for you guys:
I'm using Wordpress 3 as cms with custom post types.
The output is done via wp's "the_content()", where i put my images.
I know i could use wp's html editor to wrap li tags around manually,
the problem is that i wont be maintaining the site, so i want to make it easer for my coworkers.
This is why its outputting the img tags in a row, and i need to wrap those li tags around them.
I've read something about "preg_replace", but i cant seem to get it working.
EDIT:
I've found the solution, sometimes the easiest way is the best:
$thecontent = get_the_content();
$thecontent_format = '<li>'.str_replace(array("\r","\n\n","\n"),array('',"\n","</li>\n<li>"),trim($thecontent,"\n\r")).'</li>';
wraps every img element with a li, and then
echo $thecontent_format;
Anyways, thanks for you participation!
I don't want to sound stupid or anything but if your trying to do this with PHP I am assuming that PHP is also creating the img tags for display.... in that case all you have to do is:
echo "<li>";
image tag generating code goes here
and than close it off with:
echo "</li>";
do this for every image tag that being created...
Is that what you were asking?