I need to set lightbox and size with the post_thumbnail function.
I have this code implemented on my site http://pastebin.com/UhA1UxYv
How can I set a size like 355px X 236px and this large image add the rel to open in lightbox? or thickbox
I know that the function to set size is array(355,236), but I don't know how implemented this in the code.
like this i think
wp_get_attachment_image_src( get_post_thumbnail_id(), array(355,236))
It is very simple, use this instead will save your time and server load.
http://code.google.com/p/timthumb/
Related
I would like to set the gif file in the featured image. I would like it to run when I hover over it with the mouse.
I know I should set this in functions.php file
Together with the code:
add_theme_support ('post-thumbnails');
Unfortunately, I have no idea how to do it. I create my blog and I have never done such things. Could someone help me how to do it?
Thank you for your help!
When you upload an animated GIF to WordPress, it does all of it’s resizing magic to make the various thumbnail sizes (defaults are thumbnail, medium and large, in addition to the original full). When it does this, the resized versions lose their animation.
If your theme displays featured images at any size other than full, you’ll thusly lose your GIF’s animation.
If you definitely know that you want to display the animated version, though, there’s a little trick you can use.
<?php $thumb_url = get_the_post_thumbnail_url();
$thumb_low = strtolower($thumb_url);
if (strpos($thumb_low, '.gif') === false) {
$thumb_size = 'large';
} else {
$thumb_size = 'full';
}
?>
What am I doing here is getting the URL of our featured image, then I make sure it’s all lower case letters (WordPress may do this anyway, but just to be safe), then I check to see if .gif is present in the thumbnail’s URL, and finally, if it is, I set the thumbnail size I use to ‘large’. Doing so will allow me to use the original image, which retains it’s animation.
Then, I just need to tell our call to the_post_thumbnail() to use the variable thumbnail size we set, like this:
the_post_thumbnail($thumb_size)
If you’ve ever tried to set an animated gif as a featured image in WordPress, you’ve probably discovered that you can’t.
The reason why is pretty simple. Your theme grabs a resized version of the featured image you upload. And in the case of an animated gif, that means it’s not grabbing the original gif image, and so you end up with a static image.
The way around this is pretty simple, however. You can just install a plugin that automatically sets the featured image from the first image in a post. Of course that means you will need to make the animated image the first image, but at least it’s a workaround.
There are a number of plugins that will let you automatically set your first image as the featured image. I tried two and the both worked: Autoset Featured Image and Automatic Featured Image Posts.
Something else I found was that I didn’t even need to download the gif. I could just insert it with the URL.
i am displaying an image usign readfile() function of php
HMTL:
<img src='image.php?id=232'/>
PHP: image.php
<?php
$id=$_GET["id"];
if(image_view_allow($id)){
$path=get_image_path($id);
readfile($path);
}else{
readfile("images/not_allow.png");
}
image_view_allow and get_image_path is two that i have defined to check validation and get path
I am doing this because i want show image only to the allow person.
Does this affect speed of downloading an image ?
what is normal(means direct path in src attribute of img tag) or trick that is shown above?
Just loading an image probably same,but it is always better if you handle images with php, because when you resize image with php you load the needed size. But with html you load the bigger size than you need and resize.
first -> Does this affect speed of downloading an image ?
answer: no, because when the page is loaded, the php code is already translated to html before page is loaded in the borwser.
second -> what is normal(means direct path in src attribute of img tag) or trick that is shown above?
answer: both are same as both involve php code. When code executes in either way it will enter the source of the image in the image tag.
if i want the product image to have the following functioin,
when i upload a small image, it will not show the function,except i uploaded an enough large image,what's the smallest size of the image when installed magento with default state. thank you.
It depends on the display size of the containing element. Look at the JavaScript functions in the default included "product.js" file. You'll find this in lines 58-64:
if (this.imageDim.width <= this.containerDim.width
&& this.imageDim.height <= this.containerDim.height) {
this.trackEl.up().hide();
this.hintEl.hide();
this.containerEl.removeClassName('product-image-zoom');
return;
}
Where this.containerDim is the parent node of the image element ($(imageEl).parentNode). (I think default is a p tag with class="product-image").
Try changing the display size of the P tag to something smaller and re-initialize the Product.Zoom method with the appropriate parameters and see what happens.
If memory serves me correctly that will be 265 pixels on default theme. But nobody uses the default Magento product zoom viewer, you need to roll your own or go onto 'connect' to get something better.
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 have two types of posts in the theme I am creating Trending and Normal. Post thumbnail image size is: 300x169 and I show it as that size when a trending post is displayed. But when this post is not trending I want the thumbnail size to be: 145x80. I tried the_post_thumbnail( array(145,80) ); but it doesn't work. Instead this crops the image in squarish dimensions. I don't want it to crop but decrease in size via HTML.
Can anyone please help me with this.
Thanks! Appreciate all the help.
You could try adding a new image size and then when you call the_post_thumbnail you pass it the name of the new image size you have set. Set the hardcrop flag to false if you don't wan't the image resizing via hard crop.
http://codex.wordpress.org/Function_Reference/add_image_size
You can change the size from CSS by doing this:
<div style="width:145px;height:80px;"><?php the_post_thumbnail();?></div>