Fix WordPress [caption] shortcode

This commit is contained in:
Jez Cope 2015-05-14 21:35:23 +01:00
parent e66215d37a
commit aa1cc27e93
12 changed files with 32 additions and 16 deletions

View File

@ -15,7 +15,7 @@ tags:
- Web 2.0
wpid: 152
---
[caption id="attachment_153" align="alignright" width="300" caption="Twitter home page"]<img class="size-medium wp-image-153" src="http://allacademic.files.wordpress.com/2009/03/twitterhomepage.png?w=300" alt="Twitter home page" width="300" height="194" />[/caption]
<div class="wp-caption alignright"><img class="size-medium wp-image-153" src="http://allacademic.files.wordpress.com/2009/03/twitterhomepage.png?w=300" alt="Twitter home page" width="300" height="194" /><p>Twitter home page</p></div>
I’ve recently signed up to <a href="http://twitter.com/">Twitter</a>. It’s not a new thing; it’s been around for a few years and it’s probably safe to say that I’m way behind the curve on this one. For those who haven’t come across it yet, it’s a very, <em>very</em> simple social networking site which allows you to broadcast 140-character messages. However, in spite of this simplicity, it’s a very powerful tool, and can be quite off-putting for new users.
@ -39,11 +39,11 @@ Wading through the tweets of every other twitterer on the planet is going to tak
This hands control over what you read back to you: you don’t have to follow anyone you don’t want to. I can’t emphasise enough how important this is: <em>don’t follow anyone whose tweets aren’t worth reading</em>. By all means follow someone for a while before you make this decision, and change your mind all you want. Just remember that if you’re not interested in updates on userxyz’s cat at 90-second intervals, no-one says you have to follow them.
[caption id="attachment_155" align="alignright" width="157" caption="Follow button"]<img class="size-full wp-image-155" src="http://allacademic.files.wordpress.com/2009/03/followbutton.png" alt="Follow button" width="157" height="129" />[/caption]
<div class="wp-caption alignright"><img class="size-full wp-image-155" src="http://allacademic.files.wordpress.com/2009/03/followbutton.png" alt="Follow button" width="157" height="129" /><p>Follow button</p></div>
You can follow someone by visiting their profile page, which will have the form “http://twitter.com/<em>username</em>”. This page lists their most recent tweets, newest first. Right at the top, underneath their picture, there’s a button marked “Follow”: click this and it’ll change to a message telling you that you’re now following them. To stop following someone, click this message and it’ll reveal a “Remove” button for you to press. Twitter will send them an email when you start following them, but not when you stop.
[caption id="attachment_156" align="alignleft" width="500" caption="Following info"]<img class="size-full wp-image-156" src="http://allacademic.files.wordpress.com/2009/03/following.png" alt="Following info" width="500" height="200" />[/caption]
<div class="wp-caption alignleft"><img class="size-full wp-image-156" src="http://allacademic.files.wordpress.com/2009/03/following.png" alt="Following info" width="500" height="200" /><p>Following info</p></div>
On the left of your home page, there are links entitled “Following” and “Followers” which take you to a list of people you follow and people who follow you, respectively. On your followers list, you’ll see a tick next to anyone you’re also following, and a follow button next to anyone you’re not. Following people who follow you is good for at least three reasons:
<ol>

View File

@ -30,7 +30,7 @@ Let’s get on with the second part, on some of the conventions that are co
In my previous post, I introduced you to the basic tools of the Twitter trade: messages, followers and searches. But it doesn’t end there. Since its inception, a number of conventions have sprung up which make it much more powerful, but they can be quite confusing to the beginner. You’ll probably have noticed lots of “@this” and “#that” and “RT the other”. This post attempts to explain what all these actually mean.
<h2>
[caption id="attachment_168" align="alignright" width="300" caption="Some replies on Twitter"]<a href="http://twitter.com/replies"><img class="size-medium wp-image-168 " src="http://allacademic.files.wordpress.com/2009/03/twitterreplies.png?w=300" alt="Some replies on Twitter" width="300" height="190" /></a>[/caption]
<div class="wp-caption alignright"><a href="http://twitter.com/replies"><img class="size-medium wp-image-168 " src="http://allacademic.files.wordpress.com/2009/03/twitterreplies.png?w=300" alt="Some replies on Twitter" width="300" height="190" /></a><p>Some replies on Twitter</p></div>
@replies</h2>
This is the most common convention: you can refer to another twitterer in a tweet (and by extension, it seems, anywhere else) by preceding their username with an ‘@’ sign. So in my case, that would be ‘@jezcope’. This is so common, in fact, that it’s been absorbed into Twitter itself. Each mention of @<em>username</em> will be turned into a link to that user’s profile page: this is a very easy way to follow new people.
@ -48,7 +48,7 @@ and I think it's interesting enough to pass on to those of my followers not alre
Many Twitter clients (see tomorrow's post) allow you to do this with a single click.
<h2>
[caption id="attachment_169" align="alignright" width="300" caption="Search results for #ngtip"]<a href="http://search.twitter.com/search?q=%23ngtip09"><img class="size-medium wp-image-169 " src="http://allacademic.files.wordpress.com/2009/03/ngtip.png?w=300" alt="Search results for #ngtip" width="300" height="251" /></a>[/caption]
<div class="wp-caption alignright"><a href="http://search.twitter.com/search?q=%23ngtip09"><img class="size-medium wp-image-169 " src="http://allacademic.files.wordpress.com/2009/03/ngtip.png?w=300" alt="Search results for #ngtip" width="300" height="251" /></a><p>Search results for #ngtip</p></div>
#hashtags</h2>
Tagging is a way of describing an item on the internet, such as a blog post, using single-word descriptions. Someone had the bright idea of tagging tweets using the form #word: it’s then trivial to find everything with this tag using Twitter search. Remember that this is just a convention, and it works simply because putting # on the start of a word makes a unique string of characters that you can search for.

View File

@ -30,7 +30,7 @@ First, an aside. One of the things that makes Twitter so powerful is its Applica
<h2>URL shrinking</h2>
If you’ve been using Twitter for any length of time, you’ve probably used it to pass on the URL (web address) of a web page to your network. In that case, you might have noticed that since URLs can be pretty long, you don’t get much space left to describe what it is you’re actually passing on. This is where URL shrinkers come in.
[caption id="attachment_174" align="alignleft" width="178" caption="A shrunk URL"]<img class="size-full wp-image-174" src="http://allacademic.files.wordpress.com/2009/03/shrunkurl.png" alt="A shrunk URL" width="178" height="53" />[/caption]
<div class="wp-caption alignleft"><img class="size-full wp-image-174" src="http://allacademic.files.wordpress.com/2009/03/shrunkurl.png" alt="A shrunk URL" width="178" height="53" /><p>A shrunk URL</p></div>
Quite simply, a URL shrinker takes your long, unwieldy URL and spits out a nice, short URL which points to the same web page. You can copy-and-paste a URL from your browser’s location bar into the URL shrinker, but most of these services will give you a bookmarklet; a link which you can drag to your browser’s bookmarks/favourites bar which becomes a button to automatically grab the URL, shrink it and copy it to the clipboard ready for use. Look this up in the online help for your URL shrinker, or look for links with titles like “Trim this”.
@ -73,7 +73,7 @@ If you’re really interested in that kind of thing, you might want to look
</ul>
<h2>
[caption id="attachment_175" align="alignright" width="200" caption="Twitter on Facebook"]<img class="size-full wp-image-175" src="http://allacademic.files.wordpress.com/2009/03/twitter-on-facebook.png" alt="Twitter on Facebook" width="200" height="197" />[/caption]
<div class="wp-caption alignright"><img class="size-full wp-image-175" src="http://allacademic.files.wordpress.com/2009/03/twitter-on-facebook.png" alt="Twitter on Facebook" width="200" height="197" /><p>Twitter on Facebook</p></div>
Other social networks</h2>
There are, of course, other social networks out there, and there are a number of ways to get them to play nicely with Twitter. There’s a <a href="http://apps.facebook.com/twitter/">Twitter app</a> for Facebook, which allows you to tweet from within Facebook, and even offers to post each tweet as a status update in your Facebook profile. I don’t use Facebook much these days, but this is an easy way for me to keep it updated.

View File

@ -15,7 +15,7 @@ tags:
- Wikis
wpid: 197
---
[caption id="" align="alignright" width="350" caption="Photo by Pete Ashton"]<a href="http://www.flickr.com/photos/51035602859@N01/814099991"><img class=" " src="http://farm2.static.flickr.com/1235/814099991_1114cdd4a0.jpg" alt="Photo by Pete Ashton" width="350" height="233" /></a>[/caption]
<div class="wp-caption alignright"><a href="http://www.flickr.com/photos/51035602859@N01/814099991"><img class=" " src="http://farm2.static.flickr.com/1235/814099991_1114cdd4a0.jpg" alt="Photo by Pete Ashton" width="350" height="233" /></a><p>Photo by Pete Ashton</p></div>
Do you like having an audience? I know I do: that's at least part of the reason I'm writing this blog post.

View File

@ -20,7 +20,7 @@ On the PCHE course, a major component of the assessment is the portfolio. We hav
I keep my portfolio in digital form, using <a href="http://www.circusponies.com/">Circus Ponies Notebook</a> on my laptop. This works very well for me, as I can type prose considerably quicker than I can write with pen and paper, so I'm able to keep up with my thoughts better. It also means that I can include movies and audio clips: for example, I have done a couple of supervision sessions with other people on the course and recorded the debrief session rather than taking notes. There are still a few physical bits of paper that I have too, primarily handouts from course workshops, but almost all of it is digital.
[caption id="" align="alignleft" width="240" caption="&quot;Files&quot; by S. C. Asher, Flickr"]<a href="http://www.flickr.com/photos/stephanieasher/131012025/"><img src="http://farm1.static.flickr.com/56/131012025_612696397b_m_d.jpg" alt="Files by S. C. Asher, Flickr" width="240" height="180" /></a>[/caption]
<div class="wp-caption alignleft"><a href="http://www.flickr.com/photos/stephanieasher/131012025/"><img src="http://farm1.static.flickr.com/56/131012025_612696397b_m_d.jpg" alt="Files by S. C. Asher, Flickr" width="240" height="180" /></a><p>&quot;Files&quot; by S. C. Asher, Flickr</p></div>
Now, I fully understand the reasoning behind having everyone submit their portfolio on the same day, even if only 3 or 4 will actually be checked by the examiner. If only those requested by the examiner were submitted, how could the examiner know that the rest had even produced a portfolio?

View File

@ -14,7 +14,7 @@ tags:
- uSpace
wpid: 93
---
[caption id="attachment_278" align="alignright" width="300" caption="uSpace home page"]<img class="size-medium wp-image-278" src="http://allacademic.files.wordpress.com/2009/03/uspace.png?w=300" alt="uSpace" width="300" height="127" />[/caption]
<div class="wp-caption alignright"><img class="size-medium wp-image-278" src="http://allacademic.files.wordpress.com/2009/03/uspace.png?w=300" alt="uSpace" width="300" height="127" /><p>uSpace home page</p></div>
If you've read a few of my previous posts, you might have noticed me talking about something called uSpace. This is the University's new social networking platform and I'm pretty excited about it. I've had to keep relatively quiet about it until recently but now it's been launched, here are my thoughts on where I think this is going.<!--more-->I was quite excited to discover, in the middle of last year, that the University was investigating social networking platforms with a view to setting up their own. A whole raft of options were considered, including open-source and proprietary solutions, but CICS eventually decided to go ahead and buy <a href="http://www.jivesoftware.com/">Jive Software</a>'s Clearspace (now known as Jive SBS).

View File

@ -15,7 +15,7 @@ tags:
- Mobile
wpid: 326
---
[caption id="attachment_341" align="alignleft" width="300" caption="Posterous welcome email"]<img src="http://erambler.co.uk/files/2009/09/Posterous-welcome-email-300x266.png" alt="Posterous welcome email" title="Posterous welcome email" width="300" height="266" class="size-medium wp-image-341" />[/caption] Followers of my <a id="aptureLink_SHsCcXosIT" href="http://twitter.com/jezcope">twitter stream</a> will have noticed that over the last few days I've been posting to my <a id="aptureLink_jmqLVqzSiT" href="http://jezcope.posterous.com/">Posterous account</a> from <a id="aptureLink_0eDRxEDYCY" href="http://www.shrewsburyfolkfestival.co.uk/">Shrewsbury Folk Festival</a>.
<div class="wp-caption alignleft"><img src="http://erambler.co.uk/files/2009/09/Posterous-welcome-email-300x266.png" alt="Posterous welcome email" title="Posterous welcome email" width="300" height="266" class="size-medium wp-image-341" /><p>Posterous welcome email</p></div> Followers of my <a id="aptureLink_SHsCcXosIT" href="http://twitter.com/jezcope">twitter stream</a> will have noticed that over the last few days I've been posting to my <a id="aptureLink_jmqLVqzSiT" href="http://jezcope.posterous.com/">Posterous account</a> from <a id="aptureLink_0eDRxEDYCY" href="http://www.shrewsburyfolkfestival.co.uk/">Shrewsbury Folk Festival</a>.
<!--more-->
I first signed up for <a id="aptureLink_26avr2rs1K" href="http://posterous.com/">Posterous</a> after seeing <a id="aptureLink_B9R8eTaLB9" href="http://twitter.com/tamegoeswild">Joseph Tame</a> using it to post photos (though I don't think he has recently). I played briefly then left it alone for a while because, already having a blog, I didn't really see a place for it for me. Then a few months ago I finally got email working properly on my (now fairly dated) Sony-Ericsson phone. Last week, I remembered about Posterous again and thought I'd try it out.

View File

@ -15,7 +15,7 @@ tags:
- Bookmarking
wpid: 406
---
[caption id="" align="alignright" width="180" caption="Margin Notes by Peter Lindberg"]<a href="http://www.flickr.com/photos/plindberg/32809925/"><img alt="Margin Notes by Peter Lindberg" src="http://farm1.static.flickr.com/21/32809925_6b27ccbda6_m.jpg" title="Margin Notes" width="180" height="240" /></a>[/caption]
<div class="wp-caption alignright"><a href="http://www.flickr.com/photos/plindberg/32809925/"><img alt="Margin Notes by Peter Lindberg" src="http://farm1.static.flickr.com/21/32809925_6b27ccbda6_m.jpg" title="Margin Notes" width="180" height="240" /></a><p>Margin Notes by Peter Lindberg</p></div>
For a long time, I've been the sort of person who tends to read and absorb information, without really wanting or needing to scribble notes down. This is probably because my background has been maths and computing, and the elegance of mathematics as a language is in its ability to express big ideas and small in a concise way: no annotation needed if everything you need is there.

View File

@ -12,7 +12,7 @@ tags:
- Professional development
wpid: 393
---
[caption id="" align="alignleft" width="240" caption="Room 800: Police Evidence Room by Sam Teigen"]<a href="http://www.flickr.com/photos/917press/3539927781/"><img alt="Room 800: Police Evidence Room by Sam Teigen" src="http://farm4.static.flickr.com/3332/3539927781_d81fb910b2_m_d.jpg" title="Room 800: Police Evidence Room" width="240" height="178" /></a>[/caption] One of my favourite posts so far has been my [first Ask the Readers post][], so I've decided it's time to continue the series with another request for ideas. I've written before about how I kept a [digital portfolio][] as part of my Postgraduate Certificate in Higher Education qualification. It's something that I learned a lot from, particularly in conjunction with learning about learning, and I've continued the reflective ethos of that portfolio here on the blog.
<div class="wp-caption alignleft"><a href="http://www.flickr.com/photos/917press/3539927781/"><img alt="Room 800: Police Evidence Room by Sam Teigen" src="http://farm4.static.flickr.com/3332/3539927781_d81fb910b2_m_d.jpg" title="Room 800: Police Evidence Room" width="240" height="178" /></a><p>Room 800: Police Evidence Room by Sam Teigen</p></div> One of my favourite posts so far has been my [first Ask the Readers post][], so I've decided it's time to continue the series with another request for ideas. I've written before about how I kept a [digital portfolio][] as part of my Postgraduate Certificate in Higher Education qualification. It's something that I learned a lot from, particularly in conjunction with learning about learning, and I've continued the reflective ethos of that portfolio here on the blog.
[first Ask the Readers post]: http://erambler.co.uk/2009/05/30/ask-the-readers-why-use-technology-in-teaching/
[digital portfolio]: http://erambler.co.uk/2009/07/22/portfolio-assessment-age-computer/

View File

@ -19,7 +19,7 @@ tags:
- Mobile
wpid: 351
---
[caption id="" align="alignleft" width="240" caption="Down House (Darwin&#39;s House) by yours truly"]<a href="http://www.flickr.com/photos/jezcope/3971274879/"><img alt="Down House (Darwins House) by yours truly" src="http://farm4.static.flickr.com/3511/3971274879_003b7d1fcc_m.jpg" title="Down House (Darwins House)" width="240" height="180" /></a>[/caption]
<div class="wp-caption alignleft"><a href="http://www.flickr.com/photos/jezcope/3971274879/"><img alt="Down House (Darwins House) by yours truly" src="http://farm4.static.flickr.com/3511/3971274879_003b7d1fcc_m.jpg" title="Down House (Darwins House)" width="240" height="180" /></a><p>Down House (Darwin&#39;s House) by yours truly</p></div>
Today's blog post was inspired by a trip to [Down House][] in Kent, where Charles Darwin spent the latter years of his life with his wife and family, and where he wrote, amongst many other works, *On the Origin of Species by Means of Natural Selection*.
@ -32,7 +32,7 @@ Audio guides to exhibitions and historical sites aren't particularly new, and I
Although the guide is set up to take you round in a specified order by default, you can also bring up a map, labelled with all the locations that have audio content so that you can skip bits out or make up your own tour of the grounds. After the main narration for each location, given by Andrew Marr in the garden and Sir David Attenborough in the house, there is a menu of other short bits of relevant information, taken from interviews with various experts. We were each able to customise our tour and include only the information we were interested in: very useful when we moved onto the house and time was starting to run a bit short. There is also a small interactive game for each section, which should help to keep the kids entertained.
[caption id="" align="alignright" width="240" caption="L&#39;audioguidage de l&#39;exposition Anselm Kiefer au Grand Palais by Jean-Pierre Dalbéra"]<a href="http://www.flickr.com/photos/dalbera/550975041/"><img alt="Laudioguidage de lexposition Anselm Kiefer au Grand Palais by Jean-Pierre Dalbéra" src="http://farm1.static.flickr.com/248/550975041_0b97c86d01_m.jpg" title="Laudioguidage de lexposition Anselm Kiefer au Grand Palais" width="240" height="180" /></a>[/caption] It's very freeing having a well-written audio guide to an English Heritage property. The best part is that you can look around at whatever is being described without having to constantly shift attention between it and an information plaque. Also having the full-colour screen on the device meant that photos and videos could be shown, which added an extra dimension to the tour.
<div class="wp-caption alignright"><a href="http://www.flickr.com/photos/dalbera/550975041/"><img alt="Laudioguidage de lexposition Anselm Kiefer au Grand Palais by Jean-Pierre Dalbéra" src="http://farm1.static.flickr.com/248/550975041_0b97c86d01_m.jpg" title="Laudioguidage de lexposition Anselm Kiefer au Grand Palais" width="240" height="180" /></a><p>L&#39;audioguidage de l&#39;exposition Anselm Kiefer au Grand Palais by Jean-Pierre Dalbéra</p></div> It's very freeing having a well-written audio guide to an English Heritage property. The best part is that you can look around at whatever is being described without having to constantly shift attention between it and an information plaque. Also having the full-colour screen on the device meant that photos and videos could be shown, which added an extra dimension to the tour.
There were a few minor shortcomings with the guides. The headphone cables were very long and got caught up occasionally. The visual aspects of the guide occasionally felt like they were needlessly distracting from what I was looking at. Also, having an audio guide did dampen down conversation within our little group, but reading text on displays often has the same effect so there probably wasn't much lost. All in all though, it was a very well designed package.

View File

@ -13,7 +13,7 @@ tags:
- Printing
wpid: 549
---
[caption id="" align="alignright" width="240" caption="Photo by orb9220"]<a href="http://www.flickr.com/photos/orb9220/4794069185/"><img alt="Nook Storytelling A New Way 2 of 2" src="http://farm5.static.flickr.com/4135/4794069185_bde57cedd6_m.jpg" title="Nook Storytelling A New Way 2 of 2" width="240" height="161" /></a>[/caption]Last week, in conversation over a cup of tea with a handful of PhD students and the <abbr title="Doctoral Training Centre">DTC</abbr> Co-ordinator, someone remarked on the large quantity of printing that PhD students (and researchers in general) do. It's common to end up with piles and piles of printed articles which have been read only a few times before being "archived".
<div class="wp-caption alignright"><a href="http://www.flickr.com/photos/orb9220/4794069185/"><img alt="Nook Storytelling A New Way 2 of 2" src="http://farm5.static.flickr.com/4135/4794069185_bde57cedd6_m.jpg" title="Nook Storytelling A New Way 2 of 2" width="240" height="161" /></a><p>Photo by orb9220</p></div>Last week, in conversation over a cup of tea with a handful of PhD students and the <abbr title="Doctoral Training Centre">DTC</abbr> Co-ordinator, someone remarked on the large quantity of printing that PhD students (and researchers in general) do. It's common to end up with piles and piles of printed articles which have been read only a few times before being "archived".
Not only is this wasteful, both environmentally and economically, it also means carrying all of those dead-tree documents around if you want to read them out of the office (which most people do).

View File

@ -235,6 +235,22 @@ a.tag {
@extend .pull-right;
}
.wp-caption {
background: $gray-lighter;
border: solid 1px $gray-light;
border-radius: 2px;
padding: 4px;
&.alignright {
@extend .pull-right;
p { text-align: right; }
}
&.alignleft {
@extend .pull-left;
}
}
.video-container {
position: relative;
padding-bottom: 56.25%;