Center resized image in magento,

by 5 replies
8
I use Direct Resize extension in a magento store as my product images have around 15 different sizes, square, portrait and landscape.

The problem I'm facing now can be seen here:


The code showing the products is this:
Code:
<ul class="products-grid spec-grid spec-grid3col grid-actions-absolute">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <div class="title-over-image"><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>
                <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')->directResize(176,176,4); ?>"  alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                </a>
                
                
            </li>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ul>
If I add "text-align:center;" to
Code:
.products-grid .item {
	float:left;
	width:180px;
	position:relative; /* For stickers (e.g. "new" and "sale") positionning */
}
then the small default images will center but not the other ones.

Also, I want to show only the centered 176x176 px from the resized image.

Anyone knows how I can do this?
#programming #center #image #magento #resized
  • Here is the CSS for all classes used:
    Code:
    .products-grid {
	position:relative;
	width:720px; 
}
.spec-grid {
	width:720px; 
	border:none;
	
}
.spec-grid .item {
	width:180px;
	margin:0; 
	border:none;
	
}
.spec-grid3col .item { min-height:180px; }
.spec-grid3col .product-image { width:176px; height:176px; }
    p.s. I tried to edit the first post with two browsers but it goes to a blank page
    • [1] reply
    • I haven't added "overflow:hidden;" to ".spec-grid3col .product-image { width:176px; height:176px; }" as I wanted to show what I want to center, horizontally and vertically, anyone knows how I can do this?
      I'm sure is something quite simple but right now I can't figure this out.:p
  • With this code I'm able to center vertically and horizontally images that are smaller than 176x176. How can I make this work for bigger images?



    Here is the code:

    Code:
    <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <div class="title-over-image"><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>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><div class="floater"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->directResize(176,176,4); ?>"  alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                </div>
                
                	<?php // Code displaying product labels "new" and "sale". It's a copy of 'catalog/product/view/media_labels.phtml'
						require('view/media_labels.inc.phtml'); ?>
                
                </a>
                
            </li>
    and CSS:
    Code:
    .spec-grid3col .item { height:180px; width:180px; position:relative;}
.spec-grid3col .product-image { width:176px; height:176px; display:table;  }
.spec-grid3col .floater {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  }
    • [1] reply
    • I am using image lightboxes in Magento Development platform. Easylightbox help to improve appearance and functionality of Magento Websites. Also, it certainly beats the default zoom slider function in Magento. Displays the images of your products as a lightbox.
      • [1] reply
Join the discussion

Next Topics on Trending Feed