Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/
This is the code that I am using
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
echo '</div>';
}
}
} else {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
echo '</div>';
}
}
}
Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date).
With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class.
I also notice an inconsistency here:
if ( !$detect->isMobile() ) {
...
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}
It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.
I think you've choosen a bad way to solve this problem.the best way is using css (media query).
you can't use "%" in html tag width.
width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.
If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:
<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration
Related
I've got a a-tag dynamically populated which extracts data from a database and multiplies to the number of records existing. So this to be looked at more like an item in a list.
echo "<a class='Keylist ".$wecb_color."' id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
I'm trying to keep one of the a-tags background set on a different color when a user clicks. Behavior I'm trying to achieve is when a user scrolls and clicked on one link, that a-tag to remain selected depicting a different background color.
I've written snippet trying to do that.
$wecb_color ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_color = 'changetogreen';
}
}
The issue is this makes all the a-tag's which are generated having a background color changed to green instead the one that user clicks.
Hard coded CSS script reads as :- .changetogreen{background-color: green;}
Any thoughts appreciated.
It'd change the background color of all links because you're changing the whole class style.
Try this:
echo "<a class='"Keylist " style=" '.$wecb_style.' ;" id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
So you can change the style of particular tag.
And PHP would be:
$wecb_style ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_style = 'background: green';
}
}
I've searched through various forum posts on Overflow-x:scroll, which explain how to implement it, and in most cases the same fix has resolved the OP's issue.
However, I have followed these posts and still cannot seem to resolve my issue, please help!
I am creating an image preview pane (Large image, list of thumbnails), and I am trying to place the thumbnails in a scrollable DIV horizontally, but am striking out over and over again.
With my current code I have set the width to 200px, but despite the presence of overflow-x, the div is still showing all of the thumbnails across the screen.
#Thumbview { position:relative; height:100px; width:200px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
My PHP is as follows for this small bit:
<div id="ThumbView">
<?php
// Create a slide-able thumbnail view.
$piclist = explode(", ", $datafiller['PictureList']);
foreach ($piclist as $thumbnail) {
echo "<img src=\"./Images/Inventory/" . $_GET['carid'] . "/thumbnails/" . $thumbnail . "\">";
}
?>
</div>
I have attempted to enclose each IMG in a DIV, with no luck, change display types on both the container and the children to various inline elements. Still no change. Ideas?
Your id names should match (care about the V)
<div id="ThumbView">
#ThumbView
is this what u need?
http://jsfiddle.net/x96hq47c/
I am trying to determine in which way an image has to be cropped to fit perfectly as a square user profile image.
I have discovered the Laravel package "intervention image" but as far as I can see this one does not offer a function to compare whether an image is horizontal or vertical.
http://intervention.olivervogel.net/
Is there any good way to determine whether the image is a square or horizontal or vertical before resizing and cropping it?
This is what I do at the moment:
$img->resize(400, null, true)->crop(400, 400);
It works perfectly for squares obviously and it works pretty good for vertical but it does not work very well for horizontal images.
Any help would be much appreciated.
Thanks!
So, here's my take on it.
http://jsfiddle.net/SinisterSystems/PD4a2/1/
HTML:
<img id="img1" src="http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg" />
<img id="img2" src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall%2Bcopy.jpg" />
<img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/8/89/Love_Heart_symbol_square.svg" />
CSS:
img {
max-width:500px;
max-height:500px;
border:1px solid #000;
}
Javascript:
function findSize(x){
var h = x.height();
var w = x.width();
if(h<w){
alert("Image is wider than it is tall.");
} else if(w<h){
alert("Image is taller than it is tall.");
} else {
alert("Image is square.");
}
}
findSize($('#img1'));
findSize($('#img2'));
findSize($('#img3'));
Gives you a definitive comparison of which values are either taller, wider, or square.
All you would have to do otherwise is include the add css code I provided in the previous question you posted for each conditional. I'd set a horizontal class, vertical class, and a square class. Like this Fiddle. You will have to define the classes in CSS
Obviously I just set a border color, but you could do whatever you wanted at this point.
You can use getimagesize($link), which returns an array with the width and height of an image. Then just check horizontal or vertical or square using:
<?php
function WvsH ($link) {
$size = getimagesize($link);
if ($size[0] < $size[1]) {
return 'vertical';
}
else if ($size[1] < $size[0]) {
return 'horizontal';
}
else {
return 'square';
}
}
?>
Of course, that is assuming that the link exists.
I have several sites on the same hosting package. They’re all in different directories. ( i.e. “htdocs/site1”). I want to be able to have them all share one CSS file.
I was wondering if there is a way to change the color of certain elements based on which directory the site is in.
Ideally I would like to be able to define what directory the page is in and what color to use for each directory. Then in my CSS do something like:
.button { color: <?php echo $color ?> ;}
to each element that gets a color change.
Is this possible and if so, how do I go about setting this up?
thank you
You could add different classes to your body tag depending on the directory:
<body class="<?php echo $dir; ?>">
where the $dir variable is given a different value (let's say $dir = 'site1',...) for each directory...
... And then have something like:
.site1 #button { /*styles*/ }
.site2 #button { /*styles*/ }
.site3 #button { /*styles*/ }
in your CSS file.
You could add a CSS class to the body tag of the HTML document to determine the site. In PHP you would have to find a way to write the correct site into to the document. Do you use some kind of global template?
Just to give you an idea:
PHP:
<?php
// some code
// some logic to determine which site you are on - let's say ...
$site = 'SITE1';
?><body class="<?php echo $site; ?>"><?php
// more code
?>
CSS:
body.SITE1 #button { color: #ff0000; }
body.SITE2 #button { color: #0000ff; }
body.SITE2 #button { color: #123456; }
You could dynamically generate the css file using php, where you'd have
<?php
switch ($_SERVER['SERVER_NAME']) {
case 'www.site1.com':
$color = '#ff0000';
break;
case 'www.site2.com':
$color = '...';
break;
...
default:
$color = '...';
?>
.someclass { color : <?php echo $color ?>; }
This is somewhat inefficient, however. You'd be building a css file just to change a single color each time. Better way is to simply embed the color change in the page's header as an in-line style. That way you don't have to mess with making your server parse CSS files as if they were PHP scripts, and you can put the site-specific css overrides into that inline style in the site's header.
Honestly, I would suggest you add a class to your html tag:
<html class="site1">
And within your CSS, define your css:
.site1 * .button1{ background:#f00;}
.site2 * .button1{ background:#f0f;}
.site3 * .button1{ background:#ff0;}
You can find some more information on this subject here for a PHP approach.
How can I set my Iframe height to be dynamic to its content.
The content is only PHP code, nothing else.
I use the php to query database, and then show some ads. The more ads, the higher the iframe should be.
I thought height='100%' should do it, but no...
I have read other Q but their solutions doesn't work for me.
Suggestions ?
Thanks
You have to set height of iframe in javascript. JavaScript should be in page inside the iframe (must be if page with iframe and page in iframe are from different domains).
a.html:
<iframe src="b.html" id="myiframe"></iframe>
b.html:
<div style="height: 500px; background:magenta;"></div>
<script>
parent.document.getElementById('myiframe').style.height = document.body.offsetHeight+'px';
</script>
If the ads are just text, you can use line height * number of lines as the height. I assume you know the font size, and number of lines can be found by counting <br />'s:
<?php
// $content is your ads
// assuming ads.php returns an ad with an id, this example uses ad #10
// We are reading it with a full url because we don't want to read it as just
// a text file (we want it to be interpreted by php before we load it)
$content = file_get_contents('http://www.example.com/ads.php?id=10');
$line_height = 12; // line-height: 12px; is set in CSS
$number_of_lines = substr_count($content,'<br />'); // you can search for <br>
// and <br/> as well if you
// need to
$height = $line_height * $number_of_lines; // You may also want to have padding
?>
<iframe src="ads.php?id=10" height="<?php echo $height; ?>" />
EDIT: changed $font_size to $line_height