Adding images to the blogger template

It's pretty easy to add images to a blogger post, but apparently tricky to add the them to a template. Actually, it's easy to add the image once you know where blogger stores it, just use the img element. But finding where blogger stores the image is a two step process.

1. Start a new post.


2. Click on the Add Image button.


3. Browse and find the image on your computer.


4. Click the Upload button


5. Switch the Edit Html view in the editor. (Look in the upper right hand corner.)


6. Adding the image will actually add some code that looks similar, but not exactly, like this;
   
   

   
   <a href="http://4.bp.blogspot.com/_vi8HfoevOdc/SHqd35vYMiI/AAAAAAAAAC4/yylR4tmAif8/s1600-h/delicious_32x32.png">
   <img id="BLOGGER_PHOTO_ID_5222660301607416354" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt=""
   src="http://4.bp.blogspot.com/_vi8HfoevOdc/SHqd35vYMiI/AAAAAAAAAC4/yylR4tmAif8/s320/delicious_32x32.png" 
   border="0" /></a>
   

   
   Look in the img tag, and find the src attribute. (Bold in the example). This is the path where your image is stored.
   



7. You can then cut/copy this URL and add it to an img tag in the blogger template.
   

Adding the talkr link to a blogger template

Talkr is a cool service that automates the podcasting of your blog. There are a few alternatives (scroll down the page if you follow the link) you might want to check out, as most of the talkr stuff seems to be more than a year old. I don't know if this indicates anything about their general health ... Two Three more things that raises my suspicion are:

1. Their web site has the code for linking into the old blogger, but the code for adding their code into the new blogger templates doesn't work. It looks like a lot of people are asking about it, but no one has published an answer (until now ... look at my solution)



2. Their example code has a link to an image that is no longer available. I fixed this by making my own copy, you can grab one if you want.


3. And ... the owner put talkr up for sale last year. So it looks like it may be on it's way out.

Hopefully talkr is healthy and will stay around, because it took me a couple of hours to figure out how to add a link to my template.

So here's what I'm sure you really want to see, the way to add talkr to your blogger (blogspot) template. This is the code that I have working on this blog and the steps for adding it. (Disclaimer - The process is straightforward if you understand XHTML, CSS and XML; but probably total mumbo jumbo if you don't. If you don't understand it then you probably don't want to attempt it. Please don't post any comments asking for help or asking me to debug your template. Sorry, but I won't be around to respond. You'll either get it or you won't. If you don't then my suggestion would be to invest some time and learn XHTML, CSS and XML. )

1. If necessary log into your blogger account, go to the dashboard, and then go to the Manage: Layout page.



2. Click the Edit HTML tab link to open your template in the HTML editor.



3. Check the Expand Widget Templates box to expand the widget code.



4. Before you make any changes I suggest you save a backup copy of your template by clicking the Download Full Template link.



5. In the editing window, scroll way down past all of the CSS stuff. You're looking for a place to put the talkr link in the template. I put mine just after the header line for each post. My template already had a div for this with the class of post-header-line-1. It didn't have an id, just the class. It was just before the div that holds the post content, which has the class "post-body entry-content". (Hopefully that makes sense, because if it doesn't then I'm assuming that you don't know much about HTML/XHTML/CSS/XML and the code looks like a jungle of garbage to you.) You can look for this code, but again your template might be different than mine.
   

     <div class='post-header-line-1' />
     <div class='post-body'>
         <data:post.body/>
   
   




6. Change the first div <div class='post-header-line-1' />
   so that it can hold some content. Change the end /> to just >,
   then add a < /div>You should now have
   

   
     <div class='post-header-line-1' >
     </div>
   
     <div class='post-body'>
         <data:post.body/>




6. Copy and paste the following code into the div, between the div start and close tags. (Note that the entire href should be a single line, it looks like multiple lines here because the window is narrow.)
   

   
   <a expr:href='&quot;http://www.talkr.com/app/fetch.app?feed_id=48184&amp;perma_link=&quot; + data:post.url '>
       Listen to this article
   </a>
   
   

   
   
   you should end up with the following:
   
   

   
     <div class='post-header-line-1' >
       <a expr:href='&quot;http://www.talkr.com/app/fetch.app?feed_id=48184&amp;perma_link=&quot; + data:post.url '>
       Listen to this article
       </a>
   
     </div>
   
     <div class='post-body'>
         <data:post.body/>



7. That's it. Save the template and test it out. But make sure you save it and test it, don't test it in a preview window as the link won't work. If it doesn't work, reload the template code you saved above. (You did save a copy, didn't you?!?).
   

Here's a brief explanation of what this code does. Hopefully you know that the
<a href='URL' > is used to add a link. The tricky part here is to build a URL from 2 pieces. The first piece is the link to talkr. They give you this for blogger, it's the

http://www.talkr.com/app/fetch.app?feed_id=48184&perma_link=
section of the href.

You need to add the URL to each post, but since each post has a different URL you have to find the variable that blogger uses to hold the URL for each specific post. In the old blogger code the variable was <$BlogItemPermalinkURL$> But this doesn't work in the new blogger templates. And again, this is what worries me a little about talkr since they still have this on their web site.

In the new blogger templates, you use data:post.url Blogger kind of tells you this in some of their documentation, but they get it wrong too, as they use posts instead of post.

The last step is to get the two pieces together, the fixed string piece and the variable. This took me awhile to figure out as I couldn't find anything but basic documentation on the elements in the new blogger schemas. But I snooped around the blogger template code and finally got it. In the blogger templates, and in the case of an href, you use expr:href=' "string1" + "string2" ' to combine two strings and have them end up in the href attribute. Note the alternating quotes. Since we're combining 1 string with a variable, we use expr:href=' "string1" + var '

Somewhere in all of the processing, the inner double quotes get messed up unless you use the XML symbol for them, which is " So the expression becomes expr:href=' " string1 " + var '

Now, it almost works if you substitute the talkr URL
http://www.talkr.com/app/fetch.app?feed_id=48184&perma_link=
for string1 and

data:post.url
for var The last thing to fix is the & in the URL. It gets messed up somewhere in the processing too, so you need to substitute the XML symbol &amp;

Technically speaking my explanation isn't exactly complete but I'm trying to keep it brief, so please don't nitpick me to death. Just go have fun with your templates and blogs.

Ideas for new Web 2.0 Classes

1. I just saw this post about college classes on Search Engine Optimization What a great idea!

2. And then there's all the blogging stuff:
a. Starting a blog
b. Customization
c. Adding images
d. Adding a podcast
e. Feedburner
f. Technorati

Web 2.0 Grant Proposal - the generic version

Last week my brother Gus and I took a quick trip to Monterrey Mexico so I could race in the ITU Aquathlon World Championships, or Campeon del Mundo. The entire trip verged on the surreal, being in a world championship race, trying to communicate on 100 words of Spanish, and all of the sitting still while travelling at 400 MPH. Some things were way over the bizarre redline, the Mexican sushi, sharing a taxi with the coach of the Mexican National Triathlon Team and flying through a lightning storm in a commuter airplane.

But, we had an excess of hangin' out time ... and Gus helped me build a "short" generic proposal for a Web 2.0 grant by culling through all the writing I've already done and a little more scribbling and hand waving. That Gus is so smart. Yeah, I know he let me torture him with 4 days of travel and mystery, but he really is smart.

Anyway ... here's the first draft of the proposal.


Web 2.0 Grant Proposal

Tony Sako
Ass. Prof. Computer Science
Columbia Basin College
July 2, 2008

Even though the name Web 2.0 may make you think that it’s a new version of the web, it isn’t really a new technology. It a term used to define web sites that allow users to add content without having to know how to code in HTML. These sites have been growing in number, and they have allowed for a huge increase in amount of information added to the web.

Web 2.0 sites are often broken into categories depending on the type of function or service they offer. For example, there are blog sites that allow an individual to keep a personal log, and other users to add comments to the log entries. There are also wikis, which build silos of information by allowing multiple users to add, edit and annotate information. Wikipedia and Wikiversity are famous examples of wikis. There are also
media sharing sites (images, videocasts, podcasts, screencasts etc.) such as Flickr and YouTube; social networks such as MySpace and FaceBook, social bookmarking sites such as Del.icio.us or Digg; cloud computing sites such as Office Live or Google Docs; virtual worlds such as Second Life, and mashups that combine the functionality of more than one site.

The students graduating from high-school have been called the Millennial Generation, but a better name may be “The Young & The Wireless” as they have never known a life without the web, and they are very much accustomed to using Web 2.0 sites. They instant message, they belong to social networks, they blog and add videos to YouTube. They not only do these things, they take them for granted. They’ve never known a life without the web, cell phones or Starbucks. Several studies have shown they take it’s availability for granted, see it as a vehicle for self-expression, and expect others to use their content.

Web 2.0 and the technical aptitude, attitudes and habits of the Millennials present educators with some outstanding opportunities and a few challenges. For example, one of the criticisms of the industrial age class model is that there is very limited discussion. Due to time constraints a typical class will consist of an instructor lecture(s), followed by limited discussion and then some assessment activities. A Web 2.0 enhanced class (called Education 2.0 or the digital classroom) makes it easy to have online discussions through blogs. This allows classes to expand discussion time and move towards a more cyber-Socratic, discussion based classroom; and away from the industrial age classroom model

One of the challenges of Web 2.0 in education is to ensure that industrial age classes aren’t simply moved to the web. For example, Stanford has made podcasts of some of it’s lectures. While the lectures are interesting the podcasts simply show a talking head along with whatever slides were included in the lecture. There is even less discussion than in a normal classroom, so in some sense it’s even worse than the typical industrial age classroom.

Stanford could make this into a great Web 2.0 experience for it’s students by allowing them to edit the video and add supplemental graphics and text. While the end result should be a better video, the thing to remember is that the video itself isn’t the important thing. The important thing is that the students will have participated in the creation of the video. And, this participation will surely enhance their understanding of the subject. Contrast how much a student would have to understand the content of a lecture to make it better as opposed to how much a student would comprehend by simply watching a lecture.

A well designed Web 2.0 class would be very much like a well designed traditional class, where the more students participate the more they gain. The difference is in the additional opportunities for participation. In addition to participating in classroom discussions and assignments students can keep their own blogs, build their own wikis or create their own podcasts and videos.

Web 2.0 presents CBC two huge opportunities. The first is to add Web 2.0 to traditional classes to enhance student learning and move towards a more Socratic classroom. There are already a few instructors at CBC who have started using some of the features of Web 2.0 in the classroom. But without some guidance these early adopters are in danger of falling into the trap of creating their own blogs, or making podcasts or screencasts of their lectures; and failing to allow their students to participate in the creation of content.

The second opportunity for CBC is to build on it’s excellent start in online education. Blogs, wikis, media sharing and cloud computing will enhance student learning in any class, online or in class. In addition, Web 2.0 makes it easy to add content to the web, so there are many new educational resources such as Wikiversity or the Stanford podcasts available on the Internet. With some guidance, Web 2.0 could be an enhancement to any and all of CBC’s online classes.

Another way that Web 2.0 may affect online education at CBC is in respect to WebCT, our Virtual Learning Environment (VLE) (also known as a Course Management System (CMS)). While WebCT has proven to be a valuable tool, it has a few shortcomings that may be addressed by the movement towards an open source VLE such as moodle. In addition, an open source VLE may provide a better path to the future than a proprietary tool such WebCT. The new open source modules for moodle are available free as opposed to having to pay updates or maintenance for a proprietary program such as WebCT. And, new course material is developed in an open XML format, which makes it much easier for instructors to share course information. I believe it would be worth while for someone at CBC to investigate the VLE situation.

Since Web 2.0 is Internet based, it also presents tremendous opportunity for sharing and teaming with local K-12 districts, colleges and universities worldwide, and local for profit and non-profit organizations. Web 2.0 allows anyone in any of these groups to add content, which means experts from around the local community to experts from the world can add to course content. And since the course material is hosted on the Internet it can be easily be shared. The same course material can be used by students in a K-12 class, a college class; or even for training purposes by employees in industry. Web 2.0 has the potential to erase the lines between different educational institutions and allow delivery of world class material to anyone that wants to participate. This would be tremendous step towards meeting the truly seamless educational vision developed by Rich Cummins and Lee Thornton for the Tri-Cities community.

Web 2.0 also presents opportunities for CBC outside of the classroom. Social networks can be used for recruiting and delivering information to prospective students. Social networks can also be used to stay in contact with alumni, and allow them to stay in contact with each other. This would be a great communication tool for the Foundation in it’s fund raising efforts.

As mentioned above, there are also some challenges, decisions and issues that should be addressed when implementing Web 2.0 in education. For example, how do we know if adding Web 2.0 is actually helping our students meet their educational and life goals? There should be some assessment using objective metrics to answer these questions.

There are also at least two legal issues that must be addressed. The first is ensuring that any online communities we host or participate follow the same rules as our real world society. That means protecting individuals from harassment and bullying; or unwanted sexual advances, especially in the case of minors. This can be addressed with policies, but there must also be some way to ensure that the policies are enforced. The second is ensuring that all of our content is accessible. Podcasts and videos should have text based equivalents, and blogs or other text based content should have audio equivalents. Some of this can be addressed with more automation, for example you can make a link from a blog to a site that will read the text. We just need to ensure that this link is included in all our text pages.

There is also a set of intertwined issues, the question of Intellectual Property (IP) (who owns the content) and using a hosted service or hosting our own. If you add content to a hosted service such as Wikipedia or Facebook, then they own the content. This is satisfactory as long as they stay in business and offer free access; but what happens if they decide to charge for access or go out of business? In some cases this can be solved by hosting our own service, for example there is free wiki software or free social networking software we can run on our own computers. However, having our own service has the obvious tradeoff that it’s not as visible as the major services. How many people would know to use the CBC wiki or even know that it exists as opposed to Wikipedia?

I’d like to propose seeking grant based funds to help guide CBC in the testing, implementation and assessment of the various Web 2.0 tools, starting with our students and classes but eventually including the local K12 districts, other state colleges and universities and local businesses. These funds should also support the resolving real and potential issues, and developing policies and guidelines for Web 2.0 use by CBC students and faculty, and the community at large.