Christian summer sports event website

Mantlet · **Posted:** Wed Jul 25, 2012 8:25 pm

http://www.sonrisehaarlem.nl/

A total of 23 churches in a region of The Netherlands organize a yearly sports event. In 14 neighbourhoods in different towns kids get free sports clinics and other fun things to do during the summer holiday.

After 10 years the site could really use a facelift, which we combined with a new CMS. Off course, deciding which CMS it would be, was an easy task.

Every neighbourhood has a unique login so they can upload their own photo's. Jos build a beautifull upgrade for the Gallery module to allow us to assign them rights per Gallery folder. In less then 3 days over 4000 foto's have been uploaded. They have been viewed over 26.000 times up until tuesday.
Every photo can be liked uniquely on facebook, with matching thumbnail in the facebook timeline. The photo is opening in fancybox when the link is clicked from facebook.

It runs CMSMS 1.10.3 with the following modules:

CGSimpleSmarty: 1.5.1
CGExtensions: 1.29.1
CGGoogleMaps: 2.3.1
JQueryTools: 1.1
youtubeplayer: 1.3.1
Gallery: 1.6
CGFBApp: 1.0.7
CGSmartImage: 1.9
CompanyDirectory: 1.14.2
CGContentUtils: 1.3.2
SiteMapMadeSimple: 1.2.6

Let me know what you think. And a big thank you to Jos, calguy, Ted and the other developers for letting us use such a great and easy CMS.

Dr.CSS · **Posted:** Wed Jul 25, 2012 8:33 pm

Nice looking...

But, this is not allowed in <head> of site, and you may want to look at the other invalid html...

<div id="fb-root"></div>

Jos · **Posted:** Wed Jul 25, 2012 8:37 pm

Great implementation of the Gallery module...

Thanks for showing

Mantlet · **Posted:** Wed Jul 25, 2012 8:53 pm

Dr.CSS \Dr.CSS:

Nice looking...

But, this is not allowed in <head> of site, and you may want to look at the other invalid html...

<div id="fb-root"></div>

Thanks Doc ;-)

I hadn't noticed the facebook init created a code not allowed in the head of the document. Moved it down a couple of lines into the body.

The errors remaining are due to some inline javascript, facebooks own additions to HTML and the image rotator tag.

I can only download version 1.6 of the image rotator in the forge. There seems to be a 1.7 version that cures the double ID problem. However that is not available in the forge and the link in the forum is no longer valid.

I've asked if someone could get me a copy, but with no luck so far.

andre_designer · **Posted:** Thu Jul 26, 2012 5:51 pm

Nice clean site!! like this kind site. Spacious, not to busy. Nice header. I mean nice photos. good choice
.
The only personal critical note that have is choose by the sub-gallery not the standard cover but choose one of the images out the sub-gallery as album-cover. You can do this by mark one of the images as album cover.

Personly i 'am not a fan of the standard sub-gallery cover.
I choose always one of the images out the sub-gallery.
But yep, thats me!! You are of course free to do what you want.

seregarem · **Joined:** Sat Aug 28, 2010 1:03 pm **Posts:** 200

Mantlet, could you tell me how to insert "like" in fancybox and how did you create an ability of uploading photos by site users?

Jos · **Posted:** Sun Aug 19, 2012 12:29 pm

seregarem \seregarem:

how did you create an ability of uploading photos by site users?

Users have access to the backend, but only for uploading photos to a specific subgallery they have permissions for.

seregarem · **Joined:** Sat Aug 28, 2010 1:03 pm **Posts:** 200

And what about inserting "like" in fancybox?

Mantlet · **Posted:** Mon Sep 24, 2012 7:25 am

seregarem \seregarem:

And what about inserting "like" in fancybox?

Sorry for the delay. I was enjoying a nice long holiday. But here it is. The code used for the like button.

I don't want to call myself anything near of a programmer. So I hope I can somewhat clearly explain what I meshed together here.

You have to use an iframe version of the code. The newer versions of the facebook buttons don't like to be executed through javascript. I used the default FancyBox theme and changed the following:

In the gallery Template Source this is my foreach for the images:

\$1:

{foreach from=$images item=image}
   <div class="img">
   {if $image->isdir}
      <a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
      {$image->titlename}
   {else}
   <a class="group {$image->fileid}" href="{CGSmartImage src=$image->file|escape:'url'|replace:'%2F':'/' filter_resize='h,600' notag=1 noembed=1}" title="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="gallery-{$galleryid}" id={$image->fileid}><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
   {/if}
   </div>
{/foreach}

The Template Javascript:

\$1:

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {

$("a.group").each(function() {
    var element = this;
    $(this).fancybox({
      'titleFormat' : function() {
var likeurl = encodeURI(location.protocol + '//' + location.host + location.pathname + '?foto=' + element.id);
var origineelurl = element.title;
            return '<span id="fancybox-title-over"><__iframe src="http://www.hyves.nl/respect/button?url=' + likeurl + '&counterStyle=horizontal" style="border: none; overflow:hidden; width:120px; height:80px;" scrolling="no" frameborder="0" allowTransparency="true" ></__iframe><__iframe src="//www.facebook.com/plugins/like.php?href=' + likeurl + '&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:80px;" allowTransparency="true"></__iframe><a href="' + origineelurl + '" target="_blank">Originele grootte</a></span>';
        },
      'speedIn': 300,
      'speedOut':   300,
      'overlayColor': '#000',
      'overlayOpacity': 0.3,
      'titlePosition': 'over',
      'centerOnScroll': true,
      'onComplete':function(){_gaq.push(['_trackEvent','Fotoalbums','Foto-bekijken', this.title]);}
    });
});


});

var hash = window.location.search.substring(6);

$(document).ready(function() {
$("a."+ hash).trigger("click");
});


</__script>

The above makes sure the buttons appear. The url adds a var at the end of the URL: '?foto=' + element.id
This element.id is the unique number of the image in the Gallery database. So each like button links to a unique URL with the image number in it.
If this var is in an URL, this triggers the last lines of code. So a click from facebook automatically opens the liked photo in the Fancybox frame. If you want to change the 'foto' text in the URL, make sure you also change the substring(6) count to match the length of your var name.

As last addition, I added some additional META data to URL's with that var. In the page header I added the following code that also checks if the var is available:

\$1:

{if $smarty.get.foto != ''}
{capture assign=wijknaamlengte}{$cgsimple->self_url()|strpos:"/":36}{/capture}
{math equation="x - y" x=$wijknaamlengte y=36 assign=wijknaamlengte}
<meta property="og:title" content="Foto van Sonrise {$cgsimple->self_url()|substr:36:$wijknaamlengte|capitalize}" />
<meta property="og:type" content="sport" />
<meta property="og:url" content="{$cgsimple->self_url()}" />
<meta property="og:image" content="http://www.sonrisehaarlem.nl/uploads/images/GalleryThumbs/{$smarty.get.foto}-1.jpg" />
<meta property="og:site_name" content="Sonrise Haarlem" />
<meta property="og:description" content="De Sonrise sportweek in Haarlem wordt gehouden van 23 t/m 27 juli op 12 locaties. Bekijk hier de foto's en volg de verhalen." />
<meta property="fb:admins" content="1229648146" />
{/if}

Again, if you change the name of the var, change the top line here: $smarty.get.foto

The math and equations are intended to get the album name from the URL and work that into the META data. The one important META tag here is og:image. This links to the thumb of the image. If facebook reads this META data, the image it shows in the timeline is the thumb of the actual image someone liked.

Christian summer sports event website

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Who is online