Website Maintenance/Updates

 

Under Construction
This is a new page, currently under construction!

Website Maintenance/Updates

This document outlines how the Krita.org website works. It also explains what is involved if you want to edit and certain areas of the site. The instructions only include the WordPress site, not the old Joomla version.

News

Log in through the wordpress admin. From the site, you can go to the bottom and click the "admin login" link. You will be directed to a log in page. Once you are in, you can click the 'posts' button on the left navigation and then 'add new' from the navigationi or by the title on top.

the first line is the title, and everything else below is the body. You can add media and do your formatting. Most of the headers are using the h3 tag - so keep that in mind.

To embed videos like youtube or vimeo, WordPress uses a built-in embed shortcode tag for everything.

[embed]https://www.youtube.com/watch?v=9xlKF6v-fgU[/embed]

There are many sites that this works for. You can see a full list of what WordPress supports here: http://codex.wordpress.org/Embeds

WordPress Theme Anatomy

The only files you will ever need to edit or reference for this site are in the theme directory: /wp-content/themes/krita-org-theme Everything else is WordPress CMS specific and not related to the design or content. All of the PHP files are in that root directory. Everything else is supporting media and javascript libraries.

A WordPress page or post is created using a hierarcy of pages. Through the chain, WordPress determines what needs to be shown. In general, all pages and posts will start out with index.php (we're in the theme directory now). The 'get_template_part('loop', 'index')' part will find out if there needs to be multiple posts shown for a page. In the code above, that just includes loop.php there. By starting with the index and going through the 'get_template_part" areas, you can see the logic of how WordPress generates the layouts.

Back to the index.php page. There are a lot of 'if (is_page('xxxxxxxx') )' conditions. This will inject extra design and code below the content you add through the WordPress interface. Each xxxxxxxx has their own php file that contains extra logic or content. For istance for the Krita Desktop page, you can edit the Krita Desktop page through the WordPress admin and it will update the title and information on the top. If you want to edit the tabs and things below it, you need to open krita-desktop.php in the theme directory to add logic.

It is currently set up this way because custom design solutions need extra logic or HTML that makes it difficult to put in via WordPress. Custom HTML solutions and frameworks are more difficult to manage through a CMS. There are some plug-ins that we might be able to use in the future to add some content to the WordPress interface, but there will always be some changes that will have to be done via a PHP page.

If you need to globally add something to every page and post, the best way is to edit content-single.php. This is used on all pages and posts (except the frontpage). Putting something at the top of this template will add that element across the site.

TODO: Add a diagram with the template hierarchy.

Page Hierarchy

Any content not news related is stored as a page in WordPress. Pages can have children. You will notice that some pages are simply 'containers'. Their main purpose is to just hold other pages. When viewing the pages list, many pages will have a dash before them. This means they are a child to another page. This is how the site manages the navigation. When a child is a page, it will show up as a blue tab on the internal page. The container pages use a plug-in called "page links to" which just redirects itself to a different page. This way, we can specify what the default page will be.

Artist Interviews

Artist interviews are all stored as posts. You add a featured image to the post (on the right side bar). This is what will show up on the frontpage and artist interviews page. Each artist interview post also has a category of 'artist interview' that can be found in the right column. Marking this is where most of the magic happens. When it is posted, the artist interview will do the following tings:

- show up as regular news - show up in the 'artist interview' area in the frontpage - show up in the 'artist interviews' page under features

In the artist interviews are listed chronologically, so the latest one will appear on the homepage - and on the top left of the artist interview page.

Gallery

The gallery uses a javascript framework called masonry.js to achieve the grid like effect. The gallery is currently hardcoded to a theme file, so you have to manually edit it through FTP.

gallery.php (in the theme directory)

If you scroll down half way through this file, you can see a bunch of HTML that looks like this: 

<a href="<?php echo bloginfo('template_directory') ?>/images/gallery/krita_test___self_portrait_by_sycra-d6rang3.jpg"> <img class="x-vertical" src="<?php echo bloginfo('template_directory') ?>/images/gallery/krita_test___self_portrait_by_sycra-d6rang3.jpg" alt="" /> Self Portrait - Sycra </a>

Each one of these is an image in the gallery. The key points are that all of the images currently are in the '/images/gallery/' area of the theme file. There is a class on each image saying what the aspect ratio is. These are the following types

xx-vertical x-vertical vertical square horizontal x-horizontal xx-horizontal

Manually setting widths and heights can break the grid look, so that is why these classes are used. You can see the CSS in gallery.php to see what the widths and heights are set to. The width is critical in how masonry.js calculates the columns

The span tag has the text that appears.

Front page

The frontpage is mostly generated dynamically by grabbing posts or using built-in WordPress functionality, so it currently is all managed by frontpage.php in the theme directory. You cannot make changes to this in the WordPress admin currently. You will need FTP access to modify it. If you open frontpage.php (in the wordpress theme directory), you can see where the text and images are at.

""Front page slide show"" If you want to modify the homepage slide show, do not edit the html at top. There is a custom javascript slideshow that Scott Petrovic wrote that generates what will go in that HTML. The HTML at top are just containers that javascript grabs onto when updating.

If you scroll down near the bottom of frontpage.php, you will see a JSON array that has a bunch of these:

{"image":"slideshow-3.jpg", "name":"Tago"}

This is the data that javascript uses to generate the slide show. The images are all located in the images/slideshow directory of the theme. Just modify that JSON array to modify the slideshow. Make sure to add commas at the end of every index (except the last one). The name is what shows up when you hover over an image. The images are a specific size, so they will be scaled down if you try to put a really large or small image in there.

"Source Code"

https://projects.kde.org/projects/websites/krita-org-theme/repository

If making large updates or changes, try to add them back into the GIT repository. This is a good reference in case something gets messed up with the theme file and it needs to be restored. You will need to put a KDE ticket in to get write access.