For some reason, on this page, the images are not positioned neatly inside the rectangles; instead they are shifted slightly to the right in IE, Chrome, and Firefox.
<img height="350" width="150" class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>" />
I set the image to have a height of 350 and width to be 150 for uniformity.
The "rectangle" itself is
<div class="item_image">
<!--IMG HERE--></div>
I am using the WP e-Commerce Grid View Lite plugin with WP e-Commerce (another Wordpress plugin).
The problem is in the index file (http://yadress.com/make-it-yourself/) on the line 116. On the anchor selector.
.product_grid_display .item_image a {
width: 350px
}
Removing the width property from that anchor solves the issue.
You have 3 options
Distortion the image to fit the frame (div), so bad
.product_grid_display .item_image a {
width: 350px;
height :150px;
}
Create a fixed-size frames , and overfollow attributes : hidden
.item_image{width:px;height:150px;overfollow:hidden;}.item_image img{widht:100%}
use timthumb to crop a picture fit the frame.(recommend, this is the best way, also good for page speed)
This website uses timthumb, you can refer to this site
Related
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.
A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:
HTML:
<div class="img-container">
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>
CSS:
.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}
Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML
I'm working on a WordPress site where I use the WordPress Events Manager plugin to display events. When the client creates a new event I use the WordPress featured image option as the main image (the_post_thumbnail();). The problem I got is that the images that the client uses are quite large and sometimes they are too big, so I added a max-height to the feature image, but now the images can get a bit distorted when I "cut" them of in the middle. So I thought "Let's make them to a background-image" But I am struggling to do so in PHP. This is what I've got:
<div class="event_img" style="background-image:url('<?php the_post_thumbnail(); ?>');">
</div>
But this doesn't do anything on the custom page template that I use to display a single event.
Since WordPress 4.4, there's an efficient core function that can handle this in a cleaner way than the answers here.
You can use the_post_thumbnail_url( $size ) which will print the URL of the post thumbnail.
Alternatively if you want to return the URL instead of immediately output it, you can use $url = get_the_post_thumbnail_url( $size );
please see this link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/
Perhaps it will help you.
So I got it working like this:
I had done it without echo
<div style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>'); width: 100%; height: 100%; background-position: center;">
</div>
I'm trying to put constant image size for post thumbnail in my site. (no matter whats the size of the original image, the image should scale for the constant size).
I try this:
<?php if (has_post_thumbnail()) the_post_thumbnail(array(400, 200)); ?>
But then I got this in my site:
<img width="356" height="200" src="http://localhost/mida/wp-content/uploads/2015/07/תמוננ-מ.jpg" class="attachment-400x200 wp-post-image" alt="תמוננ מ">
The width and height are different then what I put.
Thanks in advance!
Why don't you just use CSS? Find the lass that is used on the thumbnails (with yourbrowsers developer tool) and apply the desired size to that class:
.the_thumbnail_class img {
width: 400px;
height: 200px;
}
(note: that class name is only a guess)
however, keep in mind that images that don't have a width/heigth proportion of 2:1 will be distorted that way, so it's better so write this:
.the_thumbnail_class img {
height: 200px;
width: auto;
}
that way they will all have the same height, the width will adust automatically, keeping the proportions intact.
First set the thumbnail details in functions.php
under add_theme_support( 'post-thumbnails' );
add add_image_size('custom-thumb', 400, 200, true);
Then in your template code you can call like this
echo the_post_thumbnail('custom-thumb');
How can I take an image that has been entered into Wordpress and fit it into a specific sized div without losing it's aspect ratio?
The div is 104px x 104px but the user could literally enter an image into Wordpress at any size.
I'm using the following to insert the image from Wordpress into the page:
<img border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
I haven't set a width or height.
This has nothing to do with WordPress, PHP, or any other server side program, or programming language.
<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
As long as you set max-width and no other widths or heights the image will be no larger than the containing element and won't lose aspect ratio.
set only one parameter i.e. height or width. You will never loose the aspect ratio of that image. You can set the width of the container and make image width to 100% or you can directly add width to your image, but don't set both parameters to get the correct aspect ratio.
Use http://phpthumb.sourceforge.net/
here you have a lot of demons how to use it
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
Set the images CSS max-width and max-height values to the width and height values of the surrounding div.
<div style="width: 104px; height: 104px;">
<img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>
I'm not familiar with Wordpress, but wherever you can change these CSS values, do it and it will fit the div.
Wordpress uses a function to center completely the image on a thumbnail when you are editing a post so it look like this when i´m editing the post:
i´m trying to show the image that way on a wordpress page but I don´t know how to create a function like the one that uses wordpress to do that:
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
So this is how it looks in my page:
it just shows from the top, so it cuts the image, no center or resize
this is my markup:
echo '<div class="aimagediv" >'; //
echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
echo '</div>';
i´m limiting the width just to show something, i know it´s wrong to do it that way, that´s why i´m looking for a function to rezise and center the image over the div.
Can someone help me with this one?
I think you're better to put this image as a background image of the div and then using css to change background-size to cover and then background-position to center...
HTML
echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';
echo '</div>';
?>
CSS
.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}
Here's a jsfiddle showing it in action:
http://jsfiddle.net/Jhu2Y/
will this div have any other content besides the image? you could use CSS to define a height/width for the div and set the image as a background image with a background size of cover... like this:
** EDIT -- Adding PHP tags before and after since the OP was using echo **
<?php
// do all the php code here that you want before the image div
?>
<style type="text/css">
div.aimagediv {
height:270px;
width:270px;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
div.aimagediv:hover {
cursor:pointer;
}
</style>
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>
<?php
// do the rest of your php stuff here
?>
Then if you want to make the div clickable you could use an onclick like this: (replace the div line above with this one)
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>
It's container probably has a limited height. So When you set the only witdh, it will stretch the image to fit that width, maintaining the aspect ratio.
If you set only the height, it's the other way around.
If you set both width and height it will stretch the image to fit those bounds (and thus maybe screw up the aspect ratio.
So in your case, set the height, or set both (but make sure you got the ratio right)
if you want the image to center relative to it's container, use CSS to set the left and right margin to auto