pwired

May 4, 2013

Must see video - f*ck you pay me

http://vimeo.com/22053820

April 29, 2013

Thanks kongondo (and others with links and books) taking time writing a real good explanation and the links. I had a look at your suggested Foundation, says they have inbuild prototyping as well. I'm gonna try that first and hopefully at the end of this week I can port one of my old websites to processwire with Foundation and make it have my first pro magazine look.

April 29, 2013

Thanks yellowled. Thing is that I am getting better and better in processwire's api and controllers but am still stuck in the positioning relative and absolute design. I have read about flexible's grid system and responsive design. Is it difficult ? Would you know a good place to start ?

April 28, 2013

How do you guys layout your webpages ?

What I do is setting up 4 or 5 blocks positioned relative and stacked upon each other.

Inside the blocks I put elements like text, pics, searchbars, navigation, body, footer

etc. but positioned absolute.

I use css to stack all blocks on top of each other by giving each block a 5 pixels higher top.

So block 1 gets top: 0px;

block 2 gets a top: 5px;

block 3 gets a top: 10px;

CSS

#container_header {
position:relative;
left: 5px;
top: 0px;
width:970px;
height:140px;
border:2px solid gray;
}

#container_menu {
position:relative;
left: 5px;
top: 5px;
width:970px;
height:285px;
border:2px solid gray;
}

Each block has a border so I can see where the block is during development.

When the page is ready I set border to 0px so the outline disappears.

When I need to see the blocks again I simply give border a value and color.

All blocks have the same off-set to the left of the page and the same width.

The height can differ per block.

When a block needs more height, the underlaying blocks move along down automatically

because of the use relative positioning for the blocks.

For example these four blocks positioned relative and stacked upon each other:

<div id="container_header">
Stuff goes here positioned absolute for example logo and rotating banner
</div>

<div id="container_menu">
Stuff goes here positioned absolute for example a top navigation menu
</div>

<div id="container_body

Stuff goes here positioned absolute for the body

</div>

I guess not all of us here are using responsive webpage design everytime, so how are you guys laying out your webpages otherwise ?

April 25, 2013

In your example above, what's in topnav.inc could easily just be in head.inc instead - no need to split it out since I assume the top nav is the same on every page.

Yes, true. Old cms habits die hard. I have to learn to become more flexible in the approach of the open potential of processwire.

April 25, 2013

Ricknew, did you read this thread ? I assume you did.

http://processwire.com/talk/topic/3388-question-about-headinc-and-footerinc/

Pete and diogo commented something more on this issue at the end of that thread.

For a newbie it can be confusing in the beginning that processwire has a very open potential with little cms rules but instead powerful api, fields and total php access. Especially if you are coming from another cms system with conventional cms rules and name standards. Or even worse if you are coming from a wysiwyg website maker. In processwire you can make almost everything dynamic with it's backend. Hence my own confusing in the beginning with what to do with head.inc and foot.inc and the html structure of your new website. Heck in processwire you can generate html structure on the fly with php echo. In processwire you have to be clear first about the static html structure of your webpages and then use the backend and php to replace content between html tags to make everything dynamic. As with everything, a lot of practising will help you learn how to use the open potential of processwire. Anyway I learned a lot thanks to many pro forum members here.

April 25, 2013

but those names are generally recognized among developers, so it makes sense to use them on the default install.

Obviously not, since newbies associate head.inc with what is between the <head> and </head> tags

and foot.inc with the footer of a webpage. It happened to me and I see it happen again and again to

other newbies. Among experienced developers it might make sense but only after they became experienced

themselves. Confusing associating between words in file names in .inc or .tpl and the same words

between html tags should be avoided.

By the way <footer> is a new tag in html5 unlike <head>

April 24, 2013

Diogo replied:

Think of the template file as a puzzle, and the inc files as the pieces of the puzzle. The goal is to draw an html file in the browser, and each piece does it's part. Because php doesn't understand html tags, the pieces of the puzzle don't correspond necessarily to the complete html tags, they just draw the puzzle from top to bottom, unaware of what they're drawing, until it's complete.

I have thought about that. What if using an include for the body html part of a page (not the body field)

like this: include("./body.inc");

You just put all the html on it's own inside body.inc

This way you don't have to puzzle the contents of echo $page->body;

between head.inc, topnav.inc, and foot.inc

See below:

<?php

/**

* Page template

*

*/

include("./header.inc");

include("./topnav.inc");

include("./body.inc");

include("./footer.inc");

Imho you could not just leave it by just including one .inc but take this one step further with conditional logic

and include an .inc file fitting your needs for a specific page:

if ($page->name;) = somename

then include somename.inc

What do you guys think about this ?

April 24, 2013

This is easy. Ryan explained some time ago how you do that. Make fields with type text. Fill the fields with the path to your css file (works also for js files). Put your css file in : templates/styles/subfolder/file.css

(use a subfolder to separate and organize your files)

On your template file or head.inc file you output your css like this:

<?php
        $file = "styles/$page->css1";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' media='screen' type='text/css' href='{$config->urls->templates}$file' />\n";
        }

What this does is assign the path styles/subfolder/file.css to the variable $file

Then it checks if the file.css is really there.

If yes then it outputs file.css

You can do the same for js files.

This is a conditional way for outputting css or js files so you can put the above code inside head.inc

or put it in any template file.

April 23, 2013

Hi Horst, it's a simple camera that looks like a digital photo camera on the outside. It has a network cable connection. Today I mounted it in a corner under the ceiling, connected it with the router and it shows up in firefox under a local ip number, 192 . 168 . 1. 35

Now I have to find a way to install a small webserver somewhere to broadcast it over the internet. Maybe the camera might have an inbuild webserver but I don't think so. It looks really cheap. Gues the guys from the internet cafe don't want to spend too much money on a real ip cam. Maybe I find an app for viewing a cam on a tablet.

April 23, 2013

Somebody asked me to setup a securitycam in an internetcafe and the owner wants to see the video on his tablet. In the past I did something like that but the video was show on a desktop computer. I remember I needed to setup a website with a flash videoplayer connecting to the ip of the securitycam and have flash installed in the browser in order to see the securitycam. As far as I know Apple's iPhone and iPad prohibit to install flash. So my question is how can I make the video of the securitycam visible on an iPhone and iPad ?

April 21, 2013

Thanks a lot yellowled, it's all working !! Now I can still finish this before monday.

Saved the \n trick in my php notes !

April 21, 2013

Hi,

I have a problem with rendering out css and images.

First I have 4 css files that I want to render out like this:

<?php
        $file = "styles/$page->css1";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' type='text/css' href='{$config->urls->templates}$file' />";
        }

        $file = "styles/$page->css2";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' type='text/css' href='{$config->urls->templates}$file' />";
        }

        $file = "styles/$page->css3";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' type='text/css' href='{$config->urls->templates}$file' />";
        }

        $file = "styles/$page->css4";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' type='text/css' href='{$config->urls->templates}$file' />";
        }

?>

When I go to page source I see they are all there but all are next to each other on 1 line.

How can I have them rendered out each one on it's own line ?

Same problem I have with rendering out pictures.

This is what I want to achieve:

When I try this:

<div class="wrapper">
<div id="myGallery" class="spacegallery">

<?php
foreach($page->images as $image) {
echo "<img src='$image->url'>";
}
?>

</div>
</div>

All picture urls are on 1 line and the part alt="" is missing

How can I get all picture urls each on it's own line including the part alt=""

Thanks

April 19, 2013

Most part of the html structure on the front end is done in head.inc or whatever .inc you are using. Html tags started in head.inc can be ended in other inc files. Then home.php or basic-page.php are including the inc files so it will show up in the browser. Api calls and php is placed between html tags for functionality. Template files can also be used as controllers with lots of api and php. Getting the hang of it.

April 19, 2013

I am now playing around with this stuff. I am using a footer.inc file with nothing in it but </html>

just for using it to close the <html> tag that was started in header.inc

April 19, 2013

but then you'd be stuck with needing to add the content div open and close tags in each template file.

the pieces of the puzzle don't correspond necessarily to the complete html tags,

Thanks for all your replies, sorting this out. Now it starts to make sense to me and can adapt to it.

Without this forum newbies like me will never be able to use the full potential of processwire.

April 19, 2013

The code in each of your templates needs to be between these.

Do you mean that footer html code is sometimes embedded or part of html code that started in head.inc ?

And therefore the code is spread over 2 inc files ? I imagined myself that it would be possible to have

footer html code completely separated from the rest.

April 19, 2013

About head.inc and foot.inc in a standard processwire installation.

I am puzzled why some html tags are starting in head.inc but don't end in head.inc

Instead they are ended in foot.inc

For example the html tags <div id="content" class="content"> and <div class="container">
are started in head.inc but they are not ended in head.inc

<div id="content" class="content">
       <div class="container">
           <div id="sidebar">

                                    .....more code here

                  </div>
           <div id="bodycopy">

The last line in head.inc holds <div id="bodycopy">
the tags <div id="content" class="content"> and <div class="container">
are not closed in head.inc. These html tags are closed in foot.inc

Now these html tags are spread over 2 inc files.

Why is that ? Would it not be more logical to end these html tags in head.inc
where they also started and only put footer html code in foot.inc ?

April 19, 2013

The home page is the parent of all other pages. You can rename it if you want.

Thanks, knowing this now, I guess it's no problem to start a website from the home page.

April 19, 2013

Very good site to pick up inspiration for your future websites.

April 19, 2013

Yup, working on it. Why is it not possible to delete the Home page ?

April 19, 2013

Great thread with good explanations working for me also.

April 19, 2013

Ok, yes, I did it even my self in pwired, wired, wiring, derivated from processwire. Guess I got confused when I was reading the word wireframing in "going through wireframing process"

At the moment I am deleting all the default pages, fields and templates from an installed processwire.

See how that goes for replacing everything with my own website.

April 18, 2013

@ macrura, I like what you wrote there but don't exactly know what you mean by:

i like to work with a design that is close to finished before 'wiring' it.

especially before 'wiring' it

I mean, isn't wireframing the first step in the design process ?

April 18, 2013

After you installed processwire, it comes with a default website.

What is the best way to fill in your own website ? How do you replace the default processwire website with your own ? Do you simply delete all the default templates, fields and pages that are there ? Or do you not delete them but rewrite and edit them into your own ? If doing so, will there be any left overs in the database or something else to clean up ?

Sign In

Profiles

Forums

Store

Posts posted by pwired