All of my CSS styling is done with an external stylesheet, but I have a php-generated gallery of user photos that requires a background-image for a div that is the user's picture (as the variable $userpic below). There is no problem with this using inline css:
echo "<div style=\"width:100px;height:110px;z-index:1;background-
image:URL('$userpic');background-size:100px 110px;background-repeat:no-repeat;\">
</div>";
but is there a way move the styling elements of the echoed div (class "NoPicDiv") below into the external stylesheet, perhaps something like the following?
echo "<div class=\"NoPicDiv\"></div>"//modified php echo statement
/*The following would be in my external css file*/
.NoPicDiv {
width:100px;
height:110px;
z-index:1;
background-image:URL('$userpic');
background-size:100px 110px;
background-repeat:no-repeat;
}
Worst case scenario I move all the styling elements to the stylesheet except the background-image element and just keep this inline. Thanks for any help!
Option…
A) generate a second, smaller CSS file via PHP, which only contains the background-image properties;
B) write the image URLs either inline to the tag or at the end of the body
The question here is, why do you need background images at all and not just output <img> tags. Background images won't get indexed by search engines and you can't store a title to them. If you are handling photos, you should definitely use IMG tags.
Related
tl;dr
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
My page starts with 13 elements where I set their url(), when you scroll to the footer our lazy-loader will then load 9 (up to 12) more elements that again have their own unique "dynamic" images set.
I think we'll just have to take a hit to our SEO score, as I don't believe a better solution is available.
NOTE: I can create a JS Fiddle if needed, but I think this is described well/generic enough that it's not needed. Please let me know if this is needed for answering.
Purpose
Our company is trying to improve their site SEO score, one of the items identified for us to fix is to move all HTML style attributes into a single CSS file (or <style></style> declaration). I believe the reason this is being called out as an issue is because we have several elements using this to set their article background-image: url();.
Why not just use <img> tag instead?
Our client has alot of different type of images (dimensions, center of focus, etc) they want to use when publishing an article. In order for us to have the most consistent design regardless of screen size is by using CSS background-image styles instead of an <img> HTML tag. We're also working with some WP/XMLRPC publishing constraints, where we're not able to create a custom solution for this.
So we cannot use HTML for this, if we could this would be an easy fix.
Why this is currently set in the style attribute?
This is the best "dynamic" solution we've found so far. Up until now (with this effecting our SEO score), this has never been an issue. In our CSS styles, we have our .class {} specific background image styles that are shared. The only thing that differs for each article is the image URL, so we set that in the style="background-image: url();" attribute dynamically through PHP.
The problem
My page starts with 13 elements where I set their url(). I "could" have inline CSS at the top where I set dynamic classes for these elements that will have their unique background-image: url();'s, this could work even if it sounds painful to setup/do.
BUT we have lazy-loading happening when you scroll to the footer. We load 9 (up to 12) more elements that again have their own unique "dynamic" images set, all via AJAX. I could do the same thing here, creating another inline <style></style> CSS bit... but here's the kicker. One of our other SEO complaints is for us to combine our multiple inline CSS (as well as JS) into a single declaration. If I keep creating more <style></style> declarations to fix this SEO issue, I'll create/worsen another SEO issue.
The Question
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
I think we'll just have to take a hit to our SEO score on this one, as I don't believe a better solution is available.
An idea is to change the background-image inline style with a data attribute that has no effect on the SEO score, then you may add some JS code in order to change them as inline style.
Of course this may have an impact on other script as I don't know excatly how your site is built so you may add this JS code as the first JS code so that all your inline style are changed and you have them ready for any futur script.
$('.box').each(function() {
var url = $(this).data('background');
$(this).css('background-image','url('+url+')');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>
By the way we can generalize this solution to any inline style. So the idea is to have all the style set as a data attribute and then we simply change them to inline style:
$('[data-style]').each(function() {
$(this).attr('style',$(this).data('style'));
/*Not mandatory*/
$(this).removeAttr('data-style');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>
NB: as I commented above, we need to have a balance between the complexity of the site and the score we obtain. If we can easily obtain 80% no need to over complicate the site in order to have 85% or 90% and maybe create some bugs or make the maintenance of webiste site difficult.
I wrapped a WordPress function, .the_post_thumbnail(). inside of a span with class 'post-image', like this:
echo "<span class='post-image'>".the_post_thumbnail()."</span>";
The style that I'm trying to apply is width: 100% to make the image take up 100% width of it's <div> / container. But when inspecting the post images in the browser, none of the post images are inheriting this style.
My CSS is simply:
.post-image {
width: 100%!important;
}
This is the type of situation where I just don't know what else to try. I don't want to make any changes in reset.css because that would affect all other images - I'm just trying to style the images for the blog posts.
Try this: (no need for echo, this function echo`s)
the_post_thumbnail('post-thumbnail');
Post thumbnails are given a class wp-post-image and also get a class depending on the size of the thumbnail being displayed. You can style the output with these CSS selectors:
img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
You can also give post thumbnails their own class. Display the post thumbnail with a class post-image:
the_post_thumbnail('post-thumbnail', ['class' => 'post-image']);
Style it:
img.post-image {
width: 100%;
}
Try to use clear css property.
https://developer.mozilla.org/en/docs/Web/CSS/clear
First I have php generate a table, then when it comes to an arrow image I want php to assign a specific class to the object depending on conditions. The goal is to get a different linkable image for different conditions.
Here is my php script generating the link.
<a href="javascript:void(0)"
'; if ($row['upVote'] > 0) { echo '
class = "used_upArrow"
';} else {echo '
class = "new_upArrow"
';} echo '
rowid="' . $row['item_id'] . '">
</a>
Here is my CSS:
a.new_upArrow{
background-image: url('../Img/new_upArrow.gif');
}
a.used_upArrow{
background-image: url('../Img/used_upArrow.gif');
}
The only way for me to get the image to actually show up is if I add text < a>HERE< /a> in the php script, but obviously this gets in the way of the image. Looking online there are "css hacks" to hide text or move it, but that seems like an unnecessary work around that not every browser will respect. Are there other options here?
FYI,The end result is I would like to be able to change the class with jQuery and have the image change, that is why I am doing it like this.
Anchor tags () and other inline elements expand to the size of the content they contain. Since your anchor tag is empty, it has a height and width of zero. The background image is there, but the element is so small you can't see it.
To fix the problem, convert the anchor tag into a block element (instead of inline) and give it a size. CSS:
a.new_upArrow, a.used_upArrow {
display: block;
height: 100px;
width: 100px;
}
Change the height and width to match the dimensions of your image.
How to make an external PHP widget page have its own CSS.
The catch is - when the external page is included it's been affected by the stylesheet of the host page.
The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.
The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.
Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.
How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?
You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.
You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.
You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.
Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.
For example, in both of the below samples, the second rule will overwrite the first one:
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
or
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:
<div id="widget">
<!--your code here-->
</div>
Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/
Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.
Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.
ex.
<div id="widget"><p class="nav">hello</p></div>
instead of,
.nav{
// styles
}
do
#widget.nav{
// styles
}
CSS Styles prioritize like this:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.
If I understood correctly, your included page has some CSS rules such as:
div {/*rules*/};
p {/*rules*/};
and so on.
You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.
For example, say your included page is wrapped in a div, the PHP code would be:
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
Then, all your rules for the page should refer only to the children of the element with the id my_page:
Instead of
div {/*rules*/};
you'll have
#my_page div {/*rules*/};
I 'm using zen as the basic theme to make a new theme for my site. The problem is i want background images for header and footer that are not getting displayed until i specify a height and width for them.Moreover, the height and width specified in the CSS inside the #header and #footer have to match the exact dimension of the original images (which are dimensionally large) otherwise the images are not being displayed properly (parts of them get cut). Is there a solution (either using CSS or PHP) that would allow me to write the CSS for the header and footer without any dimensional constraints so that the background images self adjust ? The header and footer contain no blocks. A part of the CSS is as follows :-
#header
{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:
background-position:center;
}
#footer
{
margin-top:0px;
background-image:url(images/footer.jpg);
height:391px;
background-position:center;
}
#footer-inner
{
text-align:center;
padding:4px 10px 10px 10px;
}
If you want the images to automatically scale, you will need to use an img tag for each image, and set the width/height to 100%. That will scale them automatically to be the same size as their parent container. That means if you want the images to scale according to the size of the browser window, you'll need to set the parent container's width/height to be a percentage, and not a fixed pixel width/height.
Few sites do that sort of thing, you may want to reconsider and use fixed size images.
Background images in CSS are designed to display themselves in the background of the div they are placed in. This means that the size of the div determines the extent of the image you see. In your case, since your header region has no content, #header has the default dimensions set in layout.css.
As you have discovered, if your header div has no content, you have to explicitly set the size of your header to your desired dimensions, either in CSS as you originally posted (recommended) or with an empty block with the correct dimensions (not recommended except in rare circumstances).
If you use the preprocess functions, you should be able to set a class for the header and footer based on the images you choose. You will have to create the CSS for the different classes to match the images though.
For example:
Preprocess Function
function themename_preprocess_page($vars) {
$classes = array('image1', 'image2', 'image3');
$vars['header_class'] = array_rand($classes);
}
CSS
#header .image1 {
background-image: url(path/to/image.jpg);
height: [imageheight] px;
width: [imagewidth] px;
}
Hopefully this helps.