Retrospective: new plugin for WordPress

ATENÇÃO: Este conteúdo foi publicado há 6 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

I’ve just wrote my first WordPress public plugin, that I’m licensing under GPL v3. This post is to make it public. I’m writing in English because the WordPress plugin directory asks me to provide a plugin page to host the files there and I’ll provide the URL of this post. Update: The plugin is now in the WordPress plugin directory: wordpress.org/extend/plugins/retrospective/


The website of the brazilian newspaper O Estado de São Paulo has a nice way to display news in a retrospective-style (check this screenshot or this link — Flash required).

Wouldn’t it be nice if we could display WordPress posts in our pages and categories in the same way just by using a shortcode? The possibilities are many. That’s why I wrote the Retrospective plugin for WordPress.

It has at least two advantages over the version you just saw:

  1. Does not require Flash (its implementation uses only CSS and JavaScript/jQuery)
  2. Has a option to respect the (time-)scale of the posts.

Its use is very simple. Wherever you add the shortcode [retrospective] the plugin will draw that cool retrospective. The shortcode supports several attributes:

  • count — limit the number of posts to be displayed (default = 10; use -1 to display all)
  • cat — display posts with category IDs comma-separated (default = display all posts)
  • width — the width of the timeline in pixels (default = 600)
  • delay — the time of the focus change animation in milisseconds (default = 1000)
  • scale — if set, respect the time scale in the distances between the points in the timeline (default = false)
  • image_width, image_height — the dimensions of the thumbnail images in pixels (default = 300×180)
  • image_border_size — the size of the image’s border in pixels (default = 7)
  • image_border_color — the color of the image’s border in hexa RGB (default = 000000)
  • image_margin — the space between the images (default = 5)
  • date_format — the date format in PHP format (default = d/m/Y)

For example, here is a [retrospective count=5 cat=20 image_border_color=2F5971] call:


Some screenshots

Here is a screenshot from juntos.org.br with scale=true (in the link you can see it working):

And here is a screenshot from a fresh WordPress install (TwentyEleven theme without modifications):


Customizing

Post thumbnails

For better results, I suggest always adding post thumbnails to your posts and using registered image sizes in image_width and image_height attributes.

Styling retrospectives

The generated HTML is very easy to style (but just be careful with margins and paddings, they’re set with !important attribute — I did it to try not to break with any theme). Here is a sample:

<div id="retro-uniquehash" class="retrospective">
    <!-- TIMELINE -->
    <ul class="time">
        <li rel="0"><a href="permalink" style="left:0px;"><span>date</span></a></li>
        <li rel="1"><a href="permalink" style="left:300px;"><span>date</span></a></li>
        <li rel="2"><a href="permalink" style="left:600px;"><span>date</span></a></li>
    </ul>
 
    <!-- PHOTOS -->
    <div class="photos">
        <ul>
            <li rel="0"><a href="permalink" title="title">
                <img src="file" class="wp-post-image" /></a></li>
            <li rel="1"><a href="permalink" title="title">
                <img src="file" class="wp-post-image" /></a></li>
            <li rel="2"><a href="permalink" title="title">
                <img src="file" class="wp-post-image" /></a></li>
        </ul>
    </div>
 
    <!-- POSTS -->
    <ul class="posts">
        <li rel="0"><a href="permalink" title="title"><h2>Title <span>(date)</span></h2>
            <p>Excerpt</p></a></li>
        <li rel="1"><a href="permalink" title="title"><h2>Title <span>(date)</span></h2>
            <p>Excerpt</p></a></li>
        <li rel="2"><a href="permalink" title="title"><h2>Title <span>(date)</span></h2>
            <p>Excerpt</p></a></li>
    </ul>
</div>

Styling a specific retrospective

The generated hash takes in consideration all the attributes sent to the shortcode and also how many retrospectives appeared before in the parsing of the actual page. I made it that way to allow users to set up two exactly equal retrospectives in the same page. Because of that, I don’t recommend setting styles for #retro-uniquehash. I think a reasonable solution for this issue is to make something like

<div id="something_that_makes_sense">[retrospective]</div>

when inserting the shortcode and then styling #something_that_makes_sense .retrospective.


Download

Here is the code for download:* retrospective.zip
* Warning: Please consider I’m using a bazaar approach here. Be aware that the plugin probably has a lot of bugs (and please tell me if you catch any).

I hope you enjoy it. Have fun and please let me have your feedback! :)

12 comentários sobre “Retrospective: new plugin for WordPress

  1. Hello,

    I’m making my first WP site and would lige to use Retrospective to build up an image timeline.
    Except, I don’t get it…
    I don’t really know how to style the retrospective code. I want it to become a timeline like one of your examples (screenscots WP).
    Can you please help me?
    Kind regards,

    Astrid Vyt

    1. Hi Astrid,
      Did you install the plugin? Where are you putting the [retrospective] shortcode? What is happening? Some error, nothing in the place the retrospective should be, or posts there without images?

  2. Hi Tiago,

    congrats to your plugin. It is great coding and I like the simplicity. Even as a non-professional WP-ler I could follow the structure and adapt it mostly to my needs.
    One thing would be interesting: As you see in my website, i put the retrospective plugin always at the bottom of every post as the main item for navigation. http://www.see-ro.com/02◦june◦2010-brighton-2/
    The thing is, that the plugin has always the oldest post in front or as the “starting condition”.
    It would be great, if retrospective would always have the starting condition at the actual post. Then the post-title would be also accurate.
    Any hints how this can be achieved ?

    I also the plugin in http://www.iao.me/the-book/ … just to show you, how much your plugin is appreciated and that its potential is actually great !

    Thanks again for this great plugin. I wonder why not more download it.

    Cheers

    Peter

    1. Hi Peter!
      Thanks for your feedback.

      Do you have experience with PHP? You can modify the Retrospective code to add an extra parameter in the shortcode function (retrospective_shortcode, line 49 of retrospective.php) and then change the query we are using to fetch the posts.

      Good luck!
      Tiago

  3. Hi Tiago,

    I have been playing with this plugin and love it. It does a good job where others have failed.

    Just one problem at the moment, the date will not display any dates before 01/01/1970. Having done some research this looks like a php issue as opposed to wordpress issue.

    1 useful resource I have found is this http://studiohyperset.com/wordpress-old-dates-historical-pre-1969-pre-1970-timestamp-function/3102 but I am no good with php and I am unable to implement this solution.

    Basically, all i want to do is use the standard wordpress “Published on” field as provided in the post admin interface.

    Would you be able to help me with this. Any assistance would be greatly appreciated.

    Kind Regards

    Nick

    1. Hi Nick,
      I’ve just tested and the plugin worked with dates before 1970 in my server (PHP 5.3.5-1ubuntu7.11). Do you have any idea how can I reproduce the bug? What version of PHP are you running in your server? What’s the output of date(“d/m/Y”, -1000000000) and strtotime(“01/01/1910”)? Here the outputs are respectivelly 24/04/1938 and -1893427200. What happens with the post in WordPress when you make it old?

      Thanks for the feedback!
      Tiago

  4. Hi Tiago,

    Apologies for the delayed response. Family takes up weekend times. The server this site is on runs PHP 5.2.17.
    The only way I could think for you to reproduce the bug is to create posts and tag them with a specific category. Before publishing or after publishing the posts, set the publish date field to before 1900.

    Then insert the shortcode utilising the category parameters. The shortcode I am using looks like this:

    [retrospective count=30 cat=151 width=1000 image_width=150 image_border_size=2 image_border_color=EFE374]

    In my case, when I set the publish date to be before 1970 it automatically reverts to the current date.

    I am not quite sure how to answer your questions about “Output date” and “strtotime” php is not a strong skill for me at all.

    All I know is that your code in line 30 defines the following;

    define(‘DEFAULT_DATE_FORMAT’, ‘d/m/Y’);

    then lines 78 & 79 fetch the following;

    $timeU = get_the_time(“U”, $id);
    $timeD = get_the_time($date_format, $id);

    I don’t actually think there is a problem with your code. I think the issue is php or the server configuration but because I am no good or have the permissions to alter either of these at a server level, I was wandering if you would know a work round. Perhaps something like a custom field or seperate field for ‘Date’ on your Posts / Pages interface?

    I hope this makes sense.

    Nick

Deixe uma resposta