8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Center resized image in magento,

by XtremXpert
5 replies
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?
#center #image #magento #resized
  • Profile picture of the author XtremXpert
    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
    Signature
    Optimizare SEO
    {{ DiscussionBoard.errors[6434463].message }}
    • Profile picture of the author XtremXpert
      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
      Signature
      Optimizare SEO
      {{ DiscussionBoard.errors[6449501].message }}
  • Profile picture of the author XtremXpert
    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;
  }
    Signature
    Optimizare SEO
    {{ DiscussionBoard.errors[6468483].message }}
    • Profile picture of the author jordenstive
      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.
      Signature

      Industrial Cooling Tower Manufacturer
      TowertechIndia

      {{ DiscussionBoard.errors[6491522].message }}
      • Profile picture of the author XtremXpert
        Originally Posted by jordenstive View Post

        .................
        OFF: Have you at least read the title of this thread or are you just trying to get some more posts advertising your signature links?

        ON: Someone suggested this free extension AdaptiveResize and it is working great so far.
        Signature
        Optimizare SEO
        {{ DiscussionBoard.errors[6506044].message }}

Trending Topics