Introduction

What is this?
This will become an open source DIY website maker. Eventually it will be a download, but for now it's a closed experiment. If you want to try it out, email me joelgalvez@gmail.com.

Varied size

Different sized images somewhat evenly placed. Some are slideshows, some leads to an article, some are just an image.

Same size

Images cropped to the same size. Like the first example, each one can lead to an article, or can be just an image, or can be a clickable slideshow.

Side scroll

All images will have the same height. If the images aren't uploaded big enough they will be scaled up and blurry.

FAQ

  • Formatting text and such

    • By two, or more, enter. More than two enter won't make a bigger gap.

    • Add three spaces at the end of the line and you will get a soft break.

    • Start each new line with *, and they will become a bulleted list (the stars will be converted to dashes)

      * This is * a bullet list with * three lines

      ..will look like..

      • This is
      • a bullet list with
      • three lines
    • Are you putting soft breaks after your bullets? You can't combine bullet list and soft break, there is no need; bullets gets a new line anyway.

    • Make sure you have an enter before and after the bullet list

    • By putting dashes under the sentence you want to be a title, like:

      This is a title ---------------

    • You put things in brackets and parenthesis. Example:

      [These words](http://otherworld.com/) links to another world.

      ...will become

      These words links to another world.

    • By putting it between stars, like:

      How do I *emphasise* something?

      will become

      How do I emphasise something?

    • You need to place it somewhere in the body text with the {images:xx} tag. Replace xx with 1 for the first image, etc. The reason you have to do this is because it's up to you to decide where the image should show up in the text.

    • Not exactly. But if you can make an overview that acts like an article: Make a new overview underneath, then don't fill in anything in the body field for the articles it contains. Articles without any information in the body field will not be linked.

    • So that you can reach the article quicker. It doesn't show if you're not logged in. So, no-one else will see it.

  • Adding and moving things around in the cms

    • By editing the home page and changing the title from "Hello World!" to something else.

    • Press edit on what you want to delete, then you'll find a delete tab. Make sure you check "Confirm", otherwise nothing happens.

    • You have to save the page before you can add the rest of the content

    • You'll find deleted pages in the trashcan and can move them back in place. You can only see the contents of the trash can if you're logged in as administrator. Unless you explicitly changed something you will be logged in as administrator.

    • You can't directly replace the home page with some other page. If you have an existing overview that you want to be your home page you can remake it like this:*

      • Press edit on the home page
      • Go to the tab 'settings'
      • Change the template to 'overview X' (the one you want)
      • Move your content to directly under home
    • Say your page exist on the url

      /my/special/page

      • "Show in overview" will show page in it's parent (in the overview "above" the current page). Unchecking it will hide it from the overview, but if you go to /my/special/page, it's still visible there
      • "Show in menu" will show page in the menu. Unchecking it will hide it from the menu, but if you go to /my/special/page, it's still visible there
      • Settings > Check "unpublish" will hide the page for the outer world. It's a way to temporary entirely disable a page but still keeping it in place in the CMS.
      • Delete > Confirm will delete page and move it to trash

      So, unpublish and delete has the same effect to the website visitor. Both unpublish and delete will remove the page from both the overview and the menu.

    • First, install the modules

      • Languages support
      • Languages support - Fields
      • Languages support - Page Names
      • Languages support - Tabs

      Then in settings for "Languages support - Page Names" I personally prefer to set "Default language homepage URL is same as root URL" to "No". Then all pages will be prefixed with a language, instead of just some (like "/en/title" and "/nl/title")

      Add your languages, their name (url, such as "en") and title (whats displayed, such as EN or English)

      On the home page, add the urls to those languages (such as "en" and "nl")

      The langugage switch should now show up on your website next to the menu button

      Change the fields to their multilingual counter parts that you want to be translatable. Usually "title" "overview" and "body"

  • How things look in detail and how things are placed on the page

      • Edit the images field and add markdown as text filter
      • then, add stars around the word you want to be italic, like

      this *word* will be italic

  • Image size, cropping, etc

    • If we say that a 15 inch macbook pro retina is the highest size and resolution the image will be viewed in, then you should try and make the image 2880x1800 pixels, or just big enough that it fits within these dimensions.

      That way you are free to play around with the layouts later without risking having too small images.

    • DPI have no relevance. Only the amount of pixels matter.

    • It could be because it's too big for your hosting provider to resize. Usually you start running into problems if the image is bigger than 3000-4000 pixels. The amount of megabytes makes no difference.

    • By changing the width attribute in the embed tag to:

      width="100%"

  • These things will need you to change the files (edit the code) and/or access the files on the server

      • Upload your typeface file to your site directly in the main folder (root). Whatever corresponds to "/" on your site.
      • go to /settings in cms and press edit
      • In CSS, import the typeface, like so:

      @font-face { font-family: some_name_here; src: url('/thefilename.ttf'); }

      If you want your typeface to be used everywhere add

      body { font-face: some_name_here; }

      if you only want to use the font on the biggest headers, add:

      h1 { font-face: some_name_here; }

    • The default max size for an image in an article is 2880px wide, and whatever height.

      That's quite big. if you want a smaller image as a max:

      • find your root folder on your server with FTP
      • under root, open the file /site/templates/article.php
      • find line that looks like (at time of writing thats line 13)

      $thumb = $page->images->first()->width(2880, array('upscaling'=>false, 'cropping'=>false));

      • change the number 2880 to whatever number of pixels width you want the max to be
      • save & re-upload your changes