I'm using timthumb to display a full screen gallery slider in a wordpress site. What I want to do is resize that image to fit the viewport of the vistors machine. At the moment the values are static.
I know php can't detect viewport size, so I assume I need to use jquery.
var viewport_Width = $(window).width();
var viewport_Height = $(window).height();
The problem I have is I don't know how to connect that output to this piece of PHP with static values that tells timthumb how big to make the image:
<div class="cover"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&h=800&w=1280&zc=1" alt="<?php the_title(); ?>" width="1280" height="800" /></div>
Please explain it slowly as i am fairly new to PHP.
Use javascript to remove the height and width attributes of your imgs, and then use CSS to set their width and or height to 100%.
$('.cover img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
Related
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.
In my website I got like 10GB of images but 90% of that images are really huge. And what I need is to render them in thumbnail, but I don't want to create thumbnail for each image. And I create a code for resize it and print it in PHP and just call the PHP.
But I also need the follow data, that I don't know how to add it.
<img src="<? echo $img; ?>" width="<? echo $width; ?>" height="<? echo $height; ?>" alt="<? echo $descr; ?>" tag='<? echo $tags; ?>' id="img_idea"/>
How could I add all this information?
Thnaks
If you are concerned with Bandwidth you'll want to make SMALLER new copies of your big images when they are uploaded.
If you are also concerned with space, you can create a page (i.e. www.mysite.com/image.php?imgid=133) that will look up the images, check for the smaller version, create it if it does not exist, then serve the smaller version.
Check out PHP GD and the numerous plugins that stem from it to figure out how to resize the images.
If you're NOT concerned with Bandwidth, you can wrap your img in a div, then apply the desired width/height to the div and max-width: 100%; and max-height: 100% to the img.
So here is my problem, I know the width of the images, but I don't know the height, and I'm using a preloader, my problem is that when the images are loading...the content under the images bounces down...when it's fully loaded, If I had fixed images width&height it will be easy to solve this, just set them using width and height attributes and it will look ok.
But is there a way to set the height before the page is rendered, maybe using PHP or so.
You can use getimagesize() on the server side with php to get image height and add that data properly to html. If you have too many images and you don't want to go though them every time the page loads, then consider caching this data in database somewhere
Well, you can get the hight and width via imagesx and imagesy then print it.
<?php
$img = 'image.jpg';
$image = imagecreatefromjpeg($img);
$width = imagesx($image);
$height = imagesy($image);
print '<img src="'.$img.'" height="'.$height.'" width="'.$width.'" alt="" />';
?>
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)
So I automatically resize my iframe based on content height as follows:
<iframe name="main" id="main" src="main.php" frameborder=0 scrolling="no" onload="this.style.height = main.document.body.scrollHeight + 5; this.style.width = main.document.body.scrollWidth">
However, I also use a link to change the src (utilizing target if anyone was wondering), but my iframes vary heights vastly, and after changing back to the shorter one, my methods of resizing the div/document body haven't worked...
ex.
<a href="mail.php" onclick="document.getElementById("content").style.height = main.document.body.scrollHeight" target="main">
Any suggestions?
Div resize was working fine, provided I fix the double quotes...the problem was that the iframe wasn't resizing after changing source, got it working now though...Thanks