fbpx
This is a project post_type with all modules

This is a project post_type with all modules

This is the excerpt to understand how many characters should one excerpt be. This particular one is 521 characters long including the white spaces. The one rule of thumb no matter what is to stay consistent. Advise your clients to always keep all excerpts the same length. It creates a more professional look and prevents some stories from looking more important. Longer excerpts may be appropriate if they’re tied to stories in larger content sections, such as the latest stories listed above the fold or in the header.

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

Isaac Babel (1894 – 1940)

Russian language short story writer

]

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:
    &nbsp;
    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.

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.

Here is my heading in heading of general settings

Here is my heading-h4 in text section

And here is my intro text that will define the height of the slide. If i need i can insert empty paragraphs like below. Images used as a background, they are scaled and cut to accommodate the area. And for the intro slide we don’t use text overlay setting as we don’t have any image but perhaps we use background overlay instead.

 

 

And here after the empty paragraphs a little more text.

 

 

Here is my heading-h1 in text section

Or we don’t use the heading from the heading in general settings and set the intro slide in only in the text area. And we don’t use text overlay setting as we don’t have any image.

 

And here after the empty paragraphs a little more text.

Heading from the heading in general settings

And here is some text about something. The wolf pulled the string and the door opened, and then he immediately fell upon the good woman and ate her up in a moment. He then shut the door and got into the grandmother’s bed, expecting Little Red Riding Hood, who came some time afterwards and knocked at the door. More instructive notes are in the next slides.
Hi there, if you use text in the slides (in text section or heading in general settings)
please, don’t forget to switch ‘use text overlay’ on in general settings!
It is important for styling :).

well, well, well

so what are you doing?

This image is really cut. h3

It is questionable how useful it is. Do the links highlight?

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.

Here is a title-h4 of my image or the little message

In the windows with the min-width: 767px this slider calculates the maximum height based on the longest text that was typed into the each of the slides. Than each image is firstly scaled so that it can accommodate about 50% width of the slider module. If the height of the image at this calculated scale exceeds the given height of the slider module than the image is cropped on its bottom and top. Read the next slide.

Read by Natasha
Adapted by Bertie
Picture by Milo Winter

Also don’t use the heading field on the top of the general settings in this example. If you need headings have them as a part of the text. Bear in mind that there are hard and soft returns to make line breaks.  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 like this last sentence but more importantly they help to control how much space the text will take on the slide .
In this slide the image has following size: 394×380 px.

However in the windows (or screens) with the width smaller than 767 px, the image is on top and text is beneath it. Those if the height of the text and the image change from the slide to slide than slides with less text will have large empty areas on a mobile displays (or narrow windows).  This can be avoided by using images with the same size and about the same size texts.
The image used in this slide has a following size: 380x380px.
This famous tale is short but very SNAPPY!
NEWS FLASH: LITTLE RED RIDING HOOD ESCAPES ! (We’ve updated the ending).
Read by Natasha. Duration 3:18
Original Pictures for Storynory by Sophie Green

Once upon a time there lived a little country girl, the prettiest creature who was ever seen. Her mother had a little red riding hood made for her. Everybody called her Little Red Riding Hood.
The image used in this slide has a following size: 515x380px.

One day her mother said to her: “Go my dear, and see how your grandmother is doing, for I hear she has been very ill.”
Little Red Riding Hood set out immediately.
As she was going through the wood, she met with a wolf. He asked her where she was going.

“I am going to see my grandmother.”
“Does she live far off?” said the wolf.
“It is beyond that mill you see there”.

The image used in this slide has a following size: 798x380px.

The image used in this slide has following size: 575x886px.
The slide is important to illustrate the cropping of the images.
Let’s resize the window to see when it will be cut and how.

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‘.

Here is my heading in heading of general settings

Here is my heading-h4 in text section

This slider will never crop you image but it needs equal sizes for text and images to look good.

Here is heading-h4 from the text section

The image that is used here has a following size  900x500px. The difference to the previous slider module (m_slider_on_white) is that here images can be scaled but they are not cut and remain fully visible. As above it is better if images are of the same size and texts about the same length. The slide with the most text dictates the height of the module.

Here is heading-h4 from the text section

The following slider use images with the different sizes and the same text. This should illustrate how images are displayed and this depends on their proportions, the longest text used in the slides and the widths of the window or screen widths.

Here is heading-h4 from the text section

And here is the text about the image.
One day her mother said to her: “Go my dear, and see how your grandmother is doing, for I hear she has been very ill.” Little Red Riding Hood set out immediately. As she was going through the wood, she met with a wolf. He asked her where she was going.

“I am going to see my grandmother.”
“Does she live far off?” said the wolf.
“It is beyond that mill you see there”.

Here is heading-h4 from the text section

And here is the text about the image.
One day her mother said to her: “Go my dear, and see how your grandmother is doing, for I hear she has been very ill.” Little Red Riding Hood set out immediately. As she was going through the wood, she met with a wolf. He asked her where she was going.

“I am going to see my grandmother.”
“Does she live far off?” said the wolf.
“It is beyond that mill you see there”.

Here is heading-h4 from the text section

And here is the text about the image.
One day her mother said to her: “Go my dear, and see how your grandmother is doing, for I hear she has been very ill.” Little Red Riding Hood set out immediately. As she was going through the wood, she met with a wolf. He asked her where she was going.

“I am going to see my grandmother.”
“Does she live far off?” said the wolf.
“It is beyond that mill you see there”.

Here is heading-h4 from the text section

And here is the text about the image.
One day her mother said to her: “Go my dear, and see how your grandmother is doing, for I hear she has been very ill.” Little Red Riding Hood set out immediately. As she was going through the wood, she met with a wolf. He asked her where she was going.

“I am going to see my grandmother.”
“Does she live far off?” said the wolf.
“It is beyond that mill you see there”.

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.

Isaac Babel (1894 – 1940)

Russian language journalist, playwright, literary translator, and short story writer

this alt text typed from the blurb module general settings

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 alt text typed manually in the blurb module general settings

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.

[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" /]

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.

Pin It on Pinterest