• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: Christian summer sports event website
PostPosted: Wed Jul 25, 2012 8:25 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 28, 2006 9:42 am
Posts: 114
Location: Haarlem - Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Wed Jul 25, 2012 8:33 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12674
Location: Arizona
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/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Wed Jul 25, 2012 8:37 pm 
Offline
Support Guru
Support Guru
User avatar

Joined: Wed Sep 05, 2007 8:03 pm
Posts: 4015
Location: The Netherlands
Great implementation of the Gallery module... 8) Thanks for showing

_________________


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Wed Jul 25, 2012 8:53 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 28, 2006 9:42 am
Posts: 114
Location: Haarlem - Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Thu Jul 26, 2012 5:51 pm 
Offline
Forum Members
Forum Members
User avatar

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Sat Aug 18, 2012 7:31 pm 
Offline
Forum Members
Forum Members

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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Sun Aug 19, 2012 12:29 pm 
Offline
Support Guru
Support Guru
User avatar

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

_________________


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Sun Aug 19, 2012 2:40 pm 
Offline
Forum Members
Forum Members

Joined: Sat Aug 28, 2010 1:03 pm
Posts: 200
And what about inserting "like" in fancybox?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Christian summer sports event website
PostPosted: Mon Sep 24, 2012 7:25 am 
Offline
Forum Members
Forum Members

Joined: Fri Apr 28, 2006 9:42 am
Posts: 114
Location: Haarlem - Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting