• 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 This topic is locked, you cannot edit posts or make further replies.  [ 21 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Cool 3D Slider with News or Gallery Module
PostPosted: Thu Sep 16, 2010 2:15 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
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:
\$1:
 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:
\$1:
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:
\$1:
 <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:
\$1:
<__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.
\$1:
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:
\$1:
<?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
\$1:
{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.
\$1:
{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:
\$1:
<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):
\$1:
<__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:
\$1:
<?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
\$1:
{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.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Last edited by uniqu3 on Thu Mar 24, 2011 8:51 am, edited 2 times in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Mon Sep 20, 2010 9:04 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Mon Sep 20, 2010 9:23 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
To me it seems that you are referring to {news summarytemplate='summarypiecemaker'}, does a news summary template named summarypiecemaker exist?

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Mon Sep 20, 2010 9:40 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
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!
Man i'm sorry...


Last edited by raduen on Mon Sep 20, 2010 9:46 pm, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 6:32 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
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.
\$1:
{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"*}
uploads/news/id$id/$image width=450  height=200 unique='true' overwrite='true' url='true'}">


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.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 12:06 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 12:25 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
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.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 9:31 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 9:59 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
You could use this:

\$1:
{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:
\$1:
{assign var=id value=$entry->id}
{assign var=image value=$entry->sliderimage}

 


And the output of xml file gives me this:
\$1:

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 10:42 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Tue Sep 21, 2010 11:14 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
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/


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Wed Sep 22, 2010 5:56 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
raduen \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/

I figured it out. change $image->thumb to $image-file

Only thing left is the news feed


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Wed Sep 22, 2010 6:10 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
Oh you could of set the thumb size to fit flash :-) it'S in Gallery/Template settings.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Thu Sep 23, 2010 10:06 pm 
Offline
Forum Members
Forum Members

Joined: Sat Sep 11, 2010 11:15 am
Posts: 14
Maaannnnn sorry again.
How can a center the (piecemaker galley) in a div?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Cool 3D Slider with News or Gallery Module
PostPosted: Sat Jan 08, 2011 3:15 pm 
Offline
New Member
New Member

Joined: Thu Dec 09, 2010 2:56 pm
Posts: 3
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 21 posts ]  Go to page 1, 2  Next

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:  
cron
A2 Hosting