Christian summer sports event website

Post links to sites running CMS in all its glory.
Post Reply
Mantlet
Forum Members
Forum Members
Posts: 114
Joined: Fri Apr 28, 2006 9:42 am
Location: Haarlem - Netherlands

Christian summer sports event website

Post by Mantlet »

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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12675
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Christian summer sports event website

Post by 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>
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image
Jos
Support Guru
Support Guru
Posts: 4016
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Christian summer sports event website

Post by Jos »

Great implementation of the Gallery module... 8) Thanks for showing
Mantlet
Forum Members
Forum Members
Posts: 114
Joined: Fri Apr 28, 2006 9:42 am
Location: Haarlem - Netherlands

Re: Christian summer sports event website

Post by Mantlet »

Dr.CSS wrote: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
Forum Members
Forum Members
Posts: 233
Joined: Sat Apr 10, 2010 4:26 am
Location: Gorinchem

Re: Christian summer sports event website

Post by andre_designer »

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
Forum Members
Forum Members
Posts: 200
Joined: Sat Aug 28, 2010 1:03 pm

Re: Christian summer sports event website

Post by seregarem »

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
Support Guru
Support Guru
Posts: 4016
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Christian summer sports event website

Post by Jos »

seregarem wrote: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
Forum Members
Forum Members
Posts: 200
Joined: Sat Aug 28, 2010 1:03 pm

Re: Christian summer sports event website

Post by seregarem »

And what about inserting "like" in fancybox?
Mantlet
Forum Members
Forum Members
Posts: 114
Joined: Fri Apr 28, 2006 9:42 am
Location: Haarlem - Netherlands

Re: Christian summer sports event website

Post by Mantlet »

seregarem wrote: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:

Code: Select all

{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:

Code: Select all

<__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 + '&send=false&layout=button_count&width=150&show_faces=false&action=like&colorscheme=dark&font&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:

Code: Select all

{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.
Post Reply

Return to “CMS Show Off”