New site with gallery

[velden]

Today launched this site: https://tinyurl.com/o94a82d

Design is from design company mentioned in the footer.

First: content of homepage is NOT editable by editor. This was on request to make it a little cheaper.

I like to show how I created some things in the backend which might be helpful for others. So I will show something about the Gallery (page: Fiesta).

It has 4 different 'layouts' for the pictures which will repeat.
Those 4 'types' each have their own size, position and background.

As the Gallery module only allows for one size per Gallery template I use CGSmartImage (cgsi) to resize the photos.

Because I never used cgsi's aliases before I thought I should try and it works nice and keeps code a little cleaner.

So I set up 4 aliases:

Then I created a template which actually isn't that difficult after all:

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>

Disadvantage of this method is that with many images on one page their will be a lot of 'social share links' (lot of redundant html code). That could be solved with some javascript functions but I didn't have time to make it that way.

Of course those photo's background and positioning etc. is done with css based on the photo-n class of the containing div.

You might have noticed that every single photo can be shared across the social media. To share a photo instead of the page and to have the social media actually display that photo I setup some logic to add the right meta tags.

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}" />

If the ?img=xx url parameter is used it loads a single image from Gallery. The template for that is completely empty. We just want the $image object to get some properties. Plus Gallery is setup to serve images of 600x315 on 'single image requests'

show_off_gallery_single_template_01.jpg (11.56 KiB) Viewed 3830 times

With the properties of the image we setup the metatags which are used by some social media sites to display information (others use informations supplied by url parameters or a combination).

$social_description is set in a Global Content Block with wysiwyg turned of simply by:

Code: Select all

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

In the very top of the page template(s) I just call this GCB which outputs nothing. It only makes some variables available in the template (like the $social_description)

----------------------------------------------

Cms Version: 1.11.11

Installed Modules:

FormBuilder: 0.8.1.1
Gallery: 2.0.1
CGExtensions: 1.45
GBFilePicker: 1.3.3
CGSmartImage: 1.17.1
ListIt2: 1.4.1
ListIt2XDefs: 1.2
ListIt2Amigos: 1.4.1

[elkman]

Nice new site and thank you for the "how to" information. Very helpful!

Elkman