I have this function in PHP, which came in a project that I' working:
foreach ($reports["included_reports"] as $index => $report_name ) {
if (! in_array( $report_name, $reports["excluded_reports"])) {
$optional_reports .=
"<div class=\"large-12 columns\">
<div class=\"panel\">
<a href=\"./graph_all_periods.php?$graph_args&g=". $report_name ."&height=???&width=???\">
<img BORDER=0 style=\"padding:2px;\" $additional_cluster_img_html_args title=\"$cluster_url\" SRC=\"./graph.php?$graph_args&g=". $report_name ."&height=???&width=???\" >
</a>
</div>
</div>";
}
}
I would like to resize the image to fill my div, but I cannot use width:100% 'cause I have to inform the width and height to PHP. But PHP is executed first and I can't know the resolution of user monitor either. Searching in Google I found out I only can know the user monitor resolution via JavaScipt.
So I wonder if is possible to do something that I can know the user monitor and inform to my width and heigh parameters in img tag.
best way to ensure that an image will always fill a div to set it as a background image and use CSS background-size to stretch it
In your js, for the user monitor try window.screen.width and window.screen.height. For the image dimensions, you can use 100% in your css and then get the height and width with your js in px with img.clientWidth.
Related
How can I resize an image on mouse hover using PHP with $_GET? I know that this can easily be done with css or js but I want to know how to do it with php. I don't want to upload a file either. So let's say I have html code with an <img> tag and an image, how can I use PHP or $_GET to resize that image on hover?
EDIT:
What i mean is to put the image between <a> tags and then when clicked it refreshes the page but adds the the name of the image to the url so then I could use $get to access and echo a style to resize it.
Resize question on Stack Overflow
PHP is server side and you would have to refresh your page to display a resized image on hover(although I'm not sure if you can implement action on hover without js) and if you don't want to refresh you need to use AJAX(and that requires Javascript)
Going off of your edit, are you looking for something like this?
<?php
if(isset($_GET['image'])){
echo "<img src={$_GET['image']} style='height: 100px; width: 100px;' />";
}
?>
<img src="image_name.jpg" />
I created a slider in WordPress using CSS background image URL dynamically inserted by php.
foreach ($slides as $key => $value){
array_push($output,'<div class="slider-slide" style="background-image:url(' . wp_get_attachment_image_src($value['image'], 'full')[0] . ');">');
array_push($output,'</div>');
}
I did this because it works better responsively, I.e. it scales down nicely by just setting the background size to cover and giving a max height.
background-size:cover;
My problem is that because I have used the full size image url, although it still scales nicely it will always load in the full image rather than the srcset image that would have been loaded if I was using the standard WordPress attachment function (link for info on srcset update).
Any suggestions would be appreciated.
Can anyone help me create a lightbox with wordpress magic fields.
I need one 'Image (Upload Media)' in magic fields to create 2 images in different sizes.
e.g a thumbnail 100 x 100 px
and a lightbox image 600 x 400px
wrapped in the code:
<img src=“http://localhost:8888/thumbnail-image.jpg” alt="" />
I am a bit stuck on how this could be achieved.
Try this solution.
PHP backend (http://wiki.magicfields.org/doku.php?id=front-end_functions):
echo '<img src="'.get_image('fieldName',1,1,1,NULL,"w=100&h=100&zc=c&q=90").'" alt="" />';
JS frontend (http://api.jquery.com/category/selectors/).
I suppose you use jQuery library for lightbox, so read about jQuery selectors.
Your situation: Attribute Equals Selector [name="value"]
Your js code must be:
$("a [rel='lightbox']").lightBox(params here)
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!
I'm working on project where we are trying to adopt and resize template images to the various resolutions. For example if the website is viewed in 800px width (800x600) and 1024px width or larger the image size should be viewed in same quality.
I've had in mind to use sprite with 3 types of images for each range of this template , but I'm looking for other ideas , php gd maybe ? Any python solution ?
Well, for resizing it would of course be better to use GD... But indexed, I think. So that you have an upload script that automatically generates the images' in other sizes, and saves them somewhere.
However, it matters whether you have more disk space, or performance... Performance would get worse IF you have many people viewing these images. Disk space would get worse IF you have A LOT of these images.
Python Imaging Library will give you dynamic resizing, processing, etc.
If you are resizing to a known set of resolutions, you can just resize your images once and store them.
If you need to resize for any possible resolution, you will need a library to do that for you. In PHP, GD or ImageMagik are both good.
If you do this, you may want to add caching for the most common resolutions. This will take up more disc space, but will save you the cost of recalculating all the images every time.
Note that it can be difficult to detect the true resolution though. If the browser window is resized, the resolution you think the screen is may not be the actual resolution the user can see. The same can happen if they have toolbars or sidebars opened.
Why not resize the image on the client using JavaScript?
<head>
<script>
function resize() {
ww = window.innerWidth
wh = window.innerHeight
photo = document.getElementById("photo")
// You probably wouldn't actually make the image fill the window, you'd pick
// some appropriate size.
photo.setAttribute("width", ww)
photo.setAttribute("height", wh)
}
</head>
<body onload="resize()" onresize="resize()">
<img id="photo" src="photo.jpg">
Getting the inner window width is quite hard, as different browsers use different variables. However, this is what I use on my website. It gets the inner window width rather reliably, and then sets the image width/height. It shouldn't be too hard to modify this code to set the src of the image desired.
function set_image_sizes(){
if (window.innerHeight != undefined) {
height = window.innerHeight;
width = window.innerWidth;
} else if (document.documentElement.clientHeight > 0) {
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
} else {
height = document.body.clientHeight;
width = document.body.clientWidth;
}
$('#image').css('height', height);
$('#image').css('width', width);
}