Cool 3D Slider with News or Gallery Module

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
uniqu3

Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

I have seen many Wordpress Templates using Flash 3D sliders like Cu3er or Piecemaker, so i though i would try integrating this in CMSMS.
My first though was "wow cool ill go create a module" well it was just a thought, at the moment i am to stupid and need to go through CMSMS API  :)
But still i have tried to use other ways available in CMSMS, as the system is so versatile and in combination with right moudles you can create whatever you want.

Before we continue you maybe some of you wonder what Piecemaker or Cu3er is, it's XML driven flash Slider with 3D effect, you can see it in action on Developer pages, please note i am not Flash fan, but for now i don't know any possible way to recreate an effect like this and if it could even be possible with combination of HTML5, CSS3 and some JS Framework it for sure wouldn't work on all current browser.
Piecemaker (opensource): http://www.modularweb.net/piecemaker/
Cu3er (was opensource before): http://getcu3er.com/

So let's start with News module.
As first you can see Demo here: http://demo.i-arts.eu/piecemaker

We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
News 2.10.6
CGExtensions 1.19.5
CGFeedMaker 1.0.11
SuperSizer Plugin 0.94

Step 1

First open one of the .fla files from the downloaded package of Piecemaker in Flash CS4 or CS5 (CS3 doesn't support the 3D engine) . You can take piecemaker.fla for effect with shadow or piecemakerNoShadow.fla for effect without shadow.
Whe you open the .fla file Falsh "Actions" (i am using German version but it should be in "Windows -> Actions") and replace this code:

Code: Select all

 stage.scaleMode = StageScaleMode.NO_SCALE; piecemaker.xmlSource = "piecemakerXML.xml"; piecemaker.cssSource = "piecemakerCSS.css"; piecemaker.imageSource = "images"; piecemaker.dispatchEvent(new Event("properties"));

trace ("Thank you for downloading The Piecemaker 3D image rotator gallery by \nmodularweb. Find all information about the gallery on the official website \nhttp://www.modularweb.net/piecemaker.\n\nThe Piecemaker is brought to you by modularweb and Activetuts+. \nmodularweb is a framework for creating premium Flash websites based on \nmodular elements. The Piecemaker is just one of these elements. If you'd \nlike to use the whole framework or work with us in general, please contact \nus at welcome@modularweb.net.\n\nMore information: http://www.modularweb.net\nMore elements: http://www.modularweb.net/elementbox\n\nTO REMOVE THIS MESSAGE, DELETE LINE 8 OF THE CODE!")
with this code:

Code: Select all

stage.scaleMode = StageScaleMode.NO_SCALE; var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters; piecemaker.xmlSource = String(allFlashVars.xmlSource); piecemaker.cssSource = String(allFlashVars.cssSource); piecemaker.imageSource = String(allFlashVars.imageSource); piecemaker.dispatchEvent(new Event("properties"));
 function shadowSize (e:Event) { shadowMC.width =  piecemaker.imageWidth * 1.1; shadowMC.x = piecemaker.x - shadowMC.width / 2; shadowMC.y = piecemaker.y + piecemaker.imageHeight * 0.35; } 
}
Step 2

Now save the file and export, if you don't have Flash CS4 or CS5 you can download edited files from my example page http://demo.i-arts.eu/piecemaker

Now create a folder for example i used name "piecemaker" and place .swf files, the swfObject folder with containing files and piecemakerCSS.css in this folder, upload the folder to CMS Made Simple /uploads folder.

Step 3

As next we move on to News Module. For this we will create news Summary Template (i named it "Piecemaker" as following:

Code: Select all

 <div id="flashcontent">
<p>You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p>
</div>
{literal}
<div id="flashcontent">
<p>You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p>
</div>{literal}
<__script__ type="text/javascript">

		var flashvars = {};
		flashvars.xmlSource = "{/literal}{root_url}{literal}/feeds/piecemaker";
		flashvars.cssSource = "{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerCSS.css";
		flashvars.imageSource = "{/literal}{root_url}{literal}/";
		var attributes = {};
		attributes.wmode = "transparent";
		swfobject.embedSWF("{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerShadow.swf", "flashcontent", "960", "610", "10", "{/literal}{root_url}{literal}/uploads/piecemaker/swfobject/expressInstall.swf", flashvars, attributes);
 
			{/literal}
Step 4

We also need "Extra Field" for image upload, name it for example "sliderimage", select "File" from dropdown and tick checkbox for "Public".

The summarytemplate doesn't do much but embeds the Flash player and parameters we need, to make it work we also need swfobject.js which we uploaded with "piecmaker" folder so we will also need to edit our page Template.
We simply include the script either in part of the template or before tag:

Code: Select all

<__script__ type="text/javascript" src="http://www.yourdomain.com/uploads/piecemaker/swfobject/swfobject.js">
Step 5

Now we need XML file that will include our News entries and images, for this we go to CGFeedMaker module under "Extensions -> Calguys Feed Maker" and create new Feed.
In our Summary template we already have a call to this feed.

Code: Select all

flashvars.xmlSource = "{/literal}{root_url}{literal}/feeds/piecemaker";
So we will name our Feed "piecemaker" as you can see above. (please note that i used "mod_rewrite" for my demo page!)

And this is the Template we are going to use for "piecemaker" feed:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Settings>
    <imageWidth>450</imageWidth>
    <imageHeight>200</imageHeight>
    <segments>12</segments>
    <tweenTime>1.7</tweenTime>
    <tweenDelay>0.1</tweenDelay>
    <tweenType>easeInOutBack</tweenType>
    <zDistance>0</zDistance>
    <expand>20</expand>
    <innerColor>0x111111</innerColor>
    <textBackground>0x0064C8</textBackground>
    <shadowDarkness>60</shadowDarkness>
    <textDistance>25</textDistance>
    <autoplay>12</autoplay>
  </Settings>
  {news assign='junk'}
  {foreach from=$items item='entry'}
{assign var=id value=$entry->id}
{assign var=image value=$entry->nimage}
<Image Filename="{supersizer path=uploads/news/id$id/$image width=450  height=200 unique='true' overwrite='true' url='true'}">
    <Text>
      <headline>{$entry->title|cms_html_entity_decode}</headline>
      <break>Ӂ</break>
      {capture assign='description'}{if !empty($entry->summary)}{$entry->summary}{else}{$entry->content}{/if}{/capture}
      <paragraph>{$description|trim|strip_tags|summarize:40}
<break>Ӂ</break>{$entry->morelink}</paragraph>
      <break>Ӂ</break>
    </Text>
  </Image>
  {/foreach}
</Piecemaker>
You can use the part XML template and change parameters to your linking, like size, color, speed and so on.
Also take note that i use SuperSizer plugin to resize images on the fly and save some time, for detailed parameters of SuperSizer plugin please check Supersizer WIKI http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ
{supersizer path=uploads/news/id$id/$image width=450  height=200 unique='true' overwrite='true' url='true'}
Step 6

And this is it, all we have to do now is write some News, upload images through News Extra Field "sliderimage" and call News smarty tag where we want this slider, either in Template or Content.

Code: Select all

{news summarytemplate='Piecemaker'}
You were talking about Gallery Module, so how does this work?

As first you can see Demo here: http://demo.i-arts.eu/test

We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
Gallery 1.4.1
CGExtensions 1.19.5
CGFeedMaker 1.0.11

Follow Steps 1 and 2 from above.

Step 3

We go to Gallery module and create new Template (i named it Piecemaker), delete all preconfigured code.
And enter this in the "Template Source:" part:

Code: Select all

<div id="flashcontent">
<p>You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p>
</div>{literal}
<__script__ type="text/javascript">
      var flashvars = {};
      flashvars.xmlSource = "{/literal}{root_url}/feeds/{$page_alias}{literal}";
      flashvars.cssSource = "{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerCSS.css";
      flashvars.imageSource = "{/literal}{root_url}/{literal}";
      var attributes = {};
      attributes.wmode = "transparent";
      swfobject.embedSWF("{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerShadow.swf", "flashcontent", "960", "610", "10", "{/literal}{root_url}{literal}/uploads/piecemaker/swfobject/expressInstall.swf", flashvars, attributes);
 
          {/literal}
And this in "Template JavaScript:" part (you can skip this part if you have it included in your page template already):

Code: Select all

<__script__ type="text/javascript" src="http://www.yourdomain.com/uploads/piecemaker/swfobject/swfobject.js">

As you can see i am using {$page_alias} in Gallery template, this means we could integrate this on multiple pages if we create each Gallery we want to used with directory name as alias of the page we are going to use and CGFeedMaker feed with the same name.

So i have a page with alias "test", a Gallery with folder "test" and Feed with name "test"
If you want to use on Gallery folder you should remove {$page_alias} and enter the name of the feed you will be creating now.

Step 4

Open CGFeedMaker and create new Feed, named either as mentioned above according to alias of the page you want to use or whatever you enter as flashvars.xmlSource source.

And the template looks like this:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Settings>
    <imageWidth>450</imageWidth>
    <imageHeight>200</imageHeight>
    <segments>12</segments>
    <tweenTime>1.7</tweenTime>
    <tweenDelay>0.1</tweenDelay>
    <tweenType>easeInOutBack</tweenType>
    <zDistance>0</zDistance>
    <expand>20</expand>
    <innerColor>0x111111</innerColor>
    <textBackground>0x0064C8</textBackground>
    <shadowDarkness>100</shadowDarkness>
    <textDistance>25</textDistance>
    <autoplay>12</autoplay>
  </Settings>
{capture assign='galpics'}{Gallery dir='test'}{/capture}
  {foreach from=$images item=image}
  <Image Filename="{$image->thumb}">
    <Text>
      <headline>{$image->titlename}</headline>
      <break>Ӂ</break>
      <paragraph>{$image->comment}</paragraph>
      <break>Ӂ</break>
    </Text>
  </Image>
  {/foreach}
</Piecemaker> 
Step 5

And thats it, all you need to do now is include your Gallery somwhere in page Template or Content

Code: Select all

{Gallery dir=$page_alias template='Piecemaker'}
I hope my english, typos and writing were not to painfull  :) and you can maybe find some use of this writeup.
Last edited by uniqu3 on Thu Mar 24, 2011 8:51 am, edited 2 times in total.
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

Please Help.
I red you instruction but i get an error saying: string(77) "Smarty error: unable to read resource: "module_db_tpl:News;summarypiecemaker.
Did i mis someting?
help
uniqu3

Re: Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

To me it seems that you are referring to {news summarytemplate='summarypiecemaker'}, does a news summary template named summarypiecemaker exist?
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

Oeps my bad, but now i have a empty white space where the news should appear, right mouse button give flash player menu. but no news.

if i call the page http://myurl/feeds/piecemaker i get the this error : There is a path issue with the orginal image!<b...

Man i'm sorry...
Last edited by raduen on Mon Sep 20, 2010 9:46 pm, edited 1 time in total.
uniqu3

Re: Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

This comes from xml file/cgFeedmaker template.
Take a look at the sourcecode to see what path is given for the image.

And this is the part where you will have to take a look at.
{assign var=id value=$entry->id} {*we assign id and look for id of posted news*}
{assign var=image value=$entry->sliderimage} {*we assign image for the value of extra field "sliderimage"*}
Is your extra field for image named "sliderimage"?
The error comes from Supersizer plugin, so if your extra field is named "sliderimage" please take a look at Supersizer wiki http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ for settings instruction.
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

Thanks again,
Should i get someting if i type http://myurl/feeds/piecemaker i know the path to the images is right and my jpg file are correct.
If i choose the piecemaker template and put {news summarytemplate='Piecemaker'} in de news module i get a blank space even if i put just put {news} in my template i also get a blank space.
An other question if i type http://myurl/News/rss sould i see news feeds?, cause i get an server error page.

Sorry for taking so much of your time.
uniqu3

Re: Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

If you have mod_rewrite on and your htaccess file is setup correctly when opening  http://myurl/feeds/piecemaker you should see content of the xml file like here http://demo.i-arts.eu/feeds/piecemaker

To see if path to images is right or not the best option would be to check the sorcecode of the feed created in http://myurl/feeds/piecemaker

Blank white page should not be if you have done all steps correct you should at least see a grey block where it says loading.

Regarding the other question depends if you have set another RSS feed to display News feed and how the path was set, so the error for example restricted would be caused because there is no feed there.

You can send me your admin info if you have the page online and i will take a look at it, if you can't find a solution.
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

Meeeennnn I got It.
I modified the piecemaker.swf but in your instructions you use piecemakerShadow.
But the only why i got it to work is the hard code the image path like this:

if i leave this and put {supersizer path=uploads/news/id$id/$image width=450  height=200 unique='true' overwrite='true' url='true'}
in a page for testing (i this a good idea?) i get an error saying:

There is a path issue with the orginal image!
Does this look right?
Path:C:\WebDesign\XAMPP\xampp\htdocs\CMSMadeSimple/uploads/news/id/
uploads/news/id/?
notice uploads/news/id twice.
uniqu3

Re: Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

You could use this:
{assign var=id value=$entry->id}
{assign var=image value=$entry->sliderimage}
This way you see if the file is correct, like getting the correct id of the news folder and image name.
If this brings you results then you should check http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ

But for me this setup works on WAMP server and as you can see online.
This is my code on WAMP installation running:
{assign var=id value=$entry->id}
{assign var=image value=$entry->sliderimage}

 
And the output of xml file gives me this:
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

I have the site online now, do you have to check it for me ? ill send you the admin settings.
let meknow
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

I'm sorry..
The gallery part works but the images don't file the flash gray area, it's like it's showing me the thumbnails.
http://77.167.98.242/cmsmadesimple/
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

raduen wrote: I'm sorry..
The gallery part works but the images don't file the flash gray area, it's like it's showing me the thumbnails.
http://77.167.98.242/cmsmadesimple/
I figured it out. change $image->thumb to $image-file

Only thing left is the news feed
uniqu3

Re: Cool 3D Slider with News or Gallery Module

Post by uniqu3 »

Oh you could of set the thumb size to fit flash :-) it'S in Gallery/Template settings.
raduen
Forum Members
Forum Members
Posts: 14
Joined: Sat Sep 11, 2010 11:15 am

Re: Cool 3D Slider with News or Gallery Module

Post by raduen »

Maaannnnn sorry again.
How can a center the (piecemaker galley) in a div?
asgrafico
New Member
New Member
Posts: 3
Joined: Thu Dec 09, 2010 2:56 pm

Re: Cool 3D Slider with News or Gallery Module

Post by asgrafico »

Hi, looking at your post its seems to be a desapear code in steps 3 "Template Source" and "Template JavaScript"... can you help me with these?

Thanks
Locked

Return to “Tips and Tricks”