Optimizations to make image display look better
-
Hi Nitesh, thank you for the great plugin and I wish you much success with it.
To make the images look cleaner, I prefer to have them of a fixed height, otherwise the page gets jumbled. Here are the changes I did to the code:Images need to be 190px high and no more than 280px wide
To prevent images from looking compressed in auction overview:
css/ua-front-end.css line 168
below: .wdm_single_auction_thumb img{
from: width: 100px !important;
to: width: auto !important;To reduce the white space to the right of the image in auction overview:
css/ua-front-end.css line 134
from: width: 20%;
to: width: 13%;
css/ua-front-end.css line 140
from: width: 20%;
to: width: 27%;Correcting grammar
auction-shortcode.php line 172
from: Reserve price has met.
to: Reserve price has been met.Shortening line, so it does not spill over
auction-shortcode.php line 178
from: Reserve price has not been met by any bid.
to: Reserve price has not been met.To make an auction image and the small images below
conform to a fixed height and variable width:
css/ua-front-end.css after line 19 – insert width and height lines
.wdm-image-container .auction-main-img
{
width: auto !important;
height: 200px !important;
margin-top: 10px;
padding: 5px;
}
.wdm-image-container .auction-small-img
{
width: auto !important;
height: 42px !important;
padding: 3px;
cursor: pointer;
}To avoid the small images being displayed to the right of a narrow image
add <div> and </div> tags in auction-shortcode.php after line 52, as in:
<div class=”wdm-image-container”>
<img class=”auction-small-img”…
<img class=”auction-small-img”…
<img class=”auction-small-img”…
</div> <!–wdm-image-container ends here–
- The topic ‘Optimizations to make image display look better’ is closed to new replies.