I have changed the size of the images on the category pages from 135px to 400px. It now shows 3 columns with 400px images. This works fine! BUT I want the search result page to look the same as the category page. It already has 3 columns and the images are displayed as 400px. The only problem is that it still loads a 135px small image. Now the images are very blurry. How do I change this so it will load a 400px image?
Thank you
By default Magento displays the search results through the template;
app/design/frontend/YOURPACKAGE/YOURTHEME/template/catalog/product/list.phtml
I you wanted to change that then the best thing you could do is follow the advice in the following link and designate a custom template to display your results by copying and renaming the list.phtml file;
Magento design update to replace list.phtml on search results page only
You could then customise it however you want. The section you would change is the following code which, as you can see ( the ->resize(135) part) is resizing your small product image to 135px. Change that to 400 and assuming the small image itself is not smaller than 400px wide then it want be pixellated.
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
This can only be done through CSS. The CSS depends on the theme your using.
Related
I am using Magento 2.3.4 and have a problem with the site builder displaying 2 images. There is a patch available but it does not support Magento version 2.3.4.
Does anyone have a solution for this problem?
MDVA-36832: Images duplicate on pages with 768px view width
https://support.magento.com/hc/en-us/articles/4402390637453-MDVA-36832-Images-duplicate-on-pages-with-768px-view-width
By default Magento displays the search results through the template;
app/design/frontend/YOURPACKAGE/YOURTHEME/template/catalog/product/list.phtml
You wanted to change that then the best thing you could do is follow the advice in the following link and designate a custom template to display your results by copying and renaming the list.phtml file;
Magento design update to replace list.phtml on search results page only
You could then customise it however you want. The section you would change is the following code which, as you can see ( the ->resize(135) part) is resizing your small product image to 135px. Change that to 400 and assuming the small image itself is not smaller than 400px wide then it wants to be pixellated.
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
I'm trying to change the default upload resizing for the Small Image that is used for the catalog images.
Magento docs say to go to Config > Catalog > Catalog > Product Image
There, you can set the sizing for each type of image - Thumb, Small, Base.
I changed the Small Image size to 1000px (before it was 210px), but it is still uploading/resizing pictures to 210px. I have tried refreshing all Caches and Re-indexed, logged out and logged back in (just to cover all my bases). Each time I did these things, I re-uploaded images. I even tried uploading images with different names, just in case the image with that name was cached in my browser already.
I'm probably just doing this entirely wrong. How do I get these parameters set?
Thanks!
Nevermind, I figured it out!
Had to make an edit in the list.phtml file for my design theme:
<?php $_imgSize = 210; ?>
to
<?php $_imgSize = 1000; ?>
Open media.phtml file using a text editor of your theme and change the size of image like bolow:
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(300).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
I want to display an alternative image on hover on category page by assigning it in Product Information -> Images. I have created an attribute hover_image with the parameters Scope-Global, Catalog Input Type-Media Image, Apply to All Product Types. Added the attribute to the set. What should I do next? Thank you
To show the alternative hover image on category page. You need to make changes in Product Listing template in your current theme template/catalog/product/list.phtml.
As you have already created the media type attribute 'hover_image'. So you need to fetch hover_image type image like below:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'hover_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'hover_image'), null, true) ?>" />
Now you need to use javascript to apply hover effect on product images to hide the original image and show hover image.
I am using Magento 1.9.0.1.
When I go on a Category to view the products, All products are shown in square boxes.
As my images are rectangle, I can see the white space on left and right sides of the images.
Please advise how to edit the code so that images are shown rectangle shape (hight:300px width:200px).
Thanks
Take a look #
/app/design/frontend/default/{theme}/template/catalog/product/list.phtml
Change resize(width, height)
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(158, 150); ?>
Use this code for product images in list.phtml file(app/design/frontend/[current package]/[current theme]/template/catalog/product/list.phtml)
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($width, $height); ?>
Hope this helps! Thanks.
Inside Magento templating code I want to get the width and height of the original product image (uploaded by admin when creating product), so as to make according adjustments.
How can I do this? Thus far I have:
$this->helper('catalog/image')->init($_product, 'image')
Does this have any methods that would allow me to retrieve the original dimensions of the product image? Such as:
$this->helper('catalog/image')->init($_product, 'image')->getWidth()
Or something?
Thanks!
Just found it in the docs: http://docs.magentocommerce.com/Mage_Catalog/Mage_Catalog_Helper_Image.html
Seems it's:
$this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight()
$this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth()