Fix image sizes for new screenshots

README.md

@@ -35,7 +35,7 @@ To start server use:
 ```bash
 # Use SOURCE_EDITOR_URL variable to point to speciffic dashboard url. By default, SOURCE_EDITOR_URL=https://editor.flotiq.com is used.
 bash .github/scripts/get-plugins-docs.sh # Pull dynamically generated plugin docs. 
-mkdocs serve # Start devlopment server
+mkdocs serve # Start devlopment server. Use --dirtyreload option to speed up reloading, but be aware, that this might break navigation on the preview.
 ```
 
 After that, the documentation should be available on http://localhost:4000.

docs/API/dynamic-content-api.md

@@ -19,7 +19,7 @@ Part of the Content API are the beautiful API docs, along with code samples to s
 
 There are 3 important parts of the API documentation that Flotiq provides for you:
 
-![](images/dynamic-content-api-docs.png)
+![](images/dynamic-content-api-docs-annotated.png)
 
 1. Every time you create a Content Type Definition - your API is extended with endpoints that support this new Content Type.
 2. The descriptions of these endpoints contain all the information regarding the structure and constraints of the Content Type you defined.

docs/API/index.md

@@ -5,7 +5,7 @@ All API endpoints that are published in Flotiq are currently using an API-key au
 
 There are two types of API keys - [Application Keys](#application-api-keys) and [User Defined Keys](#user-defined-api-keys). Both types of keys can be retrieved from the API Keys page in the Flotiq Panel (click on your avatar to open the menu):
 
-![](images/user-profile.png){: .center .border}
+![](images/user-profile.png){: .center .width25 .border}
 
 All keys restrict access to not only CRUD of the Content Objects, but also to their hydration and search; the same restrictions apply to GraphQL endpoint.
 

docs/index.md

@@ -36,7 +36,7 @@ There are 2 primary ways to interact with Flotiq: 1. through the [user interface
 
 Data model in Flotiq is created by adding one or more Content Type Definitions (we often refer to them as CTDs). CTDs are a key part of the system, where you - the user - describe the content (data model) you will be storing in Flotiq. The [Content Type builder](panel/content-types.md) is the tool we provide for you to easily define your Content Types, using a graphical User Interface. Type Definitions are like classes in object-oriented programming, they describe object properties. 
 
-![](panel/images/EditContentTypeDefinitions.png)
+![](panel/images/EditContentTypeDefinitions.png){.center .width50 .border}
 
 Read more about how to use the Content Type editor in the [Panel docs](panel/content-types.md)
 

docs/panel/content-objects.md

@@ -14,7 +14,7 @@ Click tile on the Type Definitions to go to the content browser page:
 
 or entry in the left menu:
 
-![](images/ContentMenu.png){: .center .border}
+![](images/ContentMenu.png){: .center .width25 .border}
 
 The content browser provides a convenient grid interface to browse and search through large amounts of data quickly.
 Users can customize the grid according to their preferences:
@@ -48,7 +48,7 @@ You can save Content Object only when you insert values in all required fields.
 
 Interaction buttons of Content Objects are in the top right corner of the edit screen:
 
-![](images/EditButtons.png){: .center .border}
+![](images/EditButtons.png){: .center .width50 .border}
 
 To save and stay on the form, click the `Save` button.
 
@@ -236,7 +236,7 @@ You can change the order of objects in the list using the up and down arrow in t
 You can remove the object from the list using the trash icon in the top right corner of the object form.
 
 If the list property contains a `list` child property, the nested form will be displayed.
-![](images/nested list.png)
+![](images/nested list.png){: .center .width75 .border}
 
 ### Geo
 
@@ -330,11 +330,11 @@ remove the block (`X` button) and move the block down (`arrow down` button).
 
 You can delete the object either by clicking the `Delete` button on the edit object page (in the top right corner):
 
-![](images/EditButtons.png){: .center .border}
+![](images/EditButtons.png){: .center .width50 .border}
 
 Or by selecting it on the content browser and clicking the `Remove selected` button:
 
-![](images/ListRemove.png){: .center .border}
+![](images/ListRemove.png){: .center .width50 .border}
 
 !!! warning
     You can only remove objects that are not linked to any other object in the system.

docs/panel/content-types.md

@@ -11,8 +11,8 @@ Example:
     * id – string, unique, required, Flotiq Dashboard adds this automatically
     * title – string, required, part of the object title
     * slug – string, unique, required 
+    * excerpt - string, required
     * content – string, required
-    * thumbnail - relation to Media type
     * headerImage - relation to Media type
 
 You need an activated account to see the CTD page in the Dashboard. 
@@ -27,7 +27,7 @@ The Modeler interacts with the ``/api/v1/internal/contenttype`` endpoint on beha
 
 Click `Type definitions` in the menu on the left to get to CTDs list:
 
-![](images/TypeDefinitionsMenu.png){: .center .border}
+![](images/TypeDefinitionsMenu.png){: .center .width25 .border}
 
 If you don't have any Content Types defined yet, you will see a list of tiles which will help you to quickly create . Select your first one or create such from scratch by choosing `Custom`. It is also possible to create additional CTD by clicking `Add definition` button in the top right corner of the page. 
 
@@ -44,8 +44,8 @@ It has five properties:
 
 1. title
 2. slug
-3. content
-4. thumbnail
+3. excerpt
+4. content
 5. headerImage
 
 
@@ -63,15 +63,15 @@ The `slug` property is also required, but also must be unique across all your bl
 
 ![](images/AddContentTypeDefinitionsSlug.png){: .center .width75 .border}
 
-The `content` property is set to generate Rich Text input (we use CKEditor in Flotiq):
+The `excerpt` property is defined as a simple text area field.
 
-![](images/AddContentTypeDefinitionsContent.png){: .center .width75 .border}
+![](images/AddContentTypeDefinitionsExcerpt.png){: .center .width75 .border}
 
-The `thumbnail` property is defined as a relation to Media CTD - a system type definition that anyone can use but sees only their entries. It can only have one element added.
+The `content` property is set to generate Rich Text input (we use CKEditor in Flotiq):
 
-![](images/AddContentTypeDefinitionsThumbnail.png){: .center .width75 .border}
+![](images/AddContentTypeDefinitionsContent.png){: .center .width75 .border}
 
-The `headerImage` is set up exactly like the thumbnail; the only difference is the property name.
+The `headerImage` is is defined as a relation to Media CTD - a system type definition that anyone can use but sees only their entries. It can only have one element added.
 
 ![](images/AddContentTypeDefinitionsHeaderImage.png){: .center .width75 .border}
 
@@ -83,7 +83,7 @@ After saving your CTD you will be redirected to the CTDs list, where you can cli
 
 Predefined CTD tiles are no longer visible. You can use the dropdown menu on the top right corner to add more of such types.
 
-![](images/TypeDefinitionsAddButton.png){: .center .border}
+![](images/TypeDefinitionsAddButton.png){: .center .width25 .border}
 
 ## Updating Content Type Definitions
 

docs/panel/index.md

@@ -25,7 +25,7 @@ This part of Flotiq's interface will be your starting point whenever you begin w
 
 From the main screen showing all Content Type Definitions you can either create a new CTD or edit an existing one. Both actions will take you to the Content Type editor, which is a convenient UI to define your data model.
 
-![Flotiq Content Type Editor](images/EditContentTypeDefinitions.png)
+![Flotiq Content Type Editor](images/EditContentTypeDefinitions.png){: .center .width75 .border}
 
 ## Content Object grid
 

docs/panel/media-library.md

@@ -32,7 +32,7 @@ In order to create a variant through dashboard, simply press the edit button on
 
 A window will pop up with a WYSIWYG editor, that will allow you to easily modify the image according to your needs.
 
-![Editing media](./images/Create-variant.png)
+![Editing media](./images/Create-variant.png){.center .width75 .border}
 
 After you are done with modifying the image, press `Save changes` button and a variant with this set of transformations will be added to your media data.
 

docs/panel/predefined-content-types.md

@@ -8,7 +8,7 @@ Custom tile opens empty CTD.
 
 If you already have at least one CTD, you can use the dropdown menu on the top right corner to add more predefined CTDs.
 
-![](images/TypeDefinitionsAddButton.png){: .center .border}
+![](images/TypeDefinitionsAddButton.png){: .center .width25 .border}
 
 ## Blog Post
 

docs/panel/users.md

@@ -10,7 +10,7 @@ This page describes how to manage **Users**, including your own settings, using
 
 Click `Users` in the menu on the left to get to users list:
 
-![](images/UsersMenu.png){: .center .border}
+![](images/UsersMenu.png){: .center .width25 .border}
 
 If you don't have any new user added, you will see only your own user on the list. 
 
@@ -32,7 +32,7 @@ Once new user verifies his email, he will be asked to enter a new password and t
 
 When browsing users list in `Users` tab from the left panel, you can make changes to your user by clicking the pencil icon, which will open the `Edit User` tab. 
 
-![](images/EditUser.png){: .center .border}
+![](images/EditUser.png){: .center .width75 .border}
 
 Here you can change your settings, like your name and password, but also edit your email subscription preferences, or the user.