Dreamweaver

Permalink
Is it possible to add spry widgets to a page?
Kind regards
Angela

avonti
 
Maynar replied on at Permalink Reply
Maynar
Everything is possible, but would you want to?

Seems to me like a library with functions similar to the build-in JQuery, maybe not entirely.

You will have to include the SPRY widgets JavaScript libraries to your the header and place the code of the widget itself into a HTML block.

That's my approach anyway.

What kind of a widget do you want to include?
bcarone replied on at Permalink Reply
bcarone
Angela

What a great question!!!!

I have been wondering about this too since I have created some great pages with Spry Widgets. I had gotten so excited about the way Concrete works and its ease of use I forgot the terminology. Thanks for steering me back.

SO here is what I am wondering. I assume (maybe bad of me) that the way Maynar described his reply that the Jquery way with C5 would be better. Well I for one am learning its framework. But for ease of use and speed of development (at least with DW CS3, don't have CS4 yet money money) the Spry Widgets are great development speed tools. Even with DW's interaction capabilities with a DB would be interesting to find out more about.

Having said that, I would think that single pages in Concrete 5 would be the way to go here. Your pages would be decidedly separate and the only thing I would have a major concern with would be the themeing of the pages. Functionally, I would think that this would be the way to go, Single Pages that is.

Please someone with more Concrete 5 know how and Dreamweaver answer this question in much much more detail. I for one am glad someone has brought this up.

Thanks Angela.
-Bill
avonti replied on at Permalink Reply
avonti
the widget I wish to use is the tabbed page widget.
That way I could have four image galleries all on the one page.

Kind regards
Angela
avonti replied on at Permalink Reply
avonti
Well I thought that may be a way to get things to happen the way I want them to.

I tried the photo gallery but can't get that to do what I want to, nor can I get the image block to work as I want it to.

You should be able to change your website using the cms but I am searching thru all the files trying to put things in the proper places to get it all to work.

All I want to do is show a thumbnail image that, when it is hovered over, a larger image appears to the right of the original.

Is there anyway of uploading a number of images into the cms without having to upload each one individually?

Kind regards
Angela
bcarone replied on at Permalink Reply
bcarone
Angela

jgarcia had mentioned a tabbed block that he was working on. Maybe when he gets that finished it may provide some of the functionality you are looking for. I am looking forward to it as well.

-Bill
Maynar replied on at Permalink Reply
Maynar
In the file manager in the top right corner there is a sneaky link: "More", next to the single file upload form.

Let me just ask.. Are you familiar with PHP, HTML and CSS in this case?
If so, I could try and get you in the right direction, but including the scripts is really up to you.

I saw the tabbed page widget, works great! Can see why you want it, but

1) there are similar things out there, read bill's reply,

and 2) in contrary what bill said I still think the way I said is better, because you might want to add other blocks to that page containing the galleries as well?

If not the single page way might be easier, if you are familiar with PHP, HTML and CSS.
bcarone replied on at Permalink Reply
bcarone
Maynar I think your way would be better. But as a newb to C5 and jquery, I have not yet learned the best approaches with C5.

That is a great tip about the "More" link. I will look more into that myself. The tabbed page widget is a great tool. Including in the header of a single page and mapping the spry jscript and css to the theme folder would be what I would think would be the way to go on this.

So forgive a jquery newb still not understanding it but I do know the spry widget functionality(ies) is a great design feature and will be researching how to do some of those things with C5.

This is a great thread in my opinion :)

-Bill
Maynar replied on at Permalink Reply
Maynar
You're are really not the only newb to JQuery here!
I just started JQuery two weeks ago... But I have a habit of learning things quite quickly, just like I learned Concrete5's ways.

Anyhow. I'm pretty sure I can make a tabbed thing, just not user friendly or a block at all. That takes a lot more time.

I think this is a great thread as well.

---

But to get back on topic. Concrete5 doesn't support SPRY Widgets out of the box, but with some coding in the theme (including libraries) and adding it to the HTML block (copy, paste from dreamweaver) is probably the quickest way.

1) Go to your theme: siteroot/(concrete/)themes/#yourtheme#/elements/header.php
2) Upload the SPRY libraries to the theme folder: siteroot/(concrete/)themes/#yourtheme#/
3) Add the SPRY libraries you use in dreamweaver. Might look similar to this:
<script src="<?php echo $this->getThemePath(); ?>SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath(); ?>SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath(); ?>SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath(); ?>SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="<?php echo $this->getThemePath(); ?>SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->getThemePath(); ?>SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->getThemePath(); ?>SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->getThemePath(); ?>SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />


4) Go to Concrete5 dashboard, go the page you want to add the gallery to and open it in edit mode
5) Add the "HTML" block and include the code from Dreamweaver to show the gallery or the tabbed "thing"
6) save, publish, test it.
7) let us know if it worked!
avonti replied on at Permalink Reply
avonti
I am confident with CSS and HTML and familiar with php, but I haven't done enough of it to be at ease with it as yet. I sometimes forget a ";" or spell something incorrectly and spend time fixing my errors.LOL

I did manage to get a theme all set up, but had a bit of trouble getting my sliding doors navigation happening. I was using a span in the a:link and couldn't work out how to style it as there aren't any spans in the navigation block. Ended up recoding everything and removing the span.

RE uploading images...........
The link more ..... I have tried this but unless I am doing it incorrectly you still have to click on each individual image and click upload. I would like to be able to add a folder of images. Would make things much quicker. Tried the flies/incoming folder (sounded like a good idea to me) but adding pics there didn't work either.

I will try your suggestions tomorrow and see if I can get it all to work, but as I am in Australia and it is nearly 1am I am off to bed.

Thanks
Angela
bcarone replied on at Permalink Reply
bcarone
Took a little finagle or two on the css file name..u cant have a @import on the css line.

Everything worked once I figured out the theme css path. Works great.

So now....off to do a little creative DB interaction :)

Thanks again
Bill
Maynar replied on at Permalink Reply 4 Attachments
Maynar
Just in case Angela still has some issues with the multple file upload in the file manager. Do the following steps in that are added as .jpg as attachments.
tolga replied on at Permalink Reply
tolga
It's really easy to make a custom block, package or whatsoever, even for a newbie to c5 like me. I've created a custom block with a single form entry. Right now i can include a Spry Accordion in any page, any place by only entering a text like this.

Header of the first tab panel
=====
text in the content panel, sure i can use HTML etc. bla bla bla...

A new header for the second tab panel
=====
Text in the second content panel. I can use MCE editor if i want, it's really easy :)



If anyone interested, is the acc. panel seperator i use to parse content in the view.php, and the "=====" is the seperator for the heading and content of the acc. panels.

And the view.php is simple enough to parse the form content to create an accordion widget. No error catching, not so professional, but i think it's a proof of concept to tell anybody: "C5, simple enough to use, develop, or design".

<div id="cAccordion" class="Accordion" tabindex="0">  
<?php  
$c1 = explode('     ',$content);  
$cnt = count($c1);  
for($i=0; $i<$cnt; $i  )  
{  
   $c2 = explode('=====', $c1[$i]);  
   echo '<div class="AccordionPanel">';  
   echo '<div class="AccordionPanelTab">' . $c2[0] .'</div>';  
   echo '<div class="AccordionPanelContent">' . $c2[1] . '</div>';  
   echo '</div>';  
}  
?>  
<script type="text/javascript">  
<!--
mario replied on at Permalink Reply
mario
i've noticed that, at least on my host, you need to include a forward slash in front of the directory that you're referencing.

<script src="<?php echo $this->getThemePath(); ?>/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
Pritam replied on at Permalink Reply 1 Attachment
I tried the steps mentioned above, with no success, this is what i did, the header.php code looks like this

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<script src="<?php echo $this->getThemePath(); ?>SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="<?php echo $this->getThemePath(); ?>SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<?php  Loader::element('header_required'); ?>   
</head>
<body>


This is the code that i tried to paste into the html block
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">


Thank you
Pritam replied on at Permalink Reply
My bad, I just had to add a / before SpryAssets/SpryTabbedPanels.js" coz that folder was on the root of my website, Thank you Maynar !!
gelie replied on at Permalink Reply
gelie
Hey,
I'm having an issue with the drop down menu. I connected the javascript file and the css file correctly as they show up in the site's formatting but when I hover over the menu nothing happens.
Does anybody know what I missed or have any ideas of how to debug this?
Thanks for your help!
-Elie