Add-ons using the old Twitter API – these will break

Twitter Timeline (First Party) (Free)

EllisLab have deprecated this plugin and won’t be updating it to work with the new API.

TGL Twitter (Free)

Current users can start using the EE Twitter add-on instead which is based on this.

Tweetline (Free)

This plugin broke during the first Twitter blackout test on 5 March. If you were just using it to fetch all tweets from a user, EE Twitter is a good free alternative. If you were using it to filter out mentions/RTs, you’ll need another add-on e.g. CE Tweet.

Add-ons using Twitter API v1.1 – these will work

Click Rain EE Twitter (Free)

Bryan Burgers has updated TGL Twitter to use v1.1 authentication. After contributing minor fixes, I’ve installed this add-on on a few sites already as a replacement for EllisLab’s Twitter Timeline plugin. So far, so good! This add-on just lists all tweets for a user. If you want to show other information from Twitter, look at CE Tweet instead.
EE Twitter on Devot:ee »

CE Tweet v1.3+ (Commercial)

Causing Effect released CE Tweet 1.3 on 18 February 2013 which uses Twitter API v1.1. If you are running an older version, you will need to update to the latest version and set up a Twitter application and enter your authentication keys. CE Tweet provides a lot more functionality than the free EE Twitter add-on.
Visit CE Tweet website »

Twitter API v1.1. options for EE1 sites

I haven’t found any Twitter API v1.1 add-ons compatible with ExpressionEngine 1. Twitter do offer Embedded Timelines, which is an easy copy and paste JavaScript option which will work on any site. However, akin to Facebook’s like box, you can’t control the look and feel.

The post ExpressionEngine® Twitter API v1.1 add-ons appeared first on Janine Dalton.

I found a couple of great tutorials by Justin Long and John Henry on how to implement infinite scrolling in ExpressionEngine which worked a treat for automatic scrolling. There were some snippets for triggering the scrolling by clicking on a link, but they would not work for me. Finally I came across a thread on GitHub which revealed that the Infinite Scroll docs are out of date and you need to use different code to get the manual trigger link working.

So, here’s how I got infinite scrolling with a manual trigger link working in EE:

1. Have a standard channel entries tag with paging in your EE template. You will need to give your next link a class/id, and also have a way of referencing a paging element wrapping this next link, the element for each item you are listing out and a wrapper container element surrounding all the items.

<!--call to infinite scroll will reference this wrapper element (.wrap-list here)-->
<div class="wrap-list">
{exp:channel:entries dynamic="no" channel="work" limit="6" disable="member_data|categories" paginate="bottom"}
<!--when absolute_count equals absolute_results we are at the end, so add end class to use in js callback to hide more link-->
<!--itemSelector option in js will reference item identifier (.list here)-->
<article class="list {if "{absolute_count}" == "{absolute_results}"} end{/if}">
<h2>{title}</h2>
<!--content etc-->
</article>
<!--this closes the items wrapper div (.wrap-list here) so that the view more link will always be below all items listed-->
{if count == total_results}</div>{/if}
{paginate}
<!--navSelector option in js will refer to this element which needs to wrap more link (.actions here)-->
<div class="actions">
{if next_page}
<!--nextSelector option in js will refer to this more link (.next here)-->
<a href="{auto_path}" class="next">View More Items</a>
{/if}
</div> 
{/paginate}

{/exp:channel:entries}

3. Include jquery, the jquery.infinitescroll.min.js and behaviors/manual-trigger.js files in your EE template.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><p>
<script src="/assets/scripts/jquery.infinitescroll.min.js"></script>
<script src="/assets/scripts/manual-trigger.js"></script>

4. Include the following script after the other javascript files:

<script type="text/javascript">
    $(document).ready(function(){
     //#inifinte scroll call - first part is options and second part is callback function
     $('.wrap-list').infinitescroll({
          behavior: 'twitter', //#use manual trigger link, remove behaviour line to revert to automatic scroll
          navSelector : ".actions", //#set to paging element wrapping next link
          nextSelector : "a.next", //#set to next link selector
          itemSelector : ".list", //#set to selector for an item being listed
          loading: {
                finishedMsg: "", //#text you want to appear when you reach the end of the list
                msgText: "Loading more items...", //#text to appear while loading more items
                img: '/assets/images/loading.gif' //#image to display while loading
          },
          extractLink: true //#this line is vital for this to work in EE
      }, 
      function(newElements,data) { 
         //#this callback function is called after each set of items are loaded in
         //#it's used to hide the view more link when we are at the end
         //#in EE template we put a class of end on the last item, so if we find that item, hide the trigger link
         if($('.wrap-list .end').length)
         { 
              $('a.next').remove();
         }
     });

  });
</script> 

With the above code in place, on page load, you should see the first x items with a more link. Each click of the more link should load x more until all items are loaded at which point the more link should vanish.

I haven’t been able to get this working in Internet Explorer 8 or earlier yet. The automatic infinite scrolling works fine in IE8, but the manual trigger part does not. However, you just get standard paging behaviour i.e. clicking the more link the first time loads the standard page 2 URL etc instead of staying on the same page.

The post Infinite Scrolling with Manual Trigger in ExpressionEngine appeared first on Janine Dalton.

At first I thought that this was just happening in Firefox, which seemed crazy as the browser should not affect things like that.
Eventually, I worked out that the problem was due to being logged in to a Google Apps email account in the browser. Once I log out of the Google Apps account, the form works fine. It also works fine if I am logged into a standard Gmail email account rather than a  Google Apps one.
But if I am logged into a Google Apps email account, submitting the form just leads to a 404 error in all browsers.

I have seen several posts on the Feedburner Google group and other sites about similar problems with the email subscription form.

Logging in to Google Apps admin and turning on the Feedburner service fixes the problem for that domain. But Feedburner is off for Google Apps by default, so that’s not a workaround. It seems that Feedburner isn’t getting much love from Google these days, which is a real shame, as it’s a great concept.

The post Feedburner email subscription form 404 errors appeared first on Janine Dalton.

Finally, there is a book available on MODx – it’s about time! MODx is an open source PHP CMS with an awful lot going for it. While gaining in popularity, it’s nowhere near as well known as the likes of Joomla or Drupal. Hopefully, this book is the first of many on the subject and will help raise its profile and encourage more people to give it a go.

I first came across MODx over 3 years ago, when online documentation was somewhat sparse. I could see great potential in it back then, but after using it for a couple of sites, my work changed and I didn’t have a need for it. More recently, I’ve been working on more complex projects where solutions like MODx come into their own. So this book could not have come at a better time for me. With a somewhat hazy recollection of MODx, I wanted to get up to speed on the fundamentals quickly and this book helped.

This book is most suited to those new to MODx and is also appropriate for those new to content management systems in general. The pace is fairly gentle for the most part. The first three chapters (forty pages) just cover a little background and setting up a local web server (XAMPP) and getting MODx up and running.

Next comes 28 pages devoted to templates. This chapter conveys MODx’s ease of templating, one of its major strengths. You have a basic blog up and running by the end of this chapter, without the content getting technical. The book takes the approach of showing you how to get common functionality up and running, without getting bogged down in explaining what the small pieces of code needed mean. The technical details are saved for a few more advanced chapters near the end of the book. This approach frustrated me a little, since as a coder I like to know exactly what everything is doing. However, I can see the merit of this approach for a less technical audience, which is the main market for this book.

The next three chapters (56 pages) cover authentication, content aggregation (the Ditto snippet) and creating lists and navigation (the Wayfinder snippet) respectively. These are the bread and butter of most websites, and the book provides a good grounding in these techniques. Chapter 5 on Authentication and Authorisation is available as a free download from the Packt website.

As an experienced web developer, chapter 8 on snippets was where things started to get a bit more interesting. This is where some of the technical gaps left in previous chapters start to be filled in. The content is still quite accessible, focusing on explaining how to install and use snippets.

Chapter 9 introduces Place Holders Extended or PHx, which was not only new to me, but also my colleague who has built a few MODx sites recently. So, while much of the book caters for newbies, there is the odd nugget in there covering lesser known features or more advanced material.

Chapter 10 brings the focus right back to the practical, covering popular modules for adding common functionality to websites. It looks at the SMF module (for integrating MODx with a SMF forum), the MaxiGallery image gallery snippet, the built in eForm snippet for creating email forms, the WebLoginPE snippet for implementing user profiles and, finally, how to show similar articles using the old reliable Ditto snippet.

Creating Snippets is covered briefly in Chapter 11, and Chapter 13 looks at Plugins and Modules, including how to create a very simple Plugin. These chapters are both just 16 pages long and I would have preferred some more coverage on these areas. This would not be expected from a beginner book, but since it delves into more advanced topics in places, it would have been nice to see a bit more meat to the coverage.

I was delighted to see a chapter devoted to SEO, deployment and security (ch 12); all vital real world areas, but so often neglected, particularly in introductory books. Alas, aside from information on migrating your site to a live server, there is little of note here. Several general SEO guidelines are included, but I feel that the SEO advantages of using MODx relative to other content management systems, which can often cause problems with search engines, would have been more beneficial.

Another gripe is the amount of pages taken up with large excerpts of HTML code, often only differing from previous excerpts by a line or two. Surely this is overkill, even for newbies. The writing also appears somewhat formulaic or clunky in places, but in technical books, that’s less of a failing. I did notice some typos along the way too, which is more unfortunate, but most were fairly obvious.

There is a very strong MODx community, and some excellent tutorials available online. The Coding Pad has a good list of these. While many find it easy to get up and running using these resources, for others, like me, there is no substitute for a good book. Although I don’t get much time to read these days, I have a large collection of computer books.

In this context, I would describe this book as “OK”. It’s not one of those dry, complicated tomes which I never got into. It’s quite an easy read, and gives you confidence about building real websites with MODx, and perhaps even creating your own snippets if needed. On the other hand, it’s not a bible which I will refer to again and again, but that’s not its aim. Overall, while a little clumsy in places, it’s a good introduction to MODx for new users or developers looking for a refresher course.

Disclaimer: Packt Publishing kindly gave me a free copy of this book to review.

The post MODx Web Development Book Review appeared first on Janine Dalton.

Both scripts allow you to add impressive functionality to websites with very little effort. While the built in behaviour of Galleria is often ideal, I had a requirement to integrate lightbox functionality into it recently. I would consider myself a jQuery newbie, so this may not be the most elegant approach, but it seems to do the job on my browsers at least.

Galleria allows you to show a list of thumbnails, along with a larger version of one thumbnail. Clicking a different thumbnail enlarges that image instead. I needed to extend this functionality to give 3 image sizes for some of the gallery images: Clicking a thumbnail would give you a “medium” version, and clicking the medium version would show a larger version again in a lightbox pop-up.

I achieved this as follows:

1. Firstly, I made sure that I had included all the files needed by both Galleria and Slimbox in the head of my page. (The basic usage instructions on both script sites can fill you in on this.)
2. I gave any images in the gallery that needed a large lightbox version a longdesc attribute, setting it to the URL of the large version. (Not ideal semantically I know, but this attribute does expect a URL, and in this case the detailed information about the image is just a bigger, more detailed image, so I can live with that.)
3. Next, I made sure that the clickNext option in my Galleria call was set to false. The clickNext option makes each main gallery image click through to the next to provide an alternative gallery navigation to clicking each thumbnail. However, I need to have some of my main images linking to lightbox pop-ups instead, so I disable this behaviour:

   $('#mygallery').galleria({
   	history   : false,
   	clickNext : false
   });
   

4. Here’s the key step. I used the onImage option in my Galleria call, to specify a function to add the lightbox behaviour:

   $('#mygallery').galleria({
   	history   : false,
   	clickNext : false,
          onImage: function(image,caption,thumb){ 
   		//#check if thumbnail indicates that a large version of this pic is available
   		var large = thumb.attr('longdesc');
   		if(large)
   		{
   			//#if so, link to it and show it in a lightbox
   			image.wrap('<a href="' + large + '"></a>');
   			image.parent('a').slimbox();
   		}
   	}
   });
   

   A sample onImage function is provided in the Galleria advanced demo, which gave me my function outline. The parameters give you access to the thumbnail image, the main image and the image caption, giving you great freedom to extend the functionality. Here, all I want to do is check whether the thumbnail of this main image has a longdesc specified. If so, that means it needs the lightbox effect. So, I wrap a link around the main image, linking to the large version. Finally, I make a call to the Slimbox API to add lightbox functionality to the link I just added. (Note that I first tried just putting rel=”lightbox” in the anchor tag, but this seemed to have no effect. The rel attribute may have some other purpose in the Galleria script which overrides this.)

A few short steps and you’re done. This is the kind of thing that I thought would be a nightmare. For so many years, JavaScript gave me the shudders, but jQuery makes light work of so much. I’m using it increasingly, but still only now and then, with renewed awe each time. Warning: jQuery has been known to cause giddiness and excessive drooling in web developers.

The post jQuery: adding Slimbox lightbox effect to Galleria appeared first on Janine Dalton.

My tray icon turned orange and I kept getting warnings that my protection was not up to date. Attempts to get the latest update failed with the scary and mysterious error message: “Undocumented Serious Error 0x101a”.

On googling for this, the top result is an official Eset knowledge base article which states that the fix is to uninstall and reinstall the Eset software.

Hmmm, I was hoping there was a less drastic solution. Luckily for me there was. I use Windows XP and just went to the Task Manager and in the processes tab, found ekrn.exe (which is the Eset software) and ended the process.

Hey Presto! My system tray icon was turquoise again and on trying to update I was informed that protection was bang up to date. Fingers crossed, it was just a blip, and Eset will go back to quietly doing its job while I hardly know it’s there.

The post How to fix Undocumented Serious Error 0x101a in Eset Smart Security appeared first on Janine Dalton.

Firstly, the current version (1.0) does not work instantly with jQuery 1.3. You get error messages like “Syntax error, unrecognized expression: [@rel=…”. This is easily fixed. You just need to open the Galleria file and replace @rel with rel, since @rel has been deprecated (there are only a few occurrences).

Once I was up and running, I realised that I needed to do something a little bit different with this implementation. On clicking a thumbnail, I wanted to replace the content of an existing div on the page with the large version of that image.

Galleria automatically shows the large main image above your list of thumbnails. Alternatively, you can specify an element to place the large image in by specifying the _insert option:


$('.galleria ul').galleria(
{
insert: '#banner'
}


The only problem was that the div I specified (#banner in the above example) already contained some content. I wanted to replace the content with the large image, but Galleria sensibly appends the large image after any existing HTML in the element.

Another quick change to the Galleria script file seemed to change the behaviour so that the large image container HTML is overwritten instead. In the minified version, just search for _wrapper.empty().append(_img); and add the following line beneath it:


_wrapper.empty().append(_img);
/*add line below to overwrite initial non Galleria markup*/
_wrapper.prevAll().remove();
/*end edit*/
_wrapper.siblings('.caption').text(_thumb.attr('title'));


The post jQuery Galleria: overwriting div content with large image appeared first on Janine Dalton.

But all is not lost! Gaynor has set up a Yahoo! Group for cross stitchers in Ireland called Emerald Isle Cross Stitchers. It is just getting going at the moment, but already I have found out about a cheap online Australian cross stitch magazine, The Gift of Stitching, and great lightweight frames from the US called Q-snaps. So if you are in Ireland, and into cross stitch in any way, pop along and join the group – the more the merrier!

The post Irish cross stitchers group appeared first on Janine Dalton.

I know I slagged off the Movies at Dundrum cinema website a couple of years back, but sadly it still leaves a lot to be desired. However, I must commend them for keeping it up to date and topical, which is more than can be said for this blog. They have even gone all out and created a special Batman theme for the site. The only trouble is that the crude, madcap graffiti that pays homage to the Joker is so authentic, that some people got the impression that the site had been hacked. So, they had to add a message to the top of each page a few days back explaining that “This is a promotion for “THE DARK KNIGHT”, our website has not been hacked and is completely secure. Your Credit Card details are safe as always and we assure you the Joker will not steal your number”. Oh dear! Step away from Microsoft Paint lads, or whatever graphics program helped you create this:

The post The Dark Knight at Dundrum appeared first on Janine Dalton.

As usual, I’m raging that I didn’t think up this get rich quick scheme myself. It’s a gimmick but I love the idea and I dare you to resist buying a word! It’s impossible not to click on a couple of words just to see where you end up. Then you try out a few searches just to see if a word that means something special to you is still available. Then, you find one that is, and silly though it may be, it’s just so cheap to claim your very own word that you’re sold there and then. Genius.

A lot of web dev monkeys got in there before us, so the best I could get was "coders" but since our work site is tidy.ie we had to splurge $4 on "tidy" as well. It has great gift potential too: I couldn’t resist buying "foxy" for my sister, and my boyfriend suggested buying "couple" for us. Aw, who said romance was dead?

The post The Big Word Project = Big Money? appeared first on Janine Dalton.