I'm trying to display images using CSS so that I can switch which image is being displayed depending on what stylesheet is selected. It works fine sometimes, others not. Can you help me figure out why?
I first use php to echo out the HTML based on the page id:
if($host == 'comparison.php?page=1.1.9')
{
echo "<div class='image8'></div>";
}
if($host == 'comparison.php?page=1.1.10')
{
echo "<div class='image9'></div>";
}
In the CSS, I identify the class, and tell it to display the image:
div.image8 {
content:url(homilies/1.1.9.jpg);
width: 100%;
}
div.image9 {
content:url(homilies/1.1.10.jpg);
width: 100%;
}
1.1.10 works perfectly, and the image changes when I select another stylesheet. 1.1.9 does not work at all, and when I inspect the element, the 'div.image8' doesn't even show up. What could be going on here? It works in other places too, I can't figure out the pattern.
Ok D.C, I'm in a good mood and like I mentioned in a comment above, I created a quick, down and dirty, one page code to test your situation. Everything worked great for me, but I did learn a few things too. I have no idea how 1.1.10 worked perfectly for you but not 1.1.9 because from what I can tell neither should work. Tested in Firefox v53.0.2.
Using content:url('some_image'); never showed the image for me.
Had to use background-image: url('some_image'); for an image to appear.
The DIV needed a non-breaking space ( ) between the DIV tags for the DIV to show the image. In other words, you can't have a background image if there is no content in the DIV. So maybe you just need to add a non-breaking space between your DIV tags to make it work?
That's about it. Now for a working example. You can and should modify it to fit your needs. For example link the style sheet instead of internal like I did. I just wanted to make a quick one page of code to test if everything will work.
<?php
//Use a PHP ternary operator to check if the GET variable is set in the URL.
$page=isset($_GET['page'])?$_GET['page']:'';
switch ($page) {
case '1.1.9':
$img_class='image8';
break;
case '1.1.10':
$img_class='image9';
break;
case '1.1.11':
$img_class='image10';
break;
default:
$img_class='image0';
break;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Image By Get Var</title>
<style>
/*Everything between the STYLE tags would actually be in your style sheet instead of internal to your page.*/
html, body {
height: 100%;
background: #ccc;
padding: 10px;
}
#img_container {
margin-top: 20px;
background-repeat: no-repeat;
background-size: contain;
height: 50%;
width: 50%;
}
/* You can use the static images below to test this code, but should replace with your images using a relative path.*/
/* Used tinypic.com for demo images since it allows free hotlinking. */
div.image0 {
background-image: url('http://i50.tinypic.com/j9blw9.jpg');
}
div.image8 {
background-image: url('http://i42.tinypic.com/5n52ex.jpg');
}
div.image9 {
background-image: url('http://i60.tinypic.com/316ozv5.jpg');
}
div.image10 {
background-image: url('http://i43.tinypic.com/2eg5j7s.jpg');
}
</style>
</head>
<body>
<p>The form only exists so that a GET variable can be sent to the page to test PHP setting CSS based on the GET variable.</p>
<form method="get">
<input type="radio" name="page" value="1.1.9"> 1.1.9<br>
<input type="radio" name="page" value="1.1.10"> 1.1.10<br>
<input type="radio" name="page" value="1.1.11"> 1.1.11<br>
<input type="submit" value="Submit">
</form>
<form>
<input type="submit" value="Reset To Default">
</form>
<?php
/* The div container has a non-breaking space so that the div will exist to have a background */
echo '
<div id="img_container" class="'.$img_class.'"> </div>
';
?>
</body>
</html>
I hope that helps. If 1.1.9 still does not work when you replace the image in my example with the relative path to your image, then you should make sure that the image is located in the path that you have specified.
Good luck!
Found the solution, for anyone interested: after using a CSS validator, I found that there were invisible characters mucking things up. Lesson learned.
Related
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
Anyone know of a PHP method, code snippet or project that I can use or start with to take a HTML input and remove the <style> tag but apply all the styles to each element they were intended for?
Example Input:
<html>
<head>
<style>
body {
font-size: 10px;
}
td {
font-size: 8px;
}
</style>
</head>
<body>
<!--This is my table with smaller text: -->
<table>
<tr><td>this text is:</td><td>8px</td></tr>
</table>
</body>
</html>
Desired output:
<html>
<head>
</head>
<body style="font-size: 10px;">
<!-- This is my table with smaller text: -->
<table>
<tr><td style="font-size: 8px;">this text is:</td><td style="font-size: 8px;">8px</td></tr>
</table>
</body>
</html>
Why? I want my app to include original emails with replies without the original message styles messing with the format of the reply. I'm guessing this is the way forward for me because when you view the source of a reply in Outlook, it seems to use this method.
https://github.com/tijsverkoyen/CssToInlineStyles should do the trick. The code would look like this:
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
$cssToInlineStyles = new CssToInlineStyles();
$css = "body {
font-size: 10px;
}
td {
font-size: 8px;
}";
$html = "
<body>
<!--This is my table with smaller text: -->
<table>
<tr><td>this text is:</td><td>8px</td></tr>
</table>
</body>
";
echo $cssToInlineStyles->convert(
$html,
$css
);
If you'd rather use an online tool there is also http://premailer.dialect.ca/
What you're looking is a style inliner, that's often used on HTML email development, here you have some tools:
https://templates.mailchimp.com/resources/inline-css/
http://foundation.zurb.com/emails/inliner.html
https://inliner.cm/
https://putsmail.com/inliner
https://github.com/tijsverkoyen/CssToInlineStyles
https://github.com/jjriv/emogrifier
https://www.npmjs.com/package/css-inliner (for npm)
http://www.mailermailer.com/labs/tools/magic-css-inliner-tool.rwp
Depending on your apps code, you could find some library to do so... if you want to build your own.... maybe the npm package can serve you as guide.
Hope this helps
I am using Emogrifier for creating HTML mail messages - and it works really good for me.
Here's a link:
Emogrifier
You can use id and class to save your CSS code and call whenever you want in a tag.
I'm creating an e-commerce site and I'm having trouble vertically centering all my thumbnails. The problem is all my images are different sizes and getting each one to vertical align across all browsers is turning out to be a pain. I've looked into the different CSS options, display-table, line-height, and others. They worked in modern browsers, but not well in IE (of course). My thought is the large big time sites are resizing the image (which I can do with no problem) and then overlaying the image on top of a background the exact size they need. Does anyone know if this is how it's done? IF so can you direct me to some documentation of how to do this in PHP?
Or if someone thinks I can do this without all the extra work of overlaying images please let me know. In-case you want to see what I'm working with here ya go:
HTML
<a href="#">
<div id="product">
<div id="product-image">
<img src="" border="0" />
</div>
<div id="product-name"></div>
<div id="product-price"></div>
</div>
</a>
OPTION 1 : JQUERY (this seemed to be my best hope, but couldn't get it to work right)
var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
var top =( h- $(e).height())/2;
$(e).css("margin-top",top);
});
OPTION 2 : CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
}
#product-image img
{
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
EDIT
I found the working code, thanks Explosion Pills. For anyone trying to get this work I would suggest using this jQuery method and Fiddle link http://jsfiddle.net/9VfUS/1/:
WORKING JQUERY
var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
If you can use JavaScript, I would do it that way as it's surefire to get things to work the way you want. You are using .map for the wrong purpose. You want .each:
$('#product-image img').each(function () {
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
I assume that h was already calculated correctly as the tallest image or the height of the container or what have you. If it's not, then you have to do that.
Try this, if you know in advance the sizes of your images...
HTML:
<a href="#">
<div class="product">
<div class="product-image" data-image-loc="path_to_your_image"> </div>
<div class="product-name"></div>
<div class="product-price"></div>
</div>
</a>
CSS:
div.product-image {
background-position:center center;
background-repeat:no-repeat;
background-color: transparent;
background-attachment: scroll;
}
div.product-image-width-x-height {
width:{width}px;
height:{height}px;
}
JS:
$(document).ready(function() {
$('div.product-image').each(function() {
$(this).css({backgroundImage:url($(this).attr('data-image-loc'))});
});
});
If you don't know your sizes, then a resize script that serves all your images to a new size would fix that, and you would simply move the width/height css properties to the div#product-image CSS declaration.
So basically i would like to color the comments from users so it look clear and separate.
The comments is coming from the database, the php codes will generate the comments in a HTML page. And i am using CSS and Jquery as well. I have tried but my codes don't work, any idea?
HTML/PHP:
<?
for($i=0;$i<mysql_num_rows($comment);++$i)
{
$row = mysql_fetch_array($comment);
?>
<div class = "comment">
<p> <? echo $row['c_content']; ?> by <? echo $row['c_name']; ?> </p>
</div>
<?}?>
CSS:
.comment
{
background-color:#fff;
}
.alt
{
background-color:#ccc;
}
Jquery:
$(document).ready(function(){
$(".comment:odd").addClass('alt');
});
So as you can see, I want the "odd" comment class have color #CCC, and the even have #FFF... Please help
No need to use jQuery here. Use CSS:
.comment:nth-child(even) {
background-color: #fff;
}
.comment:nth-child(odd) {
background-color: #ccc;
}
Unrelated, but worth noting is that unless you're using both associate and numerical keys to access your mysql result, you should get into the habit of using mysql_fetch_assoc() instead of mysql_fetch_array() or you are always using twice as much memory.
I'm using SASS/SCSS and want to create a #function/#mixin which will figure the max possible font-size for a container, given a dynamic width.
For example:
<body style="font-size: 10px;">
<div style="width: 960px;"> <!--This width is dynamic-->
<span style="font-size: 12.3em">Patrick Rocks</span>
</div>
</body>
The unknown variable in this equation is the font-size on the <span> tag. I set it to 12.3em which would be 123px (relative to the font-size of the <body> tag), but that could change depending on letter-spacing font-family or other aspects. Perhaps because of the complexity of this it would be best served to calculate this with JavaScript, or PHP.
You can't do this on the server side, as the user's font may have any dimensions. You'll have to do it in javascript, in the browser.
I've worked it through and found a solution which fits my needs. The solution only works if the following is known.
The exact text being used
The font being used
The default width based on the parent font-size
DEMO:
http://wecodesign.com/demos/stackoverflow-7420897.htm
SCSS:
$logoDefaultWidth: 76; /*Pixels*/
#function getFontSize($newLogoWidth) {
$fontSize: $newLogoWidth/$logoDefaultWidth;
#return #{$fontSize}em;
}
#function pxToEm($px) {
#return #{$px/10}em;
}
body {
font-size: 10px;
}
.logo {
width: pxToEm($logoDefaultWidth);
}
.logo.s960 {
font-size: getFontSize(960);
}
.logo.s480 {
font-size: getFontSize(480);
}
HTML:
<div class="logo s960">Patrick Rocks</div>
<div class="logo s480">Patrick Rocks</div>
TODO:
This solution has a known issue with WebKit (Chrome/Safari) browers. WebKit browsers render #font-face font's much thicker than they should, thus making the $logoDefaultWidth incorrect. I'm working on trying to find out how to stop WebKit from making the font so thick, or on a separate calculation for WebKit.