[Pro] Web Yeb looping

How do I have control over the placement of web yep action blocks (i.e. short text, image, rich text) when dealing with looping? I inserted all of them in an HTML container and I can’t move them or edit the style and it looks messy. THe looping works but can’t get formatting correct. For example text is close to image and the text runs across the page. Please help. thanks.


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

Hi Marcia
the easiest way to think about the items that you want to loop is to think of them as bits of text rather than individual elements. So make sure you insert them whilst you have a flashing cursor

so try this:

  1. create an html box for example 500px wide by 250px deep this is going to contain your loop and the items within the loop an call it “container”

  2. then click inside the container so you have a flashing cursor
    then go up to the the menu and choose Insert/Action Item/WebYep-Loop Start This should insert the loop start element

  3. Then whilst the cursor is still flashing click on the space bar so you have added a space after the loopstart element and then go up to the the menu once more and choose Insert/Action Item/WebYep-Short then add another space by clicking on the space bar and hit return.

  4. You should have now drop down a line so the next step whilst the cursor is flashing is to add an image and longtext item so go up to the the menu once more and choose Insert/Action Item/WebYep-image and add a space then add Insert/Action Item/WebYep-longtext add another space and finally hit return and add the loop end item by going up to the the menu one final time and choose Insert/Action Item/WebYep-Loopend

  5. now to style these bits… Create two styles 1 which you are going to use as your heading and the other for the secondary text

  6. Highlight the complete top line from the loopstart to the end of webyep short text including the end space and apply your heading style.

  7. then highlight your longtext on the second line including the space before and after it and apply the secondary style via the inspector palette

  8. click on the webyep image and adjust its size to your required size once you have done that look at the action palette and click on the IMG Tag extend button and add this style to the popup window:

     style="margin:14px 14px 14px 0px; float:left; clear:left"
    
  9. then click in each of the different webyep items and make sure you have named them within the actions

  10. finally remove the height attribute from the outer container and publish… what you should now see once you have populated the different items is that the text has the two different styles applied and that the image doesn’t have the text butting up close to it.
    Plus all the text should be constrained within the outer container which can grow in depth regardless of how many looped items you dynamically create.

if this doesn’t make sense then let me know and I will send you an example
cheers max


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

HI Max -

Thanks so much. I am going to try this tomorrow. quick question is there a way to make a static line in web yep that would repeat as the user added new content. Does that make sense? Thanks. Marcia


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

Sorry Marcia I don’t know what you mean could you describe it a little bit more
cheers
max


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

Hi all,

This comes just in time, I started with WY this week. Also struggling with it ;-). One thing I found out just now, Marcia, is how to put a visual line between loops; just put a HTML element before the loopend, make it the width of your container (or less) and the height +/- 2 px, give it a color. This should work.

Thanks Max for your help, I guess I will need it the next couple of days/weeks.

Lode


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

Hi Max -

Help. OK I got the loop to work and all the formatting looks great but I don’t think I am putting the loop end button in the right spot. when I put it on the bottom left side it throws the alignment off when you add posts. When I put it on the bottom right side of the container it doesn’t loop everything. I will send you an email with screen shots of what I am having problems with. THanks. Marcia


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

Hi Marcia and Lode
First off please if you are struggling with something then don’t hesitate to email me directly or post on this forum because the chances are people have come up with the same problem before.
Loops are probably the most difficult concept to work out in peoples head, because they rely on each part of your loop to be added in a way that it is repeatable some people find it easier to think of it as everything has to be on same level Layer) and others find it easier to think of the loop parts as text with paragraph returns. In reality both concepts are correct.

What you have to remember is that everything in a loop including the loop end must be connected and that means everything is either added as an inline item or is added as a child of an inline item. So what that means is you can loop a complicated table and have individual webyep or normal items within the table cells or or you can insert a layers as an inline item and add other layers as child layers within that original layer or you can add things singularly as inline items .

From what you describe it sounds like the loop end is not being added as an inline item. Are you sure you have a flashing cursor on your artwork where you want the lop end to be inserted?
if it still doesn’t make sense just send me your Freeway artwork and I can have a quick look for you to see whats gone wrong.
speak soon max


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

Hi, I am struggling to apply a particular style to a WebYep image box. I am using Max’s action suite and would like the image to resize “behind” the edges of the image box. ie some of the image gets cut off. Once clicked on the image then enlarges in Lighbox in full.

This can be done with CSS but I cannot get it to activate. I’ve setup the styles and named them the same as the image box. My main question is, does one need to create the styles within the Freeway style pallette, via clicking on the box and selecting item>extended>divstyle or via the EXTENDED button within the Webyep action pallette?

Hope someone can help.


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

Hi Mat
I will send you a very simple example in a few minutes so you can see how it works.
basically if you are constructing a loop of image and you want them to be all uniform in size (lets say square) and you want them to be next to each other then you need:

Construction:

  1. a container layer which we can call “container” which will constrict the maximum amount of horizontal image you can see before moving the next thumbnail image down.

  2. then we can apply the loop start to this “container”

  3. then we click in side this “container” layer until we see a flashing cursor and insert a normal html inline layer, this needs to be scaled to the size you wish all the thumbnails to be.we can call this webyepImageWrap.

  4. Then add a webyep image and named it “webyepImage” and this needs to be added as a child of the “webyepImageWrap”

  5. Scale the “webyepImage” so it is the depth as the “webyepImageWrap” but it needs to be wider than the wrap… ideally it should be at a of 3:2 ratio. (which is the normal camera ratio for images).

  6. Now press the right arrow on your keyboard a few time which should have the effect of placing your cursor after the “webyepImageWrap”

  7. insert a webyep loop end

  8. click out side the container and add a webyep lock, apply the webyep init code to the page and change the page extension to php.

Styling

  1. click on the “webyepImage” and set overflow to hidden within the inspector palette. Within the webyep image action palette set the width to fixed but the height to auto. Name the webyep image and set thumbnail drop-down to true.

  2. Click on the “webyepImageWrap” and set its float to left within the inspector palette.

Thats it

Exras

Below is an example with some extra things like rollover effects plus some extra styles that come into play when webyep is in edit mode but they are not essential for this to work.

www.max-izzat.co.uk/tutorials/loop-image-example.zip


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