Involver Developer Network : flickr

Provides the ability to display images from a Flickr photoset. This tag was formerly named flickr_feed but has been renamed to simply flickr. flickr_feed will still work but is deprecated. All the properties remain unchanged.

By default this feature outputs a basic image carousel but its display can be easily customized to create a wide range of user experiences. The one hard limitation is the number of images this feature can show: your options from the back-end are 8, 16, 32, or 64 images. Flickr galleries with more then 64 images are not supported and will not function, only the most recent 64 will show.

Configuration

Configuration of the Flickr SML feature is very straightforward. The only required field is the Flickr account user name. You may optionally choose the number of images to import, use a photoset id, and also set the click-through url for the photo. When using the click-through url option, the system will look for the first URL in the description of the photo hosted on Flickr to use for the click-through URL.

Attributes

name	type	required	description
name	string	no	This is a name to identify the specific feature instance that you are using in your template code. This is useful if you have multiple instances of the same feature on the same page. Note: By default, the SML will look for a nick name of "default" if you do not specify one in the tag definition.
background	string	no	This is used to set the background image of the carousel. Possible values are: "transparent" or a url of a valid image. Defaults to the background image seen below.

Context Variables

FBML-Only Attributes (deprecated)

name	type	description
max_photos_to_show	string	limits number of photos to output
alternate_url_text	string	Allows you to override default url text
width	integer	This is the width (in pixels) of the image carousel. Defaults to 520.
height	integer	This is the height (in pixels) of the image carousel. Defaults to 320.
base_size	float	This is the maximum dimension (width or height) of the centered image. Other images in the carousel will use this as the starting size. Defaults to 170.0.
radius	integer	This is used to calculate the carousel radius. Defaults to 180.

Examples

Default Layout Example

Specifying just the tag will render the flickr image carousel using the default dimensions of 520x320. with the focused image sized to 170 pixels.

{% flickr %}{% endflickr %}

Customized Size Example

You can customize that width and height of the default layout and of the focussed image using attributes.

{% flickr width:320 height:200 base_size:100.0 radius:120 %}{% endflickr %}

For more advanced formatting, you can customize the display of items from the Flickr feed by iterating them through a for loop. In the following example we will use the for loop and an unordered list to generate a series of list items. Each item will have a thumbnail of an image from the feed resized to square and 128px, the title of the item, and a truncated description of the item.

{% flickr name:"Your_feed_name" %}
    <ul>
        {% for entry in flickr.images %}
            {% capture entry_title %}{{ entry.title }}{% endcapture %}
            {% capture entry_description %}{{ entry.summary_text_body | truncate:80 }}{% endcapture %}
            {% capture entry_url %}{{ entry.default_image.cached_url | flickr_link_fixer }}{% endcapture %}

            <li>
                <span id="{{ entry.id }}" dialogtitle="{{ entry.title }}">{{ entry.default_image.cached_url | resize_to:'square' | resize_to:'128' | img_tag:entry_title }}</span>

                <h3>{{ entry.title }}</h3>
                <div>{{ entry.summary_text_body | truncate:140 }}</div>
            </li>
        {% endfor %}
    </ul>
{% endflickr %}

We could make it a bit more social by adding a facebook_like button so Facebook fans can "like" their favorite images, and a share button so users can share their favorites with their friends. Keep in mind the 64-image limit of the Flickr Feature - this is not an appropriate way to set up contests!

{% flickr name:"Your_feed_name" %}
    <ul>
        {% for entry in flickr.images %}
            {% capture entry_title %}{{ entry.title }}{% endcapture %}
            {% capture entry_description %}{{ entry.summary_text_body | truncate:80 }}{% endcapture %}
            {% capture entry_url %}{{ entry.default_image.cached_url | flickr_link_fixer }}{% endcapture %}

            <li>
                <span id="{{ entry.id }}" dialogtitle="{{ entry.title }}">{{ entry.default_image.cached_url  | resize_to:'square'  | resize_to:'128'  | img_tag:entry_title }}</span>

                <h3>{{ entry.title }}</h3>
                <div>{{ entry.summary_text_body | truncate:140 }}</div>

                <p>
                {% facebook_like entry %}
                {% share entry label:"Share on Facebook" name:entry_title description:entry_description image:entry_url href:application_url %}
                </p>
            </li>
        {% endfor %}
    </ul>
{% endflickr %}

For photo contests with large numbers of entries you might want to add [IDN:pagination] and sorting as well. And while you're at it, why not use editable_images to replace the default forward and back arrows and add some custom style to your gallery?

Also: notice the extensive use of capture to embed outputs into other tags and create a more dynamic user experience. The goal is to make the code as generic as possible so you can easily re-use it for future projects and so if the client changes verbiage you don't have to re-write your code.

{% partial name: "entries_sort" %}
    {% flickr name:"Your_contest_name" %}
	{% capture fwd_arrow %}{% editable_image name:"fwd_arrow" %}{% endcapture %}
	{% capture back_arrow %}{% editable_image name:"back_arrow" %}{% endcapture %}

        {% paginate flickr.images per_page:5 order:"created_at asc" next_label:fwd_arrow previous_label:back_arrow %}
            {{ pagination_links }}

            <ul>
                {% for entry in images %}
                    {% capture entry_title %}{{ entry.title }}{% endcapture %}
                    {% capture entry_description %}{{ entry.summary_text_body | truncate:80 }}{% endcapture %}
                    {% capture entry_url %}{{ entry.default_image.cached_url | flickr_link_fixer }}{% endcapture %}

                    <li>
                        <span id="{{ entry.id }}" dialogtitle="{{ entry.title }}">{{entry.default_image.cached_url  | resize_to:'square' | resize_to:'128' | img_tag:entry_title }}</span>

                        <h3>{{ entry.title }}</h3>
                        <div>{{ entry.summary_text_body | truncate:140 }}</div>

                        <p>
                        {% facebook_like entry %}
                        {% share entry label:"Share on Facebook" name:entry_title description:entry_description image:entry_url href:application_url %}
                        </p>
                    </li>
                {% endfor %}
            </ul>

            {{ pagination_links }}
        {% endpaginate %}
    {% endflickr %}
{% endpartial %}

Finally, you'll probably want to show the full size image and un-truncated description somewhere. Why not use a JQuery Dialog box? JQuery is now fully supported in SML thanks to the switch to iFrames and adds significant functionality. By dynamically appending the unique item id from each entry to the popbox div's id we can create an iterated list of unique popbox links so each image will display its own unique popup with the larger image, title, and description.

{% partial name: "entries_sort" %}
    {% flickr name:"Your_contest_name" %}
        {% capture fwd_arrow %}{% editable_image name:"fwd_arrow" %}{% endcapture %}
        {% capture back_arrow %}{% editable_image name:"back_arrow" %}{% endcapture %}

        {% paginate flickr.images per_page:5 order:"created_at asc" next_label:fwd_arrow previous_label:back_arrow %}
            {{ pagination_links }}

            <ul>
                {% for entry in images %}
                    {% capture entry_title %}{{ entry.title }}{% endcapture %}
                    {% capture entry_description %}{{ entry.summary_text_body | truncate:80 }}{% endcapture %}
                    {% capture entry_url %}{{ entry.default_image.cached_url | flickr_link_fixer }}{% endcapture %}

                    <li>
                        <span class="poplink" id="{{ entry.id }}" dialogtitle="{{ entry.title }}">{{entry.default_image.cached_url | resize_to:'square' | resize_to:'128' | img_tag:entry_title }}</span>

                        <h3>{{ entry.title }}</h3>
                        <div>{{ entry.summary_text_body | truncate:140 }} <a href="#_" dialogtitle="{{ entry.title }}">Read More...</a></div>

                        <p>
                        {% facebook_like entry %}
                        {% share entry label:"Share on Facebook" name:entry_title description:entry_description image:entry_url href:application_url %}
                        </p>

                        <div id="popbox{{entry.id}}" style="display: none;">
                            {{ entry.default_image.cached_url | resize_to:'480' | img_tag:entry_title }}

                            <h3>{{ entry.title }}</h3>
                            {{ entry.summary_text_body }}
                        </div><!-- end popbox -->
                    </li>
                {% endfor %}
            </ul>

            {{ pagination_links }}
        {% endpaginate %}
    {% endflickr %}
{% endpartial %}

{% render partial:"entries_sort" sortby:"RANDOM" %}
    <script type="text/javascript">
    $(document).ready(function() {
	// dialog popup for lightbox style on images
	$(".poplink").click(function() {
  		var coords = $(this).offset();
		var dialog_title = $(this).attr("dialogtitle");
		var dialog_body = $("#popbox" + $(this).attr("id")).html();
		var dialog = new sml.ui.PlatformDialog({
			title: dialog_title,
    		body: dialog_body,
    		width: 485,
    		position: ['center', coords.top],
    		buttons: [{
      			text: 'Close',
      			handler: function() {}
    			}]
		});
		dialog.show();
	});
    });
    </script>

Overview