subtitle-h2:
Note i am formatted as a heading
Please use the dropdown menu on the top right of the text editor to mark headings (H1, H2, etc.) of the different order (by default all text is marked as paragraph). In the text areas like this one, also bear in mind that you can use hard and soft returns to make a line break. By pressing ‘Shift+Enter’ you insert a soft return.
The Hard returns are used to signify the end of a paragraph, whereas soft returns simply signify the end of a line. It has an impact on the styling of the text and specially the soft returns might be more useful in the case of sliders.
Here it is the soft return
and just before this sentence a hard return. Now we are checking the styling of links: the history of Russian filmmaking is in several important respects the exact opposite of American film history.
Some additional info on the Featured Image
Featured image used in this post is 1080×600 px. Better would be to use following size: 1024x500px or even 1200x600px. The image width is important for covering entire widths on the large screens. The height is important because of the thumbnails that use featured image but scale and crop it to get a square image. Here we test links read about it more at Britannica.
subtitle-h3:
Here some notes to take
Often it is helpful to look at the row text that is generated by the text editor there the text is typed in. To do so we can use text tab on the top right of the text editor. The minimal things to know here are listed in the blurb module on the right side of this text or below the testimonial module with quote by Isaac Babel1.
This information is helpful than links or line breaks don’t look normal and in the visual mode of the text editor it is not clear why formatting or links appear to be broken. Instead of trying to reformat things and messing the html tags more, sometimes it is easier to look at the plain text.
1. [The order depends on the widths of the window and how modules are organised in the different row-sections in the admin area. If the widow widths (or device screen) is to small for displaying multiple columns within the row-section than the modules in the 1st column are displayed 1st and afterwards the 2nd column. You can see this effect by resizing the window.]
Today a man only talks freely to his wife – at night, with the blankets pulled over his head
Some additional info to the main copy on terminology
- every html tag (with almost no exceptions) has to be closed and have a structure of:
<tag>something inside</tag> - a paragraph tag is a p tag:
<p>i am paragraph</p> - a soft return is a br tag that has no closing part and can have two forms:
<br>or</br> - a link tag is an a tag:
<a href="https://en.wikipedia.org>i am paragraph</a> - the heading tags are h tags:
<h1>i am H1 heading</h1> - the ampersand character is used to code symbols that are not normal letters, e.g. a non-breaking space that will not break into a new line is given by:
More examples for various symbols can be found at this site.
subtitle-h2:
Here some notes to take
What follows are different modules that are extra styled to fit the feel and look of the KKF website. In admin area you will see that the text and code modules are in gray colour whereas the rest of the modules used are in green colour. Green indicates that they are global and thus anything that you will change in the Advanced Design Settings or Custom CSS but not General Settings will affect all posts that use the same module. This should be avoided if possible.
It is also advisable not to take this sample post literally as a recommendation for how a post should look like. In this example we have to many different modules and they overweight the actual text that should be the main part of the post. In general, person module should be used to include information about individuals being involved in the described event, blurb modules to provide information about organisations, groups, places, some historical facts that are related to the event or of relevance to the main text and support its understanding. The testimonial module should be used to include either quotes or short information about historical personalities that are not alive anymore.
However, the sliders, galleries, sound and videos should be used with care and not all at once. For the galleries and sliders it is a general rule of thumb that they should use images of the same size and the text should be approximately about the same length. In most cases the size of these modules will be dictated by the text amount and by the width of the browser window (or the screen width of the device used). Thus the optimal size of the images may differ depending on the situation. The examples below explain how sizes are calculated and provide information about the actual size of the images used to give an approximation of how sizes may affect the display. Both types of the galleries are given as examples below this text.
subtitle-h3:
More notes on the gallery as a slider and as a grid
The ‘safest’ is a gallery module displayed as a slider and you can see it above this text; it uses equally sized images (900x500px). The gallery module as the slider is affected only by the size of the images and so will have a fixed size if they are equally sized. However it is not very informative; only by clicking on a slide image a user will reach a preview mode where the titles of the images can be seen.
If titles and captions are important than it is better to use gallery module in the grid. It is also good if you want to show many images at once, e.g. in the example on this page the gallery setting is to show 4 images on every ‘page’. The page here is simply a matter of grouping images together and if the pagination in the gallery settings is enabled than the user can navigate through such pages via the pagination links. The downside of the latter is that if the pagination links (they are shown than there are more images to show) are enabled and the titles with captions for the images on the 1st page have different amount of lines comparing to the titles with captions for the images on the 2nd page, than the module will be rendered with the different height causing the site to jump. This use of the gallery module is exemplified below.
Title to dummy_380x245_1
Caption to dummy_380x245_1
Title to dummy_380x245_2
Caption to dummy_380x245_2
Title to dummy_380x245_3
Caption to dummy_380x245_3
Title to dummy_380x245_4
Caption to dummy_380x245_3
title dummy_380x245
test sizes for gallery as a grid
subtitle-h3:
More notes on the use of the slider module
Another way to display images is to use the slider module. The main difference between galleries and sliders is that although they may look similar they are handled quite differently. The former are collections of images that you select from the media library at once wheres the latter are collections of individual slides and should be understood as a presentation. The obvious advantage is that you can combine a text with imagery and control both. It also means that in the slider module you create slides individually by adding new slides on the top of the general settings. As you add a new slide your slide module interface changes to the interface of the slide you are adding. Basically there are General Settings, Advanced Design Settings, Custom CSS for the entire slide module and for the each of the slides. In the general settings of the individual slide you can specify heading, background image, slider image, text and other settings. Below there are three slider examples with the explanations on their use and relevant settings for them.
The 1st example below this text is marked in the admin area as ‘Slider Module, 1st intro-slide dictates height, images as background (centre-cover)‘ and is the most simple one to use. It doesn’t have slider images but only background images. These will be automatically scaled to cover entire area of the slide; if proportion of the image doesn’t fit than images are cropped vertically or horizontally. The slide with the most text will dictate the height of the module’s display and it make sense to have a cover slide with the most text. If there is not enough text you can insert empty paragraphs. Than you use text in slides you have to switch on following setting in general settings: use text overlay. The headings can be used not only as a text in the heading field on the top of the general settings but also in the text area. In the latter case you have more control and can insert links for the part of the heading text. Although such use of the slider module is very good as it offers a fix size of the module area it is not very useful if you are showing images that are of value on their own and you would like to avoid placing text over them or cropping them.
subtitle-h3:
More notes on the use of slider module, second example
The second slider example is marked in admin area as ‘Slider module, height given by text, images scaled to match 50% of slide-width, heigh is cut, m_slider_on_white‘. The main difference to the 1st case is that it displays images as slider images and doesn’t use heading field in the general settings. The placement of the images is on the left side of the text than the window widths (or screen of the device used) is more than 767px; otherwise image is displayed on the top and text on the bottom of the slide. More detailed information about the image sizes and settings are given in the slides of the example. You can read it and observe what happens with the module than you resize the window.
In general, such use of the slider module can be attractive for displaying equally sized images that aren’t in a portrait format and with texts that have more or less equal length.
subtitle-h3:
More notes on the use of slider module, third example
The last example is good than it is important that no matter what size all image won’t be cropped. It uses a logic that is similar to the 2nd example but images are always scaled to be fully visible. The downside of such use is that depending on the window width images may look small comparing to the text. In the admin area this slide is marked as ‘Slider Module, 1st intro-slide dictates height, images as slides on the left side scaled to fit‘.
subtitle-h2:
More notes and the testimonial module
The testimonial module is suggested to be used in two contexts: as a section for quotations and as a section for the short information on the historical personalities. The example for the former use is in the beginning of this page with the short quote by Isaac Babel and is marked in admin area as a ‘quotes and testimonial Module‘.
The second example of the use is on the left side of this text or below it depending on the widths of the window (screen). This example uses an image of the Babel that has to be of a 150x150px size. In the admin area, this testimonial module is called ‘Testimonial for the info on historical person (dead), image 150x150px‘. In both cases the testimonial module is fairly easy to use.
On the side note, it is worth to mention that for the sections with additional information such as blurbs, testimonials and person modules the copy shouldn’t be simply copied from another webpages (like on this page). If the text has to stay unchanged because it is a factual information from the dictionaries, institutional materials or alike, it has to be clearly stated and referenced. Ideally the copy should be rephrased from the angle of the main content of the post, e.g. from the perspective of the KKF’s event that this post describes and emphasise particular aspects of the subject of the additional info that are important to the post.
Isaac Emmanuilovich Babel (Russian: Исаа́к Эммануи́лович Ба́бель; 13 July [O.S. 1 July] 1894 – 27 January 1940) was a Russian language journalist, playwright, literary translator, and short story writer. He is best known as the author of Red Cavalry, Story of My Dovecote, and Tales of Odessa, all of which are considered masterpieces of Russian literature. Babel has also been acclaimed as “the greatest prose writer of Russian Jewry”.[1] Loyal to, but not uncritical of, theCommunist Party of the Soviet Union, Babel fell victim to Joseph Stalin’s Great Purge as the result of his long-term affair with the wife of NKVD chief Nikolai Yezhov.
Gerasimov Institute of Cinematography
The Gerasimov Institute of Cinematography (Russian: Всероссийский государственный университет кинематографии имени С.А.Герасимова, meaning All-Russian State University of Cinematography named after S. A. Gerasimov), aka VGIK, is a film school in Moscow, Russia. With no confirmed accounts, VGIK, along with the Film and TV School of the Academy of Performing Arts in Prague and The American Film Institute, competes for the title of being the oldest film school in the world.
More notes on the blurb module-h2
The blurb module has three examples on this webpage. The first one was used twice in the beginning of the page for displaying information about the featured images and HTML formatting. In these instances the blurb uses the abstract icon and shows some additional information that is relevant to the main copy.
The second example of the blurb module is above this text and has an image of the top. Similarly, it shows how additional information about places, organisations, objects, etc. can be presented. Ideally the image that is used, should be enough wide to cater for the wide screens (1200-930px). So for example, above the image of VGIK is pixelated because it is only 440x337px but on a laptop screen with the browser window maximised, it gets scaled to 867x664px.
The third example is below the text and is about the RGALI. The difference is that image is on the left side of the text. In this case we don’t need to use such a large image but we have to think that as the window widths gets smaller than 857px and there is not enough space for the text, the image switches to be displayed on the top of the text and is scaled to fit the width of the testimonial module. In the example RGALI logo gets 438x438px big by the window sizes smaller than 857px. Thus the image should be at least 438x438px big and not as in the example 108x108px big (hence pixelation again).
This is a blurb with info on some organisation
The Russian State Archive of Literature and Arts, “Archive of Muses”, is the largest store of Russia where the richest materials on history of the home literature, music, theatre, cinema, fine arts and architecture are concentrated. It was established in 1941, partly on the basis of the collection of the State Literature Museum, Goslitmuseum (GLM), as the Central State Literature Archive (TsGLA). The proper funds from Central State October Revolution Archive of the USSR (TsGAOR), State Historical Museum (GIM), Central State Archive for Old Documents (TsGADA), the State Tretyakov Gallery and other archives were transferred to it. In 1954 it was renamed the Central State Archive of Literature and Arts of the USSR, and in 1992 it was renamed the Russian State Archive of Literature and Arts (RGALI).
More notes on the person module-h2
Finally there is a person/team member module that is used as an example below this text. It has a similar logic to the blurb with the image on the left but image switches to the top position already at the window with the 1078px widths. That means that the size to which image is scaled at the top position is bigger than in the case with the blurb – 627x318px; as the original image is 660x335px big it still looks fine.
Now about embedding the video and sound-h2
Below are four media examples: soundcloud, youtube, youtube and vimeo. In the admin area they are inserted via code module. It means that inside this module is a html code (iframe or shortcode) that embeds the media from these platforms. All of these platforms have their own service to generate the embedding code with different options. The easiest way is to leave everything in the example code as it is and replace only the url part for the file that you want to embed.
For example the soundcloud has the following shortcode that is between the square brackets:
soundcloud url="https://api.soundcloud.com/tracks/285475614"
params="auto_play=false&color=bfb889&hide_related=true&show_comments=false&
show_user=true&show_reposts=false&show_artwork=true&
visual=false" width="100%" height="160" iframe="true" /
The url part is https://api.soundcloud.com/tracks/285475614 that has to be changed to the correct one. Usually the url is given than you click on: share button. For the soundcloud the link will be given than you click on the embed tab and tick the WordPress code box. For the vimeo and youtube after you clicked on the share button the url will be under the link field and in iframe part as src respectively. The latter can look like:
<iframe src="https://www.youtube.com/embed/F516qFx7zdw?showinfo=0"
width="560" height="315"
frameborder="0" allowfullscreen="allowfullscreen"></iframe>
where only the https://www.youtube.com/embed/F516qFx7zdw part should be copied and used to replace the link to the video file that is used in the example code.
The difference between the 1st and 2nd youtube videos in the examples is that the former has parameters that allow to show the play list at the end of it and the second not.
Some final notes-h2
Although different situations and contexts ask for different image sizes as a rule of thumb it is good to know that images will get scaled to fit their elements and those it is better to provide a bigger image that could potentially fill entire width of the screen rather than a small image that can appear pixelated than scaled. It is also important to think about the proportions of the images as in the most examples (apart from the cases with the potential cropping of images) they will stay the same. So firstly depending on the module an optimal proportion of the image can be used and than its larger size for the case of possible scaling (e.g. we could decide that 1200px should be good enough for the elements that take full width, 900px is the next smaller size followed by 600px for the elements that are not fill width).
And finally, this post with the module examples can be duplicated in the admin area to provide the copy for the creation of the new post. In general the structural elements of the post copy should be known at this point and thus only corresponding components should be left in the copy and everything else should be removed. The original post (this webpage) can be kept open in the new tab for references during the content editing and population. And don’t forget that green modules are global, any changes in Advanced Design setting will affect all posts that use these modules.
