Installing Highslide for Magento

This post will guide you through how to easily install the very popular Highslide Image Magnifier in your Magento store.

First, grab the latest version of Highslide from . This implementation has been done on version 4.1.13, but all versions should work fine.

Next, you need to upload all files in the ‘highslide’-folder inside the ZIP archive over to your Magento folder, but do it in the following way:

  • Copy the highslide.css- and highslide-ie6.css files to your skin/frontend/polar//css/ folder
  • Copy the graphics-folder with all its content to your skin/frontend/polar//css/ folder (so that there gets a folder called ‘graphics’ inside the CSS folder)
  • Copy the highslide-full.js file to your skin/frontend/polar//js/ folder (you can use the highslide-full.min.js as an alternative if you like to keep things as lightweighted as possible)

Now when all files are in place you need to do some minor customization on your Magento theme files.

First we need to make sure the new JS- and CSS-files we have uploaded are being loaded in Magento. Since we will only be using the Highslide on the product page we only need to load them when someone access the product page (you might want to load them on all pages if you want to run a JS- and CSS merge, and if you plan on using Highslide on other parts of the site than the product page).

So, open up your app/design/frontend/polar//layout/local.xml file, and add the following XML section somewhere inside the section:

 <catalog_product_view>
      <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/highslide/highslide-full.js</name></action>
        <action method="addCss"><stylesheet>css/highslide.css</stylesheet></action>
      </reference>
  </catalog_product_view>

Finally we need to mess up the media.phtml template a little bit, which is the template file controlling the product images part of the product page. This file is normally not included in the theme, and so it needs to be copied from the base/default-folder. In other words, copy the app/design/frontend/base/default/template/catalog/product/view/media.phtml file over to your app/design/frontend/polar//template/catalog/product/view/ folder.

Open it up in your favourite editor and add the following content on the top of it:

<script type="text/javascript">
        hs.graphicsDir = '<?php echo $this->getSkinUrl('js/highslide/graphics/'); ?>';
        hs.align = 'center';
        hs.transitions = ['expand', 'crossfade'];
        hs.wrapperClassName = 'dark borderless floating-caption';
        hs.fadeInOut = true;
        hs.dimmingOpacity = .75;
        hs.cacheAjax = false;

        // Add the controlbar
        if (hs.addSlideshow) hs.addSlideshow({
                //slideshowGroup: 'group1',
                interval: 5000,
                repeat: false,
                useControls: true,
                fixedControls: 'fit',
                overlayOptions: {
                        opacity: .6,
                        position: 'bottom center',
                        hideOnMouseOut: true
                }
        });
</script>

Next, find the div called “product-image” and replace it with the following:

<div class="highslide-gallery product-image">
    <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" class="highslide" onclick="return hs.expand(this)">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(590) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"
            title="Click to enlarge" />
    </a>
</div>
</div>

Now the main product page should have a Highslide popup, but we want to do the same thing with the gallery as some products might have several product images.

Look up the class called “more-views” and replace it with the following:

<div class="more-views">
    <div class="highslide-gallery">
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
        <div class="highslide-caption">
            <?php echo $this->htmlEscape($_image->getLabel()) ?>
        </div>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" class="highslide" onclick="return hs.expand(this)">
            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(350,280); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()$
       </li>
    <?php endforeach; ?>
    </ul>
    </div>
</div>

Thats it! You now have a perfect image magnifier for your store!

Sneak preview of our new Slight fully responsive Magento theme

We’re at the final stage of finishing our brand new Slight theme for Magento.

The Slight theme is a fully responsive, great-looking theme perfect for any type of store with a decent number of categories, and who needs a strong and clear focus on its product portofolio.

Responsive Magento theme Slight

A few of the main features of our Slight theme:

  • Fully responsive – all the way down to mobile
  • Professional and clean design, focusing on conversions more than anything
  • Fully customizable down to the smallest bit

We hope to be able to release the Slight theme for Magento within a week.

Countdown!

After months of hard work fine-tuning our Magento theme framework (as we call it), discussing what functionality to include in the themes, what Magento modules to “officially” support with our themes and lots of other behind-the-scenes stuff – we now feel confident to have the official release date for Polarthemes.com set to August 15th (2012..).

Polarthemes in its early stages

Polarthemes will in its baby life (the next 6-12 months) consist of a few rock-solid Magento themes that all shall be extremely customizable to easily have them fit your- or your client’s needs.

We will also listen extremely well to all our customers in the early stages in particular, to make any adjustment you as our super valuable customer think is worthwile (we _will_ review the adjustment suggestion before evnetually implementing it). That said we are so confident about the work we do that we think we can be your resource to professional services and advise related to Magento design, rather than just a one-time supplier.

Responsive Magento themes

All our themes will have responsiveness built-in from the ground up, however some of the themes will by purpose be “fixed width” themes due to their nature.

“Rock solid features only, thank you”

We also know perfectly well that responsiveness and all the shebang coming up faster than we learn to spell it are just alternatives of other ways of solving things, and so we want you to be sure the stuff we implement into our Magento themes are well planned, rock solid and important features – and not just some new random exciting features.

Who is Polarthemes primarily for?

Our Magento themes will primarily be themes for Magento consultancy companies delivering Magento to its own customer base, giving you a head start with your Magento delivery to your clients – however all themes will also be ready for usage immediately for any Magento store owner to use – by just uploading the theme, activating it and start selling!

Got any questions to Polarthemes? Feel free to drop us an email at feedback@polarthemes.com

Welcome to Polarthemes!

Polarthemes will be the #1 Magento theme provider by the end of 2012. We will publish our first 10 Magento themes one by one during this year. In 2013 we will also start pushing out our premium WordPress themes, specialized around magazine themes and company site themes.

Theme features includes:

  • All Magento themes will be fully responsive all the way down to mobile phone screens
  • All themes will support all modern browsers, down to Internet Explorer 7
  • All themes will be compatible with all newer versions of Magento, and always two Magento releases backwards
  • All themes will also be updated to support all new versions of Magento before they are relased in stable versions
  • All Magneto themes will use modern web techniques like HTML5 and CSS3 to give the best ecommerce experience for your customers
  • And last but not least, all themes will be extremely easily customizable so that you can make them fit to your clients’ needs

Got any questions? Ping us at post@polarthemes.com and we’ll get in touch shortly.