Remove white space from Image in Opencart
Note : vqmod need to be install to fix this issue...
Create a xml file named white-space.xml and paste belowe code in this xml file...
<modification>
<id><![CDATA[Fixes white excess for non-proportional image resize]]></id>
<version><![CDATA[1.0]]></version>
<vqmver><![CDATA[]]></vqmver>
<file name="system/library/image.php">
<operation>
<search position="replace"><![CDATA[$this->image = imagecreatetruecolor($width, $height);]]></search>
<add><![CDATA[$this->image = imagecreatetruecolor($new_width, $new_height); /* MX]]></add>
</operation>
<operation>
<search position="replace" offset="4"><![CDATA[imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);]]></search>
<add><![CDATA[MX */
imagecopyresampled($this->image, $image_old, 0, 0, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
imagedestroy($image_old);
$this->info['width'] = $new_width;
$this->info['height'] = $new_height;
// MX End ]]></add>
</operation>
</file>
</modification>
Now open your opencart directory go to vqmod/xml and paste here above xml file..
That's it enjoy chandresh rana coding... :)
17 comments:
Your Contact Form does not work!!
I have created xml file for the remove white space around images. Can you let me know what else I need to do to get it working?
Have you installed vqmod.. ?
Thks!
Welcome :)
hi i have installed Vqmod & inside vqmod/xml/ created white-space.xml file. still white space is there. may i know what is the issue ?
Hi, how to get it working only for popup product images in opencart 2.x and use default resize function in all other places?
Dear ...
I have installed it all and it works very well
Thanks
There is one thing that I like to solve out
Photos that are made verticaly are placed to the left side of the product "box" in the category pages and in my home page.
See my site www.toonkamer-webshop.nl
Is it possible to center them so they line up of products is better balanced.
ps I have not refreshed the old data photos yet so there is still a grey area beside the photos which are old
Thanks for replying
Remko Dalstra
Hey Remko,
Kindly upload all the image in a same size which is solve your problem.
Thanks
Dear .
Thanks for replying.
But my camera cant make square photos and its to much work to modify them all
I have addes the line align: center;
in the part which rules the large photo on the product page and it works well. See:
Stylesheet.css
product-info .image {
border: 0px solid #FFFFE4;
align: center;
margin-bottom: 20px;
padding: 10px;
text-align: center;
But if I add the same line in the part which rules the thumbnails on the home page it doesnt center the photos See:
.box-product > div {
width: 147px;
display: inline-block;
align: center;
padding: 10px;
What am I doeing wrong?
Nothing happen. Yes, I have install vqmod on OC 2.0.1.1. http://galerija-luka.com/svi-radovi
Found the solution to center the pictures.
On the home page: (if there is a line of products)
(In my case 7 pictures, total with site 1216px))
.box-product > div {
width: 168px;
display: inline-block;
Margin-top: 35px;
vertical-align: bottom;
text-align: center;
.box-product .name a {
font-size: 12px;
color: #4f4f4f;
font-weight: bold;
height: 20px;
text-decoration: none;
margin-bottom: 4px;
.product-info .image {
margin-bottom: 20px;
padding: 10px;
text-align: center;
ON THE PRODUCT PAGE:
.product-grid > div {
width: 148px; (in my case 8 products)
display: inline-block;
vertical-align: bottom;
text-align: center;
margin-bottom: 15px;
.product-grid .name a {
color: #413E1B;
font-size: 11px;
height: 20px;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
Adjust the format of the photos in ADMIN: EXTENSIONS/NEW (homepage) and ADMIN:CONFIGURATION/SHOP/PICTURES (product page).
The difference in dimension of the photos and the grid (168/148 in my case) is the space between the pictures (horizontally).
Photos are lined up symmetrically and height 20px lines the bottom of the pictures if text is added.
See: www.toonkamer-webshop.nl
If this software does not work: (1.5.5.1 and others)
Don't forget after uploading this software to clear the image cache.
Otherwise only the new uploaded photos are adjusted. The old pictures remain the same
Create a new data file called Data.
Open (filezilla) IMAGE CACHE and rename the data cache to for example Data1.
Drag your new data file insite CACHE and delete your renamed file (only after everything works well).
Never delete the Data file in IMAGE because it is your uploaded photos of the site. The cache consist all the special made photos for for example the thumnails.
Remko
Remove the pop-up outlines (box)
If you also want to remove the outlines (box) of the pop-up (enlarged) image so to leave only the picture see:
https://forum.opencart.com/viewtopic.php?f=21&t=158135
Hello is it work with Opencart Version 2.1.0.1 ?
I'm afraid it works not with 2.1
Tried it for some time in 2.1.0.2 but it didn't work
Although the part in image.php (system/libery/image.php) which is replaced bij this software is nearly the same as 1.5.5.1.
Please help
Sorry
In opencart 2.1.0.2 images are already displayed without white space.
So this software is not needed.
Wrong post
Images are displayed with white space
To remove white space on 2. see:
http://forum.opencart.com/viewtopic.php?f=182&t=163791
Post a Comment