Stefano Verna http://www.stefanoverna.com Just another WordPress weblog Fri, 11 Sep 2009 15:41:10 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 Site logo ripoff http://www.stefanoverna.com/uncategorized/site-logo-ripoff http://www.stefanoverna.com/uncategorized/site-logo-ripoff#comments Tue, 07 Apr 2009 21:08:36 +0000 Stefano Verna http://www.stefanoverna.com/?p=594 Just a quick post to share with you a site I discovered that made me laugh. A lot. Let’s make a visual diff of these two headers..

ripoff

I’m not that sure, but I kinda think somebody might have been stolen something from someone else.. lol. Well, I’ll take this ripoff as a recognition of the fact that this site is starting to be a little more visible.

A big thanks to the super-vigilant eyes of Ivan Jankovic for this report. Did something like this ever happened to you? I’m quite curious about it :)

]]> http://www.stefanoverna.com/uncategorized/site-logo-ripoff/feed Create a quick-and-dirty search engine for your custom PHP website http://www.stefanoverna.com/log/quick-easy-search-engine-php-website http://www.stefanoverna.com/log/quick-easy-search-engine-php-website#comments Tue, 10 Mar 2009 21:02:13 +0000 Stefano Verna http://www.stefanoverna.com/?p=576 In more than one occasion I found myself in the need of a little, handy search engine for my custom, PHP-based websites. If the main content of our pages is stored in a database table (that is the case of all the CMS), than we just need to use some SQL queries to sort the pages… but what if we’re building a very customized website from the scratch, and many of our pages are handled manually with a lot of custom PHP code?

There are obviously a lot of great search engines already out there that will be able to do the dirty indexing job for you. I’m particularly in love with Sphider, a lightweight PHP-MySQL web spider that in just 300KB features advanced stuff like word autocompletion, spelling suggestions, etc.

But what if we’d like to have a further simplified search engine, something to use with our simple 50 pages website and that

  • Could be written in less then 100 lines of code
  • Could use a single database table
  • Could preserve all the major functionalities, like natural language searches, common words removal and optional boolean search?

Today I’d like to introduce you a super-easy technique that uses the ob_get_contents() PHP buffering function. I really don’t know if that’s a common solution or not, I tried to google about it but I couldn’t came up with anything quite similar. Let’s start.

How does it work? The idea.

Read this simple piece of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
	<head>...</head>
	<body>
		<?php
			ob_start();
		?>
			<h1>Basic Page Example</h1
			<p>This is your custom page code, something with basic XHTML mixed with PHP:</p>
			<ul>
			<?php for ($i=0; $i<100; $i++): ?>
				<li>List Item <?= $i ?></li>
			<?php endfor; >
			</ul>
		<?php
			$content = ob_get_contents();
			ob_end_flush();
		?>
	</body>
</html>

The result is that in the $content variable you’ll have the whole exploded page content. As you might be starting to guess, that’s a potentially perfect start for our website indexing process! If we take this text, we remove the tags not to be indexed (<script>, <object>, <form>, etc.), we strip all the remaining tags and we store the result in our database table, we’re already half way through the problem!

Let’s create our tag stripper function (that’s just a basic stub, it could be improved to handle useless whitespace removal, etc.):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function removeTagWithContent($text, $tags = '', $invert = FALSE) {
  preg_match_all('/<(.+?)[s]*/?[s]*>/si', trim($tags), $tags);
  $tags = array_unique($tags[1]);
  if(is_array($tags) AND count($tags) > 0) {
    if ($invert == FALSE)
      return preg_replace('@<(?!(?:'. implode('|', $tags) .')b)(w+)b.*?>.*?</1>@si', '', $text);
    else
      return preg_replace('@<('. implode('|', $tags) .')b.*?>.*?</1>@si', '', $text);
  } elseif ($invert == FALSE) {
    return preg_replace('@<(w+)b.*?>.*?</1>@si', '', $text);
  }
  return $text;
}
 
function tagStripper($content) {
	$content = removeTagWithContent($content, '<script><embed><form>', true);
	$content = strip_tags($content);
	$content = html_entity_decode($content);
	return $content;
}

The MySQL Table

This is the basic SQL code you need to create a proper table to store all the indexed data:

1
2
3
4
5
6
7
8
9
10
11

CREATE TABLE `search_pages` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `page` mediumtext NOT NULL,
  `title` mediumtext NOT NULL,
  `content` longtext NOT NULL,
  `indexed` timestamp NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `page` (`page`(255)),
  FULLTEXT KEY `fulltext_title` (`title`),
  FULLTEXT KEY `fulltext_content` (`content`)
) ENGINE=MyISAM;

As you can see, we added 2 different full-text indexes, one for the page title and one for the page content. This will allow us to have a finer grained control over in the MySQL sorting algorithm.

Indexing the pages

Everything is ready for our page indexing. Let’s create the functions to be called on every part of the page you want to perform indexing:

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

$pagecontent = "";
$title;
 
function setIndexTitlePage($t) {
	global $title;
	$title = $t;
}
 
function startIndexingContent() {
	if (!isIndexingEnabled()) {
		return;
	}
	ob_start();
}
 
function stopIndexingContent() {
	global $pagecontent;
	if (!isIndexingEnabled()) {
		return;
	}
	$text = ob_get_contents();
	ob_end_flush();
	$pagecontent .= tagStripper($text);
}
 
function storeIndexedContent() {
	global $pagecontent, $title;
 
	if (!isIndexingEnabled()) {
		return;
	}
 
	// the page URL
	$page = preg_replace('#?.*$#D', '', $_SERVER['REQUEST_URI']);
 
	$link = mysql_connect('host','user','pass');
	$sql = sprintf(
		"INSERT INTO search_pages (page, title, content, indexed) VALUES ('%s', '%s', '%s', FROM_UNIXTIME(%d))",
		$page,
		$title,
		$pagecontent,
		time()
	);
	mysql_query($sql, $link);
 
}

So that you’ll have to wrap the relevant part of your pages between the startIndexingContent() and stopIndexingContent() functions. This is to avoid a repeated indexing of common parts like headers, sidebars, etc. At the end of your pages, you just have to call the storeIndexedContent() function to save it for later use.

Wait! There’s something wrong here…

Yep. That’s right. If we really do it in this way, then all the visits to every page of your website will cause a write in the DB. Which is not that good. We’ve to find out a way to know when it’s really the time to re-index the pages. This is obviously a quite website-specific task. I’m lefting this part out of the tutorial as it’s the only one that could cause a noticeable slow-down to your server if not setted up in the right way, but let me share some ideas about that:

  • Enable website re-indexing after a fixed amount of time, i.e. 2 days: Check the timestamp of the indexed version in the DB table, if it’s older that a specific amount of time, the update the row with the new content.
  • Make a SHA1 hash of the content of the page, if it differs from the one stored in the db, then store the new version!
  • If your site is SVNd, than just use the SVN revision number to find out if the page stored in the db needs to be refreshed.
  • Disable the indexing everytime, except when the page is being called by a specific cron task you made to spider the content (it’s just a matter of calling a recursive retrieval of pages using wget).

I’m open to other suggestions, also.

Last but not least: the searching functions!

All the work is done within MySQL: you just need to use the full-text specific syntax MATCH (...) AGAINST (... IN BOOLEAN MODE) to perform a full text search to some table fields.

1
2
3
4
5
6
7
8
9

SELECT 
	*, 
	0.6 * MATCH(title) AGAINST(%s IN BOOLEAN MODE) + 0.9 * MATCH(content) AGAINST(%s IN BOOLEAN MODE) AS rank 
FROM 
	search_pages 
WHERE 
	MATCH(title) AGAINST(%s IN BOOLEAN MODE) OR MATCH(content) AGAINST(%s IN BOOLEAN MODE) 
ORDER BY 
	rank DESC

As you can see, thanks to the two separate fulltext indexes instead of a single one, we are now able to weight the title tag in a different way than the content of the page. The query will return us the the rows sorted by the rank field.

Conclusions

This is a super-quick search engine implementation. It cannot be used for big sites with tons of pages, nor it can provide advanced features like keyword suggestion. But it’s really 90 lines of code to implement, if you know what I mean. I’m using it in a 20 pages big website, and it works surprisingly well. And the search results are incredibly good, too.

It could certainly be useful to some of you. Or, at least, it might have been useful to let you understand the super powers that MySQL has in terms of full-text searches.

Hope to have some feedback/suggestions about this one.. :)

]]> http://www.stefanoverna.com/log/quick-easy-search-engine-php-website/feed Create astonishing iCal-like calendars with jQuery http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery#comments Tue, 27 Jan 2009 07:45:03 +0000 Stefano Verna http://www.stefanoverna.com/?p=536 According to my web designer experience, one of the most common requests from clients when it comes to Wordpress personalization, is to add a basic event calendar to their website.

Finding a good place to position a big table like a calendar within your Wordpress template is always a taught work. In addition, the <table> tag itself is often quite difficult to style in a good way.

One of the calendar solution that I came out with and that I’m particulary proud of is the one I built inside the freshly launched Graham Watson for President website.

Calendar Preview

View the online Demo!

I wanted it to be similar to the iPhone Calendar application (or, if you want, to the little calendar on the left bottom corner in iCal). And I also wanted to keep the code as little and sweet as possible (we don’t like maintenance, do we?).

Here’s the simple HTML code I used, the simplest you could ever come up with:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<table cellspacing="0">
	<thead>
		<tr>
			<th>Mon</th><th>Tue</th><th>Wed</th>
			<th>Thu</th><th>Fri</th><th>Sat</th>
			<th>Sun</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="padding" colspan="3"></td>
			<td> 1</td>
			<td> 2</td>
			<td> 3</td>
			<td> 4</td>
		</tr>
		<tr>
			<td> 5</td>
			<td> 6</td>
			<td> 7</td>
			<td> 8</td>
			<td class="today"> 9</td>
			<td>10</td>
			<td>11</td>
		</tr>
		<tr>
			<td>12</td>
			<td class="date_has_event">
				13
			</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
			<td>17</td>
			<td>18</td>
		</tr>
		<tr>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td class="date_has_event">
				22
			</td>
			<td>23</td>
			<td>24</td>
			<td>25</td>
		</tr>	
		<tr>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td>31</td>
			<td class="padding"></td>
		</tr>
	</tbody>
	<tfoot>
		<th>Mon</th><th>Tue</th><th>Wed</th>
		<th>Thu</th><th>Fri</th><th>Sat</th>
		<th>Sun</th>
	</tfoot>
</table>

All the magic takes place with some ninja CSS:

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

table {
	border-collapse: separate;
	border: 1px solid #9DABCE;
	border-width: 0px 0px 1px 1px;
	margin: 10px auto;
	font-size: 20px;
}
td, th {
	width: 81px;
	height: 81px;
	text-align: center;
	vertical-align: middle;
	background: url(../img/cells.png);
	color: #444;
	position: relative;
}
th {
	height: 30px;
	font-weight: bold;
	font-size: 14px;
}
td:hover, th:hover {
	background-position: 0px -81px;
	color: #222;
}
td.date_has_event {
	background-position: 162px 0px;
	color: white;
}
td.date_has_event:hover {
	background-position: 162px -81px;
}
td.padding {
	background: url(../img/calpad.jpg);
}
td.today {
	background-position: 81px 0px;
	color: white;
}
td.today:hover {
	background-position: 81px -81px;
}

Please note a couple of things here, as it’s the trickiest part:

  • Make your images seamless. Draw only the top and right border of the cells inside the image: neighbour cells will continue the pattern. Then add the bottom and left border to the table via CSS to complete the work.
  • Use a single image for all the graphics whenever is possible to decrease the download speed time (just a single TCP three-way-handshake to manage, a single Apache request to be answered by your server, a single PNG header overhead to be downloaded).

In addition to the plain calendar structure, we obviously also want the events description to show up on mouse hover. To do that, just add this block inside the calendar cells:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<td class="date_has_event">
	13
	<div class="events">
		<ul>
			<li>
				<span class="title">Event 1</span>
				<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
			</li>
			<li>
				<span class="title">Event 2</span>
				<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
			</li>
		</ul>
	</div>
</td>

And use the beautiful, handy, lightweight Coda-like effect for jQuery to bring it to life (how I love jQuery?)

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

$(function () {
	$('.date_has_event').each(function () {
		// options
		var distance = 10;
		var time = 250;
		var hideDelay = 500;
 
		var hideDelayTimer = null;
 
		// tracker
		var beingShown = false;
		var shown = false;
 
		var trigger = $(this);
		var popup = $('.events ul', this).css('opacity', 0);
 
		// set the mouseover and mouseout on both element
		$([trigger.get(0), popup.get(0)]).mouseover(function () {
			// stops the hide event if we move from the trigger to the popup element
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// don't trigger the animation again if we're being shown, or already visible
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;
 
				// reset position of popup box
				popup.css({
					bottom: 20,
					left: -76,
					display: 'block' // brings the popup back in to view
				})
 
				// (we're using chaining on the popup) now animate it's opacity and position
				.animate({
					bottom: '+=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					// once the animation is complete, set the tracker variables
					beingShown = false;
					shown = true;
				});
			}
		}).mouseout(function () {
			// reset the timer if we get fired again - avoids double animations
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// store the timer so that it can be cleared in the mouseover if required
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				popup.animate({
					bottom: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					// once the animate is complete, set the tracker variables
					shown = false;
					// hide the popup entirely after the effect (opacity alone doesn't do the job)
					popup.css('display', 'none');
				});
			}, hideDelay);
		});
	});
});

This is the CSS code used to style the popup div:

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

.events {
	position: relative;
}
.events ul {
	text-align: left;
	position: absolute;
	display: none;
	z-index: 1000;
	padding: 15px;
	background: #E7ECF2 url(../img/popup.png) no-repeat;
	color: white;
	border: 1px solid white;
	font-size: 15px;
	width: 200px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;
	list-style: none;
	color: #444444;
	-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
	padding-bottom: 5px;
}
.events li span {
	display: block;
	font-size: 12px;
	text-align: justify;
	color: #555;
}
.events li span.title {
	font-weight: bold;
	color: #222;
}

Please note how nice the box-shadow CSS property is when applied to the popup… unfortunately, this CSS3 property is still only implemented in WebKit browsers (Safari, Google Chrome), but more of them are about to support it.

ZIP Icon Download the source files!

And… that’s it. Simple and sweet, as we wanted. Obviously, you’ll have to properly configure your preferred Wordpress plugin to output a code like the one I showed you, but that’s the boring part of the lesson and I’ll skip it :) Instead, let me just add a note…

Choosing the right Wordpress Plugin

There are plenty of pretty good Wordpress calendar plugins around to facilitate your backend work. I can tell you I tried them all, and the one that convinced me the most was Event Calendar.

With Event Calendar you can add a countless number of events to any post or page directly within the New and Edit page, there’s a lot of great functions you can use to freely tweak the event-browsing experience within your PHP template — but some work still should be done in this direction — it’s AJAX ready and the plugin itself is already localized in 19 languages.

Hope you’ve enjoyed the tut! I’ll try to reply to your question in my free time :)

]]> http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery/feed WP-MarkItUp! v1.3.3 http://www.stefanoverna.com/uncategorized/wp-markitup-v133 http://www.stefanoverna.com/uncategorized/wp-markitup-v133#comments Wed, 17 Dec 2008 12:36:11 +0000 Stefano Verna http://www.stefanoverna.com/?p=524 Just a quick update to let you know that the new version of WP-MarkItUp! — already committed to the Wordpress Plugin Repository — should fix all the problems you may experiencing with WordPress 2.7, “Coltrane”.

Upgrade it now!

]]> http://www.stefanoverna.com/uncategorized/wp-markitup-v133/feed Monthly Update http://www.stefanoverna.com/log/monthly-update http://www.stefanoverna.com/log/monthly-update#comments Thu, 23 Oct 2008 18:47:40 +0000 Stefano Verna http://www.stefanoverna.com/?p=521 Hi guys. As you might have guessed from the drastically reduced posts per week ratio, this has been a really challenging month for me, in a positive way.
I’m currently working on four different website projects at the same time, three of which starting totally from scratch. It has been a great opportunity to measure my design & php coding skills, and I think you can imagine the pleasure of starting to actually see the first great results slowly coming out from the initial prototyping phases. The silly thing is that I had been contacted also by a couple of other clients in this period, so that I had to refuse their proposal due to lack of time (darmn it, university).

I don’t want to say more about it, but I will surely update my online portfolio with all these great pieces of net as soon as they’ll be stable online.

In the meantime I can tell you that the updated FlickrRSS Wordpress plugin is almost done, we now just need to rewrite the documentation. Stay tuned!

]]> http://www.stefanoverna.com/log/monthly-update/feed WP-MarkItUp! v1.3 http://www.stefanoverna.com/log/wp-markitup-v13 http://www.stefanoverna.com/log/wp-markitup-v13#comments Wed, 24 Sep 2008 17:50:26 +0000 Stefano Verna http://www.stefanoverna.com/?p=514 An updated version of WP-MarkItUp! should be available in the very next minutes from the wordpress.org plugin archive. It features the Dutch localization of the plugin (a big thanks to pw-web please!), and it fixes some problems related to the useless inclusion of the wp-config.php file. I really think this plugin can become a must-have for a lot of Wordpress installations.. it’s an awesome tool to speed up your daily posting.

PS. I just got added to the prestigious Css Creme web design gallery, and the CSS Design Yorkshire web gallery also! That’s cool man!

]]> http://www.stefanoverna.com/log/wp-markitup-v13/feed FlickrRSS will soon be upgraded… http://www.stefanoverna.com/log/flickrrss-will-soon-be-upgraded http://www.stefanoverna.com/log/flickrrss-will-soon-be-upgraded#comments Sat, 13 Sep 2008 21:41:17 +0000 Stefano Verna http://www.stefanoverna.com/?p=504 … and guess what? It will have something that will closely remind you my Advanced FlickrRSS patch.

That’s right folks, let me tell you officially: Dave Kellam — the developer of the official FlickRSS plugin — and I are already working to patch the current 4.0 version with a huge number of improvements, from better caching to more costumization of the image gallery, passing through an improved settings user interface and a more manageable source code. Uh, and preserving backward compatibility.
Those changes are already available in the trunk of the FlickrRSS subversion repository, and after a couple of days of massive testing will be released to the public audience.

Isn’t it great news? Stay tuned!

]]> http://www.stefanoverna.com/log/flickrrss-will-soon-be-upgraded/feed WP+Fancybox+FlickrRSS? Wohaa! http://www.stefanoverna.com/log/fancybox-flickrss-wordpress http://www.stefanoverna.com/log/fancybox-flickrss-wordpress#comments Fri, 05 Sep 2008 17:35:23 +0000 Stefano Verna http://www.stefanoverna.com/?p=411 After receiving some great comments about the cute Flickr thumbnails and the associated popup effect in the About section, I thought I could share some tips on how a similar effect can be replicated inside a fresh Wordpress installation. Well, that’s not difficult to achieve, at all, but before start let me show you what we’re talking about (and don’t forget to click the thumbs, or you’ll miss half of the fun).


The Recipe…

First of all, you need to download the latest version of Fancybox, the jQuery lightbox-like plugin, and the pngFix plugin for IE6. Finally, download the Advanced FlickrRSS plugin for Wordpress I posted yesterday.

Ok, so now what we’re basically going to do is put these tools in a large bowl, add 2 cups of ninja CSS and mix them until they’re combined well.

Gorgeous CSS Decorated Galleries? Yuhm!

To build our terrific Flickr gallery we’ll make use of this wonderful tutorial by the Web Designer Wall about CSS Decorative Galleries: hot stuff, isn’t it? :)
It basically builds up a simple HTML structure like this one:

1
2
3
4
5
6
7

<div class="flickr_gallery">
  <div class="flickr_thumb">
    <span> </span>
    <img alt="image" src="image.jpg" title="My Flickr Image" />
  </div>
  <!-- other images here... -->
</div>

Where the empty <span/> tag is the one that does the trick: if you set position: relative to the .flickr_thumb, you are able put the <span/> box over the <img/> using the position: absolute property. Then you just need to give to the <span/> a PNG background image representing some kind of pretty frame. The Flickr image will appear underneath the transparent parts of the frame image.
That’s the basic concept, obviously. Web Designer Wall offers far more detailed instructions about the various effects that can be obtained with this simple but effective CSS tecnique and dozens of different demo galleries to learn/copy from.

For our Flickr gallery, this is the HTML code we’ll use:

1
2
3
4
5
6
7
8
9

<div class="flickr_gallery">
  <div class="flickr_thumb">
    <span> </span>
    <a href="#" style="background-image: url(image_thumb.jpg)"
    ></a>
  </div>
  <!-- other images here... -->
</div>
<br class="clear"/>

You might notice that I did not put the Flickr photo inside an <img/> tag like in the previous example, but I used it as a CSS background. This is a simple trick to remember when you need to trim a photo at a desidered size without making any editing. You can then decide which part of the image will be cut out with the background-position CSS property.
The reason why I used an <a/> tag instead of a default <div/> will be clear later.

Here’s the complete CSS stylesheet related to the above code:

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

body {
	font-family: Georgia,sans-serif;
	font-size: 14px;
	color: #333;
	text-align: center;
	padding: 20px;
}
 
.flickr_gallery {
	margin: 40px auto 5px;
	width: 415px;
}
 
.flickr_thumb {
	background: transparent url(imgs/polaroid.jpg) no-repeat scroll 50% 0;
	display: inline;
	float: left;
	height: 125px;
	margin: 15px 10px;
	text-align: center;
	width: 116px;
	position: relative;
}
 
.flickr_thumb a {
	display: block;
	height: 100px;
	position: relative;
	width: 100px;
	margin: 8px;
	background-position: 50% 50%;
}
 
.flickr_thumb span {
	background: transparent url(imgs/tape.png) no-repeat scroll 50% 0;
	height: 25px;
	left: 20px;
	position: absolute;
	top: -10px;
	width: 77px;
	z-index: 10;
}
 
.clear {
	clear: both;
}

May I introduce you FancyBox?

We now want to add that awesome FancyBox zooming effect to our gallery. To do that, add a link to the jQuery library, the FancyBox plugin and the pngFix plugin just before the closing tag of your <body> Wordpress template (you’ll probably find it on footer.php). Then, just after, add the code needed to setup Fancybox:

1
2
3
4
5
6
7
8
9
10

    <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
    <script type="text/javascript" src="js/jquery.pngFix.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(".flickr_gallery .flickr_thumb a").fancybox();
      });
    </script>
  </body>
</html>

We just have to add a couple of attributes more to our HTML thumbnails (rel to group the different images inside a single Fancybox gallery and title to add a caption to the photos) and the work is done:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="flickr_gallery">
  <div class="flickr_thumb">
    <span> </span>
    <a href="image_big.jpg" 
       title="My Flickr Image Title" 
       rel="FlickrGallery"
       style="background-image: url(image_thumb.jpg)"
    ></a>
  </div>
  <!-- other images here... -->
</div>
<br class="clear"/>

Please remember also to add a link to the Fancybox stylesheet into the <head> of your template, or the final result will be quite weird!

Let’s get dynamic: FlickrRSS!

Since we want a dynamic Flickr gallery, we now need to install the modified WP plugin FlickrRSS I posted yesterday. Once done, just go to the FlickrRSS Settings page, choose the photos to show, then fill the HTML Builder Form with the following values:

  • Before List:
<div class="flickr_gallery">
  • Item HTML:
<div class="flickr_thumb">
 <span></span>
 <a 
   href="%image_medium%"
   title="%title%"
   rel="FlickrGallery"
   style="background-image: url(%image_square%)"></a>
</div>
  • After List:
</div><br class="clear"/>

Great! Now, you just have to add the FlickrRSS widget on your sidebar, or, if you prefer, add the following PHP code where you want your gallery to appear:

<?php
  get_FlickrRSS();
?>

Working Demo

We’re done. Your damn cute Flickr gallery should be ready for primetime. I prepared a working example page of the gallery we built together, just in case you need it. If you have any questions/suggestions, please let me know!

]]> http://www.stefanoverna.com/log/fancybox-flickrss-wordpress/feed An Advanced WP FlickrRSS plugin http://www.stefanoverna.com/log/advanced-flickrss http://www.stefanoverna.com/log/advanced-flickrss#comments Thu, 04 Sep 2008 14:25:48 +0000 Stefano Verna http://www.stefanoverna.com/?p=446 If you’ve already used FlickrRSS in your life, you probably remember it as a good, loyal Wordpress plugin. I agree with you: it can show you sets, groups pool, public photos, it handles caching of photos. Unfortunately it lacks of some advanced costumization options:

  • You cannot personalize the code to show up for each photo (e.g. you want to link the Flickr square thumbnail to the original image, and not to the Flickr page containing the photo).
  • What if I want to cache both the square thumb and the large image?
  • Also, the parameters to pass to the plugin function are quite dirty (we don’t like long list of unexplained parameters, do we?)

Well, I modified the FlickrRSS plugin to satisfy the above needs and as soon as possible I’ll try to contact Dave Kellam, the original FlickrRSS author, to let him know about this modified version, so hopefully these will be soon included to the trunk. In the meantime, you can download the modified source code here, as we’ll need it to continue the tutorial.

ZIP Icon Download Advanced FlickrRSS for Wordpress! (about 8KB)

Here you have all the params you can pass to your reborn FlickRSS plugin. Please note that all of them are optional, just like the original plugin, but they are passed as an associative array, so you don’t have to remember the correct order and fill the call with all those ugly null parameters. Please note that if you do not specify them, the default values setted up the plugin Settings page will be used instead.

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

$settings = array(
 
  /*== Content params ==*/
 
  // What Flickr images you want to show? Possible values: 'user', 'favorite', 'set', 'group', 'public'
  'type' => 'public',
 
  // Optional: To be used when type = 'user' or 'public'
  'tags' => 'sunflowers',
 
  // Optional: To be used when type = 'set' 
  'set' => '',
 
  // Optional: Your Group or User ID. To be used when type = 'user' or 'group'
  'id' => '',
 
  'do_cache' => false,
 
  // What are the image sizes we want to cache locally? Possible values: 'square', 'thumb', 'small', 'medium' or 'large', provided within an array
  'cache_sizes' => array('square'),
 
  /*== Presentational params ==*/
 
   // The number of thumbs you want
  'num_items' => 4,
 
   // the HTML to print before the list of images
  'before_list' => '<div class="flickr_gallery">',
 
  // the code to print out for each image. Meta tags available:
  // - %flickr_page%
  // - %title%
  // - %image_small%, %image_square%, %image_thumb%, %image_medium%, %image_large%
  'html' => '<a href="%flickr_page%"><img src="%image_square%" /></a>',
 
  // the default title
  'default_title' => "Untitled Flickr photo", 
 
  // the HTML to print after the list of images
  'after_list' => '</div>'
 
);

If you have any problems with it, please report them here! In a couple of days I’ll post a tutorial on how to use this modified version of FlickrRSS plugin to create your own, beautiful, Fancyboxed, polaroid Flickr galleries inside Wordpress.

]]> http://www.stefanoverna.com/log/advanced-flickrss/feed WP MarkItUp v0.1 now available! http://www.stefanoverna.com/log/wp-markitup-now-available-to-download http://www.stefanoverna.com/log/wp-markitup-now-available-to-download#comments Thu, 14 Aug 2008 07:19:53 +0000 Stefano Verna http://www.stefanoverna.com/?p=304 I’m happy to announce that a beta version of WP MarkItUp! is now ready to be downloaded!

I finally solved the CSS problems that were present a couple of days ago (it was all WP fault..), completed the localization, made some adjustments to the toolbars, added all the MarkItUp! default skins and created a new one fitted for the WP administration area. I think that the final result is quite good.

Now it’s your turn. Download it, install it, test it.

If you find any problems/bugs/annoyances, or if you feed like something really important is missing, than please let me know. I’m going to release it also on the Wordpress Plugin website as soon as it will be somehow stable. In the meantime, spread the world. The more people will try this, the more it will be solid. Thanks in advance for the support.

Now what you’re waiting for? Go download it! :)

]]> http://www.stefanoverna.com/log/wp-markitup-now-available-to-download/feed