today I'm fighting with Magento again :)
how to display configurable image in wishlist sidebar
I use the code
<?php $_product = Mage::getModel('catalog/product'); ?>
<?php $_product->load($_product->getIdBySku($_item['sku'])); ?>
<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(70, 87); ?>" />
but is not working.
Thanks in advance.
Try the following
<?php
if($_product->getTypeId()=='simple'){
$parentIds = Mage::getResourceSingleton('catalog/product_type_configurable')
->getParentIdsByChild($_product->getId());
$parentProduct = Mage::getModel('catalog/product')->load($parentIds[0]);
?>
<img src="<?php echo Mage::helper('catalog/image')->init($parentProduct, 'small_image')->resize(70, 87); ?>" />
<?php }else{ ?>
<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(70, 87); ?>" />
<?php } ?>
Related
I want to change the layout of a grid of videos on a site. It's Wordpress.
Currently the PHP displays the grid in a 3/2 layout over two rows and then duplicates it depending on how many videos you choose to display.
I understand the code enough to know that we are setting 5, and splitting into 3/2. And i can set it to 6 and split into 3/3 or 4/2.....and so on
But I need to change the layout so we have a row of 3, then 3 but with the first two of the second row stacked on top of each other 1/3rd width and the third 2/3rd width. like below.
new layout to be acheived
Current PHP that does the layout: ( I understand that CSS might have to be changed but I can do that)
<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">
Full block:
<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">
<a href="<?php echo get_page_link($page->ID); ?>">
<?php if ( $detect->isMobile() ) {
if (has_post_thumbnail( $page->ID ) ){ ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>" width="160" height="90">
<?php } ?>
<?php } else { ?>
<?php if(get_field('looping_thumb_preview', $page->ID)){ ?>
<video playinline preload="auto" loop="yes">
<source src="<?php echo get_field('looping_thumb_preview', $page->ID); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<?php } else if(get_field('looping_thumb', $page->ID)){ ?>
<video playinline preload="auto" loop="yes">
<source src="<?php echo get_field('looping_thumb', $page->ID); ?>" type="video/mp4">Your browser does not support the video tag.</video>
<?php } else if (has_post_thumbnail( $page->ID ) ){ ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>">
<?php } else { ?>
<img src="<?php bloginfo( 'template_url' ); ?>/images/blank.png" alt="<?php echo $title; ?>">
<?php } ?>
<?php } ?>
<div class="center-content">
<h1<?php if(get_field('subtitle', $page->ID)){ echo ' class="hassubtitle"';} else { echo ' class="nosubtitle"'; }?>><?php echo $title;?></h1>
<div class="underline"></div>
<?php if(get_field('subtitle', $page->ID)) { echo "<h2>" . get_field('subtitle', $page->ID) . "</h2>"; }
?>
</div>
</a>
</article>
Thanks in advance for any help
I'm doing some changes on an online store that is running OpenCart 2.2.
When browsing below the categories on the left side, there are 2 carousels that show different promotions. I want to modify it that before the second carousel there is a description text. To do that I should edit the template file. And here is where I get lost..
This is the code in the template file:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
From I see in the browser inspector and in my case, this code generates 2 banners with the ids - "banner0" and "banner1". The description text should go at the top of the code (right before ). If I use a simple paragraph, it gets displayed twice - above each banner.. How should I change it so that it will display the paragraph only above the second banner (id - banner1)?
I was thinking about an if-else statement, but I'm not sure if that will work... Could anyone help out a bit? My knowledge in PHP isn't much... :S
Thanks in advance!
Best regards,
Tsvetko Krastev
Then you need to know that this is the second time round the foreach loop. So change the foreach to include the index like this, and add a test inside the loop for $i == 1
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php //foreach ($banners as $banner) {
foreach ($banners as $i => $banner) {
?>
<div class="item">
<?php if ($banner['link']) {
if ( $i == 1 ) {
echo 'YOUR HTML CONTAINING SOME TEXT HERE';
}
?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
If I get the code right, $module is 0/1 (if id's get values banner0 and banner1), then this should work:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<?php if ($module == "1") { ?>
<p>Your description</p>
<?php } ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
Thank you so very much guys!!! Tried both versions and they throw a error, but looking more carefully into the code and both your solutions, I came up with this:
<div id="desc<?php echo $module; ?>">
<?php if ($module == 1) { ?>
<p>Description</p>
<?php } ?>
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Thank you very much again for the quick responses and the help! :) :3
Best regards,
Tsvetko Krastev
I am trying to figure out how to change the photo without the page refreshing. I have seen some of the example but just cannot figure out how to implement it in to my working page.
This is what I have right now:
<div id="propertyDetailsImage">
<img class="image photo" src="<?php echo $property->photos->photo[$mainPhoto - 1]->url; ?>" width="<?php echo $property->mainPhotoWidth * 0.77 ?>" height="<?php echo $property->mainPhotoHeight * 0.77 ?>" alt="<?php echo $property->address->full; ?>"/>
</div>
<div class="photoPosition">
<?php
$previousPhoto = $mainPhoto - 1;
if($previousPhoto == 0) {
$previousPhoto = $property->totalPhotos;
}
$nextPhoto = $mainPhoto + 1;
if ($nextPhoto > $property->totalPhotos) {
$nextPhoto = intval(1);
}
?>
<img src="images/previous.png" alt="Previous photo" height="12" width="13" border="none"/>
<span id="photoPosition"><?php echo $mainPhoto; ?></span> of <?php echo $property>totalPhotos; ?>
<img src="images/next.png" alt="Next photo" height="12" width="13" border="none" />
</div>
</div>
<div class="col-md-6">
<div id="thumbnails">
<h3 class="additional">Photos</h3>
<?php
// Iterate throught the list of photos
foreach($property->photos->photo as $photo) {
?>
<script type="text/javascript">
addPhoto(
<?php echo $photo->id; ?>,
<?php echo $photo->width; ?>,
<?php echo $photo->height; ?>,
"<?php echo $photo->caption; ?>");
</script>
<img src="<?php echo $photo->url; ?>" width="<?php echo $photo->widthSmall; ?>" height="<?php echo $photo->heightSmall; ?>" class="image photo" id="photo<?php echo $photo->position; ?>" alt="Additional Photo of <?php echo $photo->address->advertising; ?>" onclick="return showPhoto(<?php echo $photo->position; ?>)" />
<?php }
?>
Any help is appreciated. Cheers
Dima
You should use ajax to get like this results.
you should go here,
The image slider shown in this demo is for free.
For detailed instructions, please visit online
http://www.menucool.com/slider/javascript-image-slider-demo1
I wanto to show all main categories on home page with image . i write the following code for tat but it is not show image .
<?php
$_helper = Mage::helper('catalog/category');
$_categories = $_helper->getStoreCategories();
foreach ($_categories as $_category):
$_categoryThumb = $_category->getThumbnail();
echo $_category->getImageUrl();
?>
<li>
<h2> <a href="<?php echo $_helper->getCategoryUrl($_category) ; ?>">
<img src="<?php echo $this->getUrl() . 'media/catalog/category/' . $_categoryThumb; ?>" alt="<?php echo $_category->getName()?>"/>
</a>
</li>
<?php endforeach; ?>
try this
give the path for src in the img tag as src="<?php echo '/media/catalog/category/'.$_categoryThumb; ?>"
I have a probelm with a magento project that I am currently building. My product page has a main image (configurable product) and thumbnails below. I have got my code to the stage where clicking a thumbnail appends the image to the main image area, however i require the href for the link it is contained it to also append to that imgs url. Hope this makes sense, any help welcome.
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="grid_12 grid_spacer_bottom">
<?php
$_img = '<img id="image" class="img-left img-inlineblock responsive-img" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" />';
//echo $_helper->productAttribute($_product, $_img, 'image');
?>
<?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
</div>
<div class="clear"></div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<div class="grid_4 grid_spacer_bottom">
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
<img class="img-left img-inlineblock responsive-img" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
I'm assuming that you are try to make when you click on the large image it will have the url of the thumbnail
Give this href an ID
<?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
Are you using jquery or prototype (if default magento then this)
Prototype
$('img_href').setAttribute('href', this.href);
//$('img_href').href = this.href; // or
jQuery
$("#img_href").attr("href", this.href);
Plain Javascript
document.getElementById('img_href').href = this.href;
Update the thumbnail onclick
onclick="$('image').src = this.href; $('img_href').setAttribute('href', this.href); return false;"
$('image').parentNode.href='your url'; ?