I am using a custom magento template which has a lightbox on the product page. I can set the max width/height for the lightbox in the config as a percentage of the screen (ie 95%). The problem is it then uses this as the default value so even it is is a really small image it will stretch it out to 95% of the screen and cause the image to pixelate.
I would like it to use this percentage as a maximum only but if the actual image is smaller than this then it would use the actual image dimensions.
I have found a file with this code which I think I may need to edit but I am not sure how to go about this in Magento:
<?php
$maxWidth = $zoomHelper->getCfg('lightbox/max_width');
$maxHeight = $zoomHelper->getCfg('lightbox/max_height');
$cfg = '';
if ($maxWidth)
$cfg .= ", maxWidth:'{$maxWidth}'";
if ($maxHeight)
$cfg .= ", maxHeight:'{$maxHeight}'";
?>
Any ideas?
The way I've done this is to load up relatively large images as the base product image. When the product / view is rendering, build a js object that contains urls for large images, and any thumbnails you need. Your lightbox should then use the js object as a data source.
media.phtml
<script> var images = {};</script>
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(108,90); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php } ?>
<script> images.bigsrc = "<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(800,800); ?>" </script>
<?php } ?>
You then have a js object containing urls for whatever size image you would need. Pass that into lightbox / fancybox etc.
You will definitely have to tailor this to match your needs - mostly in terms of creating a js object that you can use.
Some info on resizing images in mage:
http://www.magthemes.com/magento-blog/customize-magentos-image-resize-functionality/
Related
For example on hover I want to change small image to thumbnail is it possible please don't say to change any code on list.phtml
$j('.foo').hover(function(){
$j(this).attr('src','<?php echo $this->helper(catalog/image)->init($_product, thumbnail) ?>');
});
try that..
<?php Mage::getModel('catalog/product')->load($_product->getId()); ?>
$j('#product-collection-image-<?php echo $_product->getId(); ?>').hover(function(){
$j(this).attr('src','<?php echo Mage::helper(catalog/image)->init($_product, thumbnail) ?>');
});
So there's some code floating around that gets an individual subcategory's image:
foreach ($collection as $cat){
$cur_category = Mage::getModel('catalog/category')->load($cat->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
$_img = $this->getCurrentCategory()->getImageUrl();
}
Where $cat is the subcategory I'm trying to get the image of. The problem I'm running in to - the images for the subcategories are all the same! The first image from the subcategories is the image that shows up on the page. The links and names are all correct though: (this is also in the for loop)
<div>
<a href="<?php echo $helper->getCategoryUrl($cat);?>">
<img src="<?php echo $_img; ?>" title="<?php $cat->getName() ?>"/>
<cite><?php echo $cat->getName();?></cite>
</a>
</div>
I'm making this modification in catalog/category/view.phtml. There's a bit more to it than shown, but this is all the relevant information.
Edit
All categories have their own unique images, which are properly uploaded. They show in the admin correctly. Also, $cat->getId() is returning the correct id's for the individual subcategories.
#RandyHall, are your sure that $this->getCurrentCategory() will get the category from the same place as $layer->setCurrentCategory($cur_category); will set it to?
Watch the source code here and here.
As you can see category is set to the layer model and get returns category from registry(via call to block).
So I would suggest you to do something like this:
$_img = $layer->getCurrentCategory()->getImageUrl();
Perhaps you are doing wrong when getting image url.
instead of using
$_img = $this->getCurrentCategory()->getImageUrl();
try below code
$_img = $cur_category->getImageUrl();
foreach ($collection as $cat){
$cur_category = Mage::getModel('catalog/category')->load($cat->getId());
$_img = $cur_category->getImageUrl();
}
Looks to me like this is what you are going for?
I am trying to replace the default lightbox 'modal' to 'slimbox', because 'modal' doesn't have the navigation arrows.
Demo of slimbox with navigations
Demo of modal without navigations
I am using these paths to modify the calling of slimbox
[templatename]/html/com_virtuemart/productdetails/default.php
components/com_virtuemart/productdetails/default.php
Joomla v2.5
Virtuemart 2.0.6
Slimbox2
The following is my attempt:
//Enable Slimbox2 plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/slimbox/slimbox.css');
$document->addScript($front.'js/slimbox/slimbox2.js');
$js = 'jQuery(document).ready(function($) { $("a.lightbox").slimbox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="lightbox" rel="lightbox"'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
?>
But its still not working I wondered what's wrong?
[Reference][3]
You aren't applying the slimbox class to the image reference, your applying it to the container of the image aren't you? You need to deal with the image file url directly in my opinion.
// get the file_url of the first image
$imgPath = $this->product->images[0]->file_url;
// output the image
<a class="slimbox" href="<?php echo $imgPath; ?>">
<img src="<?php echo $imgPath; ?>" alt="" />
</a>
Hi everybody: i had define a new content type that have:
a title, a link field, and a image field.
So, i want to make that image comes to be the background of the content type when i show it. How can i do that?
Thanks in advance
A very quick way to do this would be to add a custom node.tpl.php to your theme and do this:
<?php
$url = file_create_url($node->field_image[$node->language][0]['uri']);
?>
<div style="background:url(<?php echo $url; ?>) left top no-repeat;" id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
// Rest of node.tpl.php here
I wanted to comment on Clive's answer, but do not have the "rep" :(. Wouldn't it be best with a check for node-type?
<?php
if ($type == 'MACHINE_NAME_FOR_YOUR_TYPE') {
$url = file_create_url($node->field_image[$node->language][0]['uri']);
?>
<div style="background:url(<?php echo $url; ?>) left top no-repeat;" id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php } ?>
// Rest of node.tpl.php here
If you use Field Group module, check Field Group Background Image.
Steps:
Go to the Manage Display page of your content type
Create a div (background image) field group as a wrapper of the node
Select the image field you want to use. Optionally, you can specify an image style
Do not output your image field
That's pretty much what I'm trying to do. All of my simple products are part of, at most, 1 configurable product, so there's no possibility for issues there.
This is necessary because I want my simple products (pillow in design X, color Y) to show in search, catalog but I need the user to know that the design exists in different colors once they click (presumably because they like design X but aren't necessarily sold on color Y). Further, my implementation of Color Swatches (extension) is causing my simple products (that are part of configurables) to behave funnily when accessed directly.
Thanks for any help.
Edit:
Here's the code I ended up using. I'm not a very good coder so make sure to improve it before deploying... (~In app/design/frontend/blah/blah/template/catalog/product/view.media.phtml)
<?php
/* THIS BLOCK ADDED BY __ ON 5/5/2011 */
$thisProductId = $_product['entity_id'];
$thisProductParentId = Mage::getResourceSingleton('catalog/product_type_configurable')->getParentIdsByChild($thisProductId);
if (!$thisProductParentId)
{
?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
}
else if ($thisProductParentId)
{
$_product_temp = Mage::getModel('catalog/product')->load($thisProductParentId);
if($_product_temp->getStatus()==1)
{
$_categories = $_product_temp->getCategoryIds();
$_category = Mage::getModel('catalog/category')->load($_categories[0]);
$url = $this->getUrl($_category->getUrlPath()).$_product_temp->getUrlPath();
echo '<h1><a style="color:red;" href="'.$url.'">Click here to view this pillow design in different colors and styles.</a></h1>';
// redirect disabled because it won't preload the new color on the configurable image page anyway. (haven't attempted)
/* echo '<script type="text/javascript">
<!--
window.location = "'.$url.'"
//-->
</script>'; */
}
}
// -- end --
?>
The overwriting of the More Images gallery bit is a project-specific customization, so keep that in mind.
I went and wrote a bunch of code to try to do this, and forgot that this is already a simple use case, and Magento has it written for you:
Mage::getResourceSingleton('catalog/product_type_configurable')
->getParentIdsByChild($childId);
That snippet should give you all parent products for the child. If there is one, redirect to it. Otherwise, render the page as requested.
you have two options here :
add rewrite rules form catalog > url rewrite management
program an extension that makes the necessary check against product database and makes the redirect