0

I want to precisely adjust the product images only because there is a large empty space from the bottom of the picture under add to card.

See the picture to find a great emptiness.

I want to put any size image to be full place, so there is no empty space.

I will give you all list.html file and new.html file:

enter image description here

enter image description here

=> list.html 

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>
<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
    $setting = Mage::helper('galabrandstoresettings');
?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php // List mode ?>
    <?php if($this->getMode()!='grid'): ?>
    <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>" <?php if($setting->getProductsList_Gutter()): ?>style="margin-bottom: <?php echo $setting->getProductsList_Gutter() ?>px"<?php endif; ?>>

            <!--show label product - label extension is required-->
            <?php Mage::helper('productlabels')->display($_product);?>

            <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($setting->getProductsList_Width(265), $setting->getProductsList_Height()); ?>" width="<?php echo $setting->getProductsList_Width(265) ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" <?php if ($alt_img = $setting->getProductsGrid_AltImg()): ?> 
                rel="<?php echo $alt_img ?>" 
                data-alt-src="<?php echo $this->helper('catalog/image')->init($_product, $alt_img)->resize($setting->getProductsList_Width(265), $setting->getProductsList_Height()); ?>"
                <?php endif ?>
                alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /><?php echo $setting->getProductsList_AltImg() ?></a>


            <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                    <div class="desc std">
                        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
                    </div>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product) ?>
                    <?php endif; ?>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

    <?php else: ?>

    <?php // Grid Mode ?>

    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php if ($_collectionSize > 0): ?>
    <ul class="products-grid row">
    <?php $i=0; foreach ($_productCollection as $_product): ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?> <?php echo $setting->getProductsGrid_Item('span6'); ?>"style="<?php if($setting->getProductsGrid_Width()): ?>width: <?php echo $setting->getProductsGrid_Width() ?>px;<?php endif; ?> <?php if($setting->getProductsGrid_Gutter()): ?>margin-right: <?php echo $setting->getProductsGrid_Gutter() ?>px;<?php endif; ?>"><div class="product-item">

                <!--show label product - label extension is required-->
                <?php Mage::helper('productlabels')->display($_product);?>
                <div class="product-info">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($setting->getProductsGrid_Width(265), $setting->getProductsGrid_Height()); ?>" width="<?php echo $setting->getProductsGrid_Width(265) ?>" <?php if ($alt_img = $setting->getProductsGrid_AltImg()): ?> 
                rel="<?php echo $alt_img ?>" 
                data-alt-src="<?php echo $this->helper('catalog/image')->init($_product, $alt_img)->resize($setting->getProductsGrid_Width(265), $setting->getProductsGrid_Height()); ?>"
                <?php endif ?> alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                    <div class="name-desc">
                        <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                        <div class="desc std">                        
                            <?php 
                                $shortdes =  $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description');
                                if(strlen($shortdes)>50) { //dem ki tu chuoi $str, 10o la chieu dai muon quy dinh
                                    $strCutTitle = substr($shortdes, 0, 50); //cat 100 ki tu dau
                                    $shortdes = substr($strCutTitle, 0, strrpos($strCutTitle, ' '));
                                }
                                echo $shortdes;
                            ?>
                        </div>

                    </div>
                </div>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div></li>
        <?php endforeach ?>
        </ul>
    <?php endif; ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    <?php endif; ?>

    <div class="toolbar-bottom">
        <?php echo $this->getToolbarHtml() ?>
    </div>
</div>
<?php endif; ?>


____________________________________________________
NEW.HTML

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<h2 class="subtitle"><?php echo $this->__('New Products') ?></h2>
<?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_products->getItems() as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(265) ?>" width="265" height="265" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
                <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php echo $this->getPriceHtml($_product, true, '-new') ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?>
                        <?php if ($_compareUrl = $this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?>
                    </ul>
                </div>
            </li>
        <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
        </ul>
        <?php endif ?>
    <?php endforeach; ?>
<?php endif; ?>

enter image description here

Improve this question

2 Answers 2

Reset to default
0

I don't think it's empty space, but rather it seems your price and buttons have moved up because you don't have Product Name in the box. If you try getting the product name above price then empty spaces should go away.

Or if possible add the link of the website if it's live.

UPDATE: Remove min-height style in: <div class="product-item" style="min-height: 426px;">

and also remove min-height from below css class

.products-grid li.item .product-item {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #dcdcdc;
  box-shadow: none;
  min-height: 400px; <= REMOVE THIS LINE
  overflow: hidden;
  padding: 0 10px 24px;
}
Improve this answer
9
  • no kalpesh it,s not name product see up i,m get for you photo with name .
    – AMRCY
    Commented Mar 19, 2015 at 10:37
  • ah i see.. seems like your name-desc div is overlapping with product image. i would check the css to see the issue. it would be difficult to know without the relevant css code or live link.
    – Kalpesh
    Commented Mar 19, 2015 at 17:32
  • it's showing maintenance page :(
    – Kalpesh
    Commented Mar 19, 2015 at 17:58
  • check my answer update
    – Kalpesh
    Commented Mar 19, 2015 at 18:07
  • chek now i,m delet maintenance file
    – AMRCY
    Commented Mar 19, 2015 at 18:14
0

I think you are setting each list item with fixed height or min-height. The image is just find since the resize function adjusted each image on the list. If you want to match each column height avoid using css fixed height and/or min-height as this is discourage in mobile devices.

  1. Try using Jquery same height function
  2. Use platform to organize columns height ex. Bootstrap or UIKit
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.