0

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?

3
  • Try merging both files
    – Dexter
    Mar 29 '14 at 7:35
  • Tried but $this->showInstagramImages() couldn't fetch the value while I'm adding it to moo_cloudzoom's media.phtml
    – Poles
    Mar 29 '14 at 8:27
  • in case if you tried any paid plugin of instagram extension magecomp.com/magento-instagram-connect.html Feb 29 '20 at 12:11
1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.