As I slowly plug away designing the
art exchange forum i am helping develop I am coming across some interesting scripts to work inside simple machines forum and specifically tinyportal php pages.
Here is a snapshot preview, there is a live demo link below.
This script uses simplepie rss and is built on this
original script for use in a normal webpage. All I’m doing here is taking that script and showing how it can be used in a tinyportal php page inside the simple machine forum software with some tweaks to its function and my own design/layout.
This script is quite easy to use, and it’s application can be diverse. The main usage may be to have member flickr galleries as pages on your forum, allowing your members to display their work outside of your site in a nice page locally. Flickr rss spits the latest 20 images, and your page will update as their rss updates obviously. In using simplepie you will have a caching option so that update rate will be determined by your cache duration. You may also blend multiple rss feeds into a mass mixed stream.
Here is the demo of my own photostream piping into my design I built to suit the forum:
View Demo
The features:
The highslide preview (click the thumbnail in the demo) contains the text only from the description under the image and a link to go to the flickr page. Below the thumbnail is the date posted and the ability to view the flickr post in a popup.
If that style (using highslide viewer and forcing popups for the flickr posts) is not your thing but you are looking for an existing design model maybe the scripts original authors (link above) design will be more your thing. View their demo below:
View Demo
Now, lets start with the shopping list:
Required:
Simple machines forum
Tinyportal (or one of the other portal mods that allow php code for pages)
Simplepie
Optional design elements used to extend function in my demo:
PhpThumb Thumbnail creator (this is used to generate aspect ratio correct even-sized thumbnails, it is only necessary if you want profile oriented photos to take on the landscape orientation. If it is not used then be aware you should select the square thumbnails in the php script settings, which is explained in the usage details later on)
Highslide viewer mod
Centered popup script (added to head of index.template.php of the current theme(s) in use, this is for viewing the flickr posts in a popup, yes evil I know, if you dont like it just make the link to flickr regular by modifying the code in the main script below):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script type="text/javascript" language="JavaScript">
var win = null;
function newWindow(mypage,myname,w,h,features) {
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = \'height=\' + h + \',\';
settings += \'width=\' + w + \',\';
settings += \'top=\' + wint + \',\';
settings += \'left=\' + winl + \',\';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| .nav2, .nav2:link, .nav2:visited {
color: #666;
text-decoration: none;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: .85em;
}
a.nav2:hover {
color: #CCC;
text-decoration: none;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: .85em;
}
#flickrgallerybody {
width:900px;
overflow:auto;
padding: 5px 5px 5px 5px;
margin: 0px 0px 2px;
background: #303030;
}
#flickrgalleryimage {
padding: 60px 0 10px 0;
overflow:auto;
background: #303030 url(images/flickrgallery/flickrgallery.jpg) no-repeat top right;
}
#gallerycell {
width:269px;
height:245px;
padding: 10px 10px 10px 6px;
float: left;
margin: 0px 7px 14px;
background-image: url(images/flickrgallery/gallerycell.png);
background-repeat: no-repeat;
}
#gallerycellthumb {
padding: 3px 0 3px 0;
width:256px;
background-color: #303030;
}
#gallerycelllink {
padding: 3px 0 3px 0;
width:256px;
margin-top: 5px;
background-color: #242424;
} |
Obviously you can replace the images/modify dimensions with whatever suits your needs, but if you want to use my design you can download the images
here (mdp art exchange text removed, simply states @ flickr at top with icon at bottom). The image path in the css above is
relative to the root of the theme/stylesheet in use not the forum root. To use my images you have to place them in a folder you create called “flickrgallery” in the images folder of the theme(s) directory.
The php page script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| ?><div id="flickrgallerybody"><div id="flickrgalleryimage">
<?php require_once('PATH TO SIMPLEPIE');
$feed = new SimplePie();
$feed->set_feed_url('FLICKR RSS FEED(S)');
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . 'PATH TO SIMPLEPIE CACHE FOLDER BEGINNING AT WEBROOT');
$feed->set_cache_duration(600);
$feed->handle_content_type();
$feed->init();
function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
return $matches[1][0];
}
function select_image($img, $size) {
$img = explode('/', $img);
$filename = array_pop($img);
$s = array(
'_s.', // square
'_t.', // thumb
'_m.', // small
'.', // medium
'_b.' // large
);
$img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
return implode('/', $img);
}
foreach ($feed->get_items() as $item):
echo '<div id="gallerycell">';
if ($enclosure = $item->get_enclosure()) {
$img = image_from_description($item->get_description());
$full_url = select_image($img, 4);
$thumb_url = select_image($img, 2);
echo '<br /><center><div id="gallerycellthumb"><a href="' . $full_url . '" class="highslide" rel="highslide"><img src="PATH TO PHP THUMB?src=' . $thumb_url . '&w=250&h=155&zc=1&q=95" /></a><div class="highslide-heading">'; echo $item->get_title(); echo '</div><div class="highslide-caption"><strong><a href="'; echo $item->get_link(); echo '" target="_blank">Go to Flickr Post</a></strong><br /><br />'; echo strip_tags ($item->get_description()); echo '<br /></div></div>';
}
echo '<div id="gallerycelllink"><span class="nav2">'; echo $item->get_date('j F Y | g:i a'); echo '<br /><a class="nav2" href="" onClick="newWindow(\''; echo $item->get_link(); echo '\',\'\',\'990\',\'850\',\'resizable,scrollbars,status,toolbar\')">View Flickr post in Popup</a></span></div></center></div>';
endforeach;
echo '</div></div>'; |
Simple eh? OK, if you’re daunted lets go through the steps.
1 You obviously have smf installed if you hunted this out. That’s done.
2 If you dont have tinyportal installed then you’ll have to install that or another mod for smf that enables php pages.
3 Download simplepie and upload to your server. Set it up correctly, view its readme, test its compatibility.
4 (optional) Download phpthumb and upload to server, view its readme, set it up correctly. Path in script is relative to forum root.
5 Install the Highslide Mod for SMF.
6 For each of the themes you are using add the centered popup javascript code above in the head section of the index.template.php file.
7 For each of the themes you are using add the CSS above into that themes style.css.
8 Download the images above and upload them or your own to the server. CSS image path is relative to the location of the stylesheet. Modify if needed accordingly.
9 Create a new php page in tinyportal. Paste the script above into it. Follow configuration settings below:
line 3: make this the path to your simplepie.inc file.
line 5: make this the flickr rss feed(s). If multiple feeds simply add (array after set_feed_url and another closing bracket outside of the closing bracket for the feeds.
line 6: set the location of your simplepie cache. this is relative to webroot
line 7: set the cache duration
line 36: set the size of the large image that is displayed from flickr. the number 0-4 are available, you prob want 3 or 4. (0 for square, 1 for thumb, 2 for small, 3 for medium, 4 for large)
line 37: set the thumbnail size. if you are using my design then either use php thumb and leave it set at 2, or if you dont want php thumb I recommend using 0 or 1. 2 will cause portrait shots to not look good in my gallerycell div.
line 38: if you are using php thumb then set the path to it were the code specifies. This path is relative to your forum root. If you arent using phpthumb remove that capital path request text and the question mark immediately following it and also remove the &w=240&h=150&zc=1&q=95 just after the thumb_url code.
That’s it. If you have questions feel free to ask.
This script uses simplepie rss and is built on this original script for use in a normal webpage. All I’m doing here is taking that script and showing how it can be used in a tinyportal php page inside the simple machine forum software with some tweaks to its function and my own design/layout.
This script is quite easy to use, and it’s application can be diverse. The main usage may be to have member flickr galleries as pages on your forum, allowing your members to display their work outside of your site in a nice page locally. Flickr rss spits the latest 20 images, and your page will update as their rss updates obviously. In using simplepie you will have a caching option so that update rate will be determined by your cache duration. You may also blend multiple rss feeds into a mass mixed stream.
Here is the demo of my own photostream piping into my design I built to suit the forum:
View Demo
The features:
The highslide preview (click the thumbnail in the demo) contains the text only from the description under the image and a link to go to the flickr page. Below the thumbnail is the date posted and the ability to view the flickr post in a popup.
If that style (using highslide viewer and forcing popups for the flickr posts) is not your thing but you are looking for an existing design model maybe the scripts original authors (link above) design will be more your thing. View their demo below:
View Demo
Now, lets start with the shopping list:
