Magento Flickr Gallery extension

November 5th, 2013 by in Backend, Development, Frontend, Magento 11
Magento Flickr Gallery extension

Srka Flick Gallery is a feature rich and easy-to-use Magento extension that will let you integrate any Flickr gallery into your Magento website. It is fully customizable through a simple Magento admin configuration page and it uses its own system to cache Flickr API requests making it blazingly fast. Extension is tested on Magento CE 1.8 but it should work fine in other versions. It’s completely free and open-source.

 

Following the success of Inchoo Flickr Gallery that I published while I was working at Inchoo and the fact that it is still the only fully featured Magento Flickr gallery extension out there, I decided to make it even better. Instead of just tweaking the old version I decided to make it as good as possible so I started from scratch. Don’t worry though, it looks and works just like you expect only better, plus it’s much easier to modify and play around with for both frontend and backend developers.

Features

  • Automatically gets all the photosets from the specified user and makes them available in Magento admin
  • Allows you to choose which photosets you want to display on the site
  • Configurable pagination
  • Configurable thumbnail size
  • Configurable tooltips with different skin styles to choose from
  • Integrated Lightbox that can be disabled if you want to use your own
  • Fully customizable carousel block that can be added to any page
  • Fully customizable Flickr API response caching for increased performance
  • Using AJAX to eliminate the page loading delay caused by Flickr API requests
  • Extension does not use jQuery
  • NEW! Add individual photosets on any page with layout updates (most requested feature)

How to install?

Download Srka Flickr Gallery extension files to your Magento root directory. You can find it on github at https://github.com/srka/Srka-Magento-Flickr-Gallery. Extension files will be extracted into the base package / default template so if you have your own package just copy the extension files to your package / template directories.

 

If you are logged in to your Magento admin you have to logout and then log in again. Clearing the cache would also be a good idea.

 

Note: php config option allow_url_fopen sould be turned on in order for this extension to work properly. If you got a “String could not be parsed as XML…” error while trying to use this extension allow_url_fopen is probably causing it.

Configuration

Srka Flickr Gallery extension is made to be fully and easily configurable from Magento admin. Just go to System -> Configuration -> Srka -> Flickr Gallery to find all the available configuration options.

 

To get started you’ll need to have a Flickr API Key and User ID. Go to http://www.flickr.com/services/api/misc.api_keys.html to get your own Flickr API Key and http://idgettr.com/ for your User ID. Once you enter your API Key and User ID save your configuration and you will get the list of all the available photosets for the user specified with the User ID. You can select all of them or just the ones you want to show on the site and save your configuration. That should be enough to get the gallery up and running.

 

All other configuration options are pretty straightforward with useful descriptions so there is no need to explain them here.

How to access the gallery on frontend?

By default, Srka Flickr Gallery extension adds a link to the footer but you can open the gallery directly at www.yoursite.com/gallery

How to add a photosets carousel to any page?

To add a carousel of all the photosets you just need to add one line of code to your layout updates.

<block type="flickrgallery/photosets" name="flickrgalleycarousel" template="flickrgallery/carousel.phtml"/>

Add it inside any reference in any handle and it will just work. You can customize it from admin configuration page. Just go to System -> Configuration -> Srka -> Flickr Gallery -> Carousel

NEW! How to add a photoset to any page?

The most requested feature is finally here! You can now add a photoset to any page using layout updates. It’s really simple, let me show you.

 

First of all you need to add some JavaScript and CSS files to the page. You do that like you would for any other JS or CSS file.

<reference name="head">
    <action method="addCss"><stylesheet>flickrgallery/css/styles.css</stylesheet></action>
    <action method="addItem"><type>skin_js</type><name>flickrgallery/js/script.js</name></action>
    <action method="addItem"><type>skin_js</type><name>flickrgallery/lightbox/js/lightbox.js</name></action>
    <action method="addCss"><stylesheet>flickrgallery/lightbox/css/lightbox.css</stylesheet></action>
</reference>

If you don’t want to use the lightbox feature or you are using your own you can remove the the lightbox.js and lightbox.css files from the code above.

 

Now that that’s done you can add a photoset (or any number of them) to the page. Add the code below inside any reference tag in any handle of your layout:

<block type="flickrgallery/photoset" name="photoset_custom" as="photosetCustom" template="flickrgallery/photoset.phtml">
    <action method="setPhotosetId"><photoset_id>[YOUR_PHOTOSET_ID]</photoset_id></action>
</block>

You can configure it to better fit your layout. Right now only the number if items per page and the thumbnail size are configurable but I will add more options if the future so stay tuned. All other options would be pulled from main extension configuration page mentioned above. Add the code below inside the “photoset_custom” block to set configuration options:

<action method="setPerPage"><per_page>[NUMBER_OF_ITEMS_PER_PAGE]</per_page></action>
<action method="setThumbSizePrefix"><thumb_size_prefix>[THUMBNAIL_SIZE_SYMBOL]</thumb_size_prefix></action>

Note that the [THUMBNAIL_SIZE_SYMBOL] uses the same symbol format you can find on the Srka Flick Gallery admin configuration page. It uses Flickr API suffixes that you can find here.

Screenshots

 

That’s it. If you have any questions use the comment section below. Sharing this article will help other people find this useful extension so don’t be selfish :)

Written by Srdjan Stojiljkovic

Srdjan is a Frontend Developer with a passion for pixel perfect design and great user interfaces. He also designed and developed this site and is dedicated to provide best and most useful articles about development in general.


See all articles from this author »

Comment (11)

Posted on December 20, 2013 by Paul

Hi I have installed your flickr gallery extension but I cannot display the image description only its title? Please can you advise on how to add the image description?

Posted on December 20, 2013 by Srdjan Stojiljkovic

Hi Paul and thank you for using our extension.

 

I added the functionality to display the description in the lightbox below the title. Please get the latest code from GitHub https://github.com/srka/Srka-Magento-Flickr-Gallery

Posted on January 30, 2014 by adi

Hi, I installed your extension, but now working. when i try www.mydomain.com/gallery i encountered : "Fatal error: Call to a member function getChildHtml() on a non-object in /home/khar9/public_html/domains/edsadadaex.ro/app/code/community/Srka/Flickrgallery/controllers/IndexController.php on line 15" I use magento 1.7.0.2. /PHP 5.3 any advice ? Thanks in advance. Best regards from Romania. Adrian.

Posted on January 31, 2014 by Srdjan Stojiljkovic

Hi Adrian,

Please check the layout xml file (flickrgallery.xml) for the "photosets" block (should be around line 39) under "content" reference in "flickrgallery_photosets" handler. If it's not there or if the name is changed you will have to change it back to "photosets".

Posted on November 13, 2014 by Duc

Hi, I just saw it in mypage.com/gallery How to add this onto the footer page of my Magento: mypage.com ? footer pageis: footer.phtml Thanks so much!

Posted on November 13, 2014 by Srdjan Stojiljkovic

@Duc: What exactly do you want to put in the footer.phtml

Posted on December 19, 2014 by Kenny Kang

Do your extension support Magento 1.9 ?? I do see the photoset in backend using my flickr userid . But there are nothing in frontend .

Posted on December 19, 2014 by Srdjan Stojiljkovic

@Kenny Kang: I haven't tested it on 1.9 yet. I'll do it as soon as I can.

Posted on January 7, 2015 by Mary Johnson

Hi nice way to explain about Magento flicker Module in your blog. Can you please tell me that, Is this Extension supported multi store option at a photo Gallery level?

Posted on January 15, 2015 by Simon Walker

Thanks for sharing code here. I have tested this and it works great. Here I would like to share one of my plugin that I have develop to let store managers create photo galleries and attach them to products. Let me know how do you rate this one? http://www.fmeextensions.com/photo-gallery.html

Posted on January 26, 2015 by Daniel

Hi Srdjan - thanx for the nice extension. Just one small thing. When displaying the photoset and you have to go to the second page, the number of photos is not shown correctly, i.e. Items 31 to 60 of 47. Have a look at this link: http://www.zamsato.com/gallery/set/id/72157649843704377/page/2 Thanx Daniel

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>