CMS Made Simple Forums

Code: Select all

{* assign this pages url to variable so we don't have to call it on every iteration while it doesn't change *}
{cms_selflink href=$page_alias assign='thispageurl'}
{* urlencode the url *}
{$thispageurl=$thispageurl|escape:'url'}

<div id="photo-gallery" class="group center">
{foreach from=$images item=image}

{* There are 4 photo types. We could use the modulo operator on the foreach loop but as I need the number itself anyway I'm gonna use the smarty cycle tag *}
{cycle values='1,2,3,4' assign='ptype'}

{* aliases are used for the different settings per photo type to be used with CGSmartImage. Four aliases are created in CGSmartImage settings: alias_1, alias_2, alias_3 and alias_4 *}
{$alias = 'alias_'|cat:$ptype}

{* every div containing a photo type has its own class: photo-1, photo-2, photo-3 or photo-4 *}
<div id="image-{$image->fileid}" class="photo photo-{$ptype}">

  {* resize the photos according to settings of alias for this photo type *}
  {CGSmartImage src=$image->file alias1=$alias noembed=1 alt=$image->title}
 
  <div class="photo-caption">
	  <div class="photo-caption-text">{$image->title}</div>
	  <div class="photo-social group">
{* social share stuff *}
<ul class="group">

{* facebook *}
<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={$thispageurl}%3Fimg%3D{$image->fileid}" target="_blank"><i></i></a></li>

{* twitter *}
<li class="twitter"><a href="https://twitter.com/home?status={$image->title|escape:'url'}%0A{$thispageurl}%3Fimg%3D{$image->fileid}" target="_blank"><i></i></a></li>

{* linkedin *}
<li class="linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url={$thispageurl}%3Fimg%3D{$image->fileid}&title={$image->title|escape:'url'}&source={sitename|escape:'url'}" target="_blank"><i></i></a></li>

{* google plus *}
<li class="google"><a href="https://plus.google.com/share?url={$thispageurl}%3Fimg%3D{$image->fileid}" target="_blank"><i></i></a></li>

{* pinterest *}
<li class="pinterest"><a href="http://pinterest.com/pin/create/button/?url={$thispageurl}%3Fimg%3D{$image->fileid}&media={root_url|escape:'url'}%2F{$image->file|escape:'url'}&description={$image->title|escape:'url'}" target="_blank"><i></i></a></li>
</ul>
	  </div>
  </div>
</div>
{/foreach}
</div>

Code: Select all

{* conditional settings in case called with gallery image parameter *}
{if $smarty.get.img}
<__script__>location.href="#image-{$smarty.get.img}"</__script>
{* call gallery single image so we get IMAGE object *}
{Gallery img=$smarty.get.img}
{$og_image=$image->thumb}
{if !empty($image->title)}{$og_title=$image->title}{else}{$og_title=$title}{/if}
{$og_description=$image->title}
{capture assign='og_url'}{cms_selflink href=$page_alias}?img={$smarty.get.img}{/capture}

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="{sitename}" />
<meta name="twitter:title" content="{$og_title}" />
<meta name="twitter:image" content="{root_url}/{$image->file}" />
<meta name="twitter:url" content="{$og_url}" />
{else}
{$og_url={cms_selflink href=$page_alias}}
{$og_image="static/img/wn_facebook.png"}
{$og_title=$title}
{$og_description=$social_description}
{/if}

<meta property="og:image" content="{root_url}/{$og_image}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{$og_url}" />
<meta property="og:site_name" content="{sitename}" />
<meta property="og:locale" content="nl_NL" />
<meta property="og:description" content="{$og_description}" />
<meta property="og:title" content="{$og_title}" />

Code: Select all

{$social_description = 'Some very interesting, short text I want to share with all my social media friends.'}