Magento – Instagram images not appearing in product page in magento

magento-1.7product

In my project I have a requirement where I used two magento plugins for product page.

1.Moo_CloudZoom
2.Instagram Extension

Moo cloudzoom is working perfectly. After I installed Instagram connect extension which will show the tagged instagram images in product page. But the Instagram images is not appearing on product page. Then I found that both plugin are using media.phtml in their own folder. Only the cloudzoom plugin's media.phtml properties are reflected on frontend, not the instagram's media.phtml. Here is the code:

moo cloudzoom's media.phtml

<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<?php
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {

    $gallery = '<div class="small-thumbnail">';

    foreach ($galleryImages as $_image) {

        $gallery .= '<div class="thumbnail">'

                . '<a id="cloud-zoom-gallery' . $i . '" href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '

                . 'rel="useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '">'

                . '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'

                . '</a></div>';

    }

    $gallery .= '</div>';

}

?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<div class="large-thumbnail">
  <p class="product-image product-image-zoom"> <a rel="<?php echo $this->renderCloudOptions(); ?>" <?php echo $this->renderLightboxOptions(); ?> gallery="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" class="cloud-zoom" id="cloudZoom">
    <?php

            $_img = '<img id="image" src="' . $this->getCloudImage($_product) . '" alt="' . $this->htmlEscape($this->getImageLabel()) . '" title="' . $this->htmlEscape($this->getImageLabel()) . '" />';

            echo $_helper->productAttribute($_product, $_img, 'image');

            ?>
    </a> </p>
  <?php if (isset($gallery)): ?>
  <?php echo $gallery; ?>
  <?php endif; ?>
</div>
<?php endif; ?>

Instagram connect's media.phtml

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <?php
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<?php else: ?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0 || $this->showInstagramImages()): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><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()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    <?php if ($this->showInstagramImages()) : ?>
    <?php foreach ($this->getInstagramGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getInstagramGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getCaptionText()) ?>"><img src="<?php echo $_image->getStandardResolutionUrl(); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getCaptionText()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    <?php endif; ?>
    </ul>
</div>
<?php endif; ?>

How to show instagram images on product page?

Best Answer

That's a pretty big question — you might try contacting the creator of each plugin for advice on how to get this to work. If these are paid extensions getting some sort of guidance from the support team is reasonable. If these are not paid extension, then approaching the developers from a "hey, I know this isn't your problem, but I love your extension, do you have any advice how to get this working?" sometimes helps. Paid or free, being clear, friendly and respectful when requesting support always helps.

If I was debugging this for a client I'd start by, (as the comments mentioned), merging the two media.phtml files. Next, I'd run both extensions by themselves to make sure everything is working. Then I'd check if either rewrite or replaces the block associated with media.phtml (var_dump(get_class($this)); from the template), and I'd make sure that both extensions are actually replacing media.phtml and haven't just used the same name in a different folder location.

You also mentioned showInstagramImages "couldn't fetch the value". You didn't indicate is this threw a PHP error (indicative of a block replacement) or if this just didn't work. If it didn't work investigating the definition of showInstagramImages to determine why it didn't work would be useful.

Good luck, and come back with a new question when you've done a bit of legwork on the issue!

Related Topic