[VID] WebYep Series

Legacy Tutorials
1

The WebYep series is now completed and is available at my ScreenCast Store found through the link in the ‘yellow’ signature bar of this post. I’ve recorded 6 full episodes, roughly an hour each, on how to build an entire web site from a layered PhotoShop Document through to a finished web site using both Freeway and WebYep.

Here is a break down to each episode:

WebYep Episode 1

We discussed what WebYep is and how to install it, what features the CMS offers, plus how we plan to utilize them for our web site.

Read More: http://www.danjasker.com/store/premium/details/webyep-e1/

WebYep Episode 2

This episode revealed the design of the web site and we begin to build it. We reviewed how to utilize the Inline Box-Model layout style as well as how to properly cut out and save our images for the web. We also went through how to utilize some keyboard shortcuts to help maximize our workflow in both PhotoShop and Freeway.

Read More: http://www.danjasker.com/store/premium/details/webyep-e2/

WebYep Episode 3

We finished up the home page design, walked through on how to create a custom stylesheet, and how to best utilize the CSS Menu action to create menu’s for our site.

Read More: http://www.danjasker.com/store/premium/details/webyep-e3/

WebYep Episode 4

We corrected several layout issues as well as how to work with WebYep image elements. Also in this episode we learned how to name pages properly as well as provide proper page titles using the Retitle Page Action. This episode is crucial because it discusses how to take a design to the next step which involved creating additional pages that needed to match the original feel of the home page design.

Read More: http://www.danjasker.com/store/premium/details/webyep-e4/

WebYep Episode 5

This screencast built three more pages for the site and discussed how to properly build out our design when it comes to using repeated elements. We went through some of the unique action features and discussed more about the last episode.

Read More: http://www.danjasker.com/store/premium/details/webyep-e5/

WebYep Episode 6

This screencast was the final episode in the series, excluding a soon to be released bonus episode, that covered building a photo gallery and contact form for our WebYep based site. I discussed how to build the photo gallery but also how to customize it using some CSS to remove things like image captions and how to keep the formatting of our image widths stable. The contact form was customized using the Form Element CSS action as well as benefiting from some custom CSS to keep a consistent feel to it.

Read More: http://www.danjasker.com/store/premium/details/webyep-e6/

Overall this series is beneficial for people who want to build a simple website using a simple CMS system like WebYep. Each episode comes with a sample Freeway file that can be used to follow along with or to just check on how I designed a certain aspect of the site. Thank you to everyone who has purchased the series and I hope that you’ve found use out of it.

Just wanted everyone on the FreewayTalk board here to know about this as well as promote my site as a great place to go for Freeway ScreenCasts. If you’re interested in more screencasts or want to be simply notified about future screencasts make sure to subscribe to the RSS Feed or join the mailing list (never sold or shared to anyone) which enters in your email address to win free stuff.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Everything has been moved to here:

http://www.danjasker.com/store/screencasts/

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hello Dan

Thanks for the WebYep tutorials so far. They have been very helpful.

I have just downloaded the last tutorial Webyep 7 bonus episode where I was hoping to find out how to adjust the gallery lightbox ‘close’ button (which at the moment has a missing graphic) You said you would be explaining this in Episode 7 but I have not found it here.

Please could you let me know if you do have a tutorial for this?

Thanks

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I saw your email today and just am getting to it now. If you look at the instructions on this page (found specifically under “Adding The Lightbox Effect”):

http://www.obdev.at/resources/webyep/documentation/WebYep_Documentation_1.5.0/reference/image.html

You have to edit the lightbox.js file to change the paths to the graphics. Then they will show up wherever you use it.

Hopefully that’s what you were looking for.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Dan

That’s brill thanks so much for that.

It’s all working now. I kept the ‘images loading’ path to the original as it didn’t work using the pat to the webyep system webyep. It just loaded in a new window.

so: fileLoadingImage: ‘images/loading.gif’,

And I changed the path for the close image to :

fileBottomNavCloseImage: ‘/webyep-system/program/opt/lightbox/images/close.gif’,

Thanks again

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

No problem. I’m always happy to help.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Hi Dan,

I have uploaded a site I’m working on to a temporary address http://79.170.44.156/singoutbristol.com but I seem to be having trouble getting the Lightbox to work again. It is in the right folder (opt) and I’ve checked Permissions on the server for the files and that’s all ok.

See http://79.170.44.156/singoutbristol.com/webyep-system/program/opt/lightbox/js/lightbox.js

I also have changed the code in the file lightbox.js to:

fileLoadingImage: ‘images/loading.gif’,

fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;

But for some reason Lightbox is now not working on the gallery page. It just opens the photos in a blank window.

http://79.170.44.156/singoutbristol.com/singoutgallery.php

Can you see what might be affecting this?

Thanks for your help

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Hi Mog,
The page is throwing a JavaScript error because on this server your path to the close box image is incorrect.
You have it defined in the Lightbox.js file as;
fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;
and it should be (for this server at least);
fileBottomNavCloseImage = ‘/singoutbristol.com/webyep-system/program/opt/lightbox/images/close.gif’;

Regards,
Tim.

On 27 Jan 2011, at 10:55, mog wrote:

I also have changed the code in the file lightbox.js to:

fileLoadingImage: ‘images/loading.gif’,

fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Hi Tim

I’ve just changed the script in the lightbox.js but I’m still not having any luck. The photo is still opening in a blank page. I’m not sure what else I need to do. I’ve tried permissions which seems fine.

Thanks for your help

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Hi Mog,
The comma at the end of this line needs to be a semi-colon:

fileLoadingImage:     'images/loading.gif',

like this:

fileLoadingImage:     'images/loading.gif';

Regards,
Tim.

On 27 Jan 2011, at 12:04, mog wrote:

Hi Tim

I’ve just changed the script in the lightbox.js but I’m still not having any luck. The photo is still opening in a blank page. I’m not sure what else I need to do. I’ve tried permissions which seems fine.

Thanks for your help

Mog

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Hi Tim,

I’ve changed that for semi-colon and I’ve quit the browser and emptied the cache and refreshed the page but it’s still not working.

Thanks again

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

OK looking at this support forum for the file format at http://www.huddletogether.com/forum/comments.php?DiscussionID=3014 I can see that the format of the JS file should be;

lightboxOptions = Object.extend({
fileLoadingImage: '/images/loading.gif', 
fileBottomNavCloseImage: '/images/closelabel.gif',

Note the colon, then the single quoted value and finally a comma in each line.

Regards,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Thanks Tim,

I’ve tried this option and various other combinations. This option actually disables the photos from opening at all. I wonder if I need to delete everything from the server and re-upload my folders and see if this helps.

Or maybe it is something to do with using a temporary address on the server? Could that cause a problem?

Thanks

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

I don’t think that is the issue. If you right-click in Safari and select ‘Inspect Element’ then click on the red circle in the lower right hand corner of the Web Inspector you’ll see that there is a parse error in the JS file. Something is the formatting of that file is causing the browser headaches. Check the formatting against the documentation and you should be back on track.
Regards,
Tim.

On 27 Jan 2011, at 12:46, mog wrote:

Or maybe it is something to do with using a temporary address on the server? Could that cause a problem?

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Brilliant! I have it now!

I had forgotten to delete the forward slash from the first
fileLoadingImage:

fileLoadingImage: ‘images/loading.gif’,

fileBottomNavCloseImage: ‘/singoutbristol.com/webyep-system/program/opt/lightbox/images/close.gif’,

Thanks Tim for your help on this and thanks also for the tip for developer tools in Safari.

Best wishes

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Hi Dan,

I wondered if there was a way to disable the Gallery descriptions as shown in Screencast 6? Too much text pushes the photos out of place and some of the photos disappear off the page.

The gallery element seems to have a flexible width but I’d prefer it to keep the width consistent so I wondered if there was a way to either disable the gallery description text box or if there is a way to enable the text and stop the photo gallery stretching with it?

Thanks for your help

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Make a custom style

.webyepgallerytext {display: none}

David

On 16 Apr 2011, at 14:01, “mog” email@hidden wrote:

I wondered if there was a way to either disable the gallery description text box

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Thanks David,

Any ideas how to enable the text while stooping the photos in the gallery from stretching off the page?

Thanks

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Hi

I’m hoping someone can answer this. I have been working on a website using a temporary server and finally resolved the lightbox issue but I moved a site over to the new server today and just testing a photo after changing the path in the lightbox javascript file.

I wondered if someone could check the site to see why lightbox is not working.

The url address is http://www.singoutbristol.com/gallery.php

There is a photo there to test lightbox.

I’ve changed the address in the path to:

fileLoadingImage: ‘/webyep-system/program/opt/lightbox/images/loading.gif’;

fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;

The permissions is set correctly so I’m now baffled as to why it’s not working.

Any help would be greatly appreciated

Thanks

Mog

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Your lightbox.js is within the webyep-system folder so you dont need that part in your path

Probably should be

/program/opt/lightbox/images/loading.gif
/program/opt/lightbox/images/close.gif

Remember paths are relative - alternatively you could use absolute paths

http://www.singoutbristol.com/webyep-system/program/opt/lightbox/images/loading.gif

David

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options