Configuration
Configuration settings are available as placeholders throughout the project. You can change them (or add new settings) under Extras > Configuration if needed.
If you're worried about these settings affecting too much of your project: don't! Many settings can be overruled on page level with a Template Variable and you can attach a setting to a context too with a different value.
Please note that for changes made under Presentation, it takes around 10-30 seconds to be reflected on the website. This is because a background process needs a little time to rebuild the styling assets.
Contact
| Key | Label | Description |
|---|---|---|
|
client_type
|
Primary entity | Is this a project for an individual person, or an organization? This setting decides whether to present you to the outside world as "I" or "We". |
|
client_phone
|
Primary phone number | |
|
client_email
|
Primary email address | All emails coming from the website will be sent to this address. |
|
client_address
|
Primary address |
Social
| Key | Label | Description |
|---|---|---|
|
social_whatsapp_text
|
WhatsApp message | Predefined text for the message that the visitor can send. You can use placeholders here to include some information about the referring page. |
|
social_linkedin
|
LinkedIn profile | Please fill in the complete URL (including http(s)://). |
|
social_twitter
|
Twitter account | Only fill in the name of the Twitter account here (so no full URL). This accountname can then be used for shares and @mentions. |
|
social_youtube
|
Youtube channel | Please fill in the complete URL (including http(s)://). |
|
social_whatsapp
|
WhatsApp number | A mobile phone number connected to an active WhatsApp account. If entered, visitors can start a chat directly from the website. Needs to be formatted as number, without any leading zeros. |
|
social_facebook
|
Facebook account | Please fill in the complete URL (including http(s)://). |
|
social_sharing_channels
|
Social sharing channels | Which social media options do you want to include in situations where content can be shared? Enter a comma-separated list and make sure all options have a chunk for rendering the button. |
|
social_github
|
Github username | Only fill in the account name (the part after https://github.com/). |
|
social_pinterest
|
Pinterest board | Please fill in the complete URL (including http(s)://). |
|
social_instagram
|
Instagram profile | Only fill in the account name (the part after https://instagram.com/). |
Content
| Key | Label | Description |
|---|---|---|
|
footer_visibility_default
|
Default footer visibility | This can be overruled on each page if needed. |
|
header_visibility_default
|
Default header visibility | This can be overruled on each page if needed. |
|
qredits_text
|
Text in credits popup | This overrides the default text retrieved from lexicon. |
|
global_footer_id
|
Default footer | This can be overridden per page, or per context (by adding a global_footer_id context setting). |
|
qredits_visibility
|
Show credits in copyright footer | This adds a little Romanesco badge at the bottom right corner of each footer, which opens a popup on click with additional information. |
Overviews
| Key | Label | Description |
|---|---|---|
|
overview_img_wide_fallback
|
Fallback image (Wide) | 16:9 aspect ratio |
|
overview_img_pano_fallback
|
Fallback image (Panorama) | 21:9 aspect ratio |
|
overview_img_square_fallback
|
Fallback image (Square) | 1:1 aspect ratio |
|
overview_logo_fallback
|
Fallback logo | For empty client logo's in testimonials / portfolio. |
|
overview_img_landscape_fallback
|
Fallback image (Landscape) | 4:3 aspect ratio |
|
overview_img_portrait_fallback
|
Fallback image (Portrait) | 3:4 aspect ratio |
|
overview_icon_fallback
|
Fallback icon |
Presentation
| Key | Label | Description |
|---|---|---|
|
theme_scale_ratio
|
Scale ratio | This setting controls the difference in size between various elements. A low scale ratio will keep things close together, whereas a high ratio will produce bold, beefy pages. Right now, this setting is only used for scaling headings based on the current font size, but it could be applied to other settings too in the future (margins, paddings, line heights). |
|
theme_color_primary_light
|
Primary theme color (Light) | A light variant of the primary color, for faintly tinted backgrounds. Make sure it has enough contrast with dark (primary) elements and text. |
|
cta_background_default
|
Default CTA background | You can always change the background in the CTA itself if you want. |
|
theme_font_fallback
|
Fallback font | Comma separated list of font(s) to use if the Google font can't be loaded (or is not defined). |
|
theme_page_background_color
|
Page background color | This color is visible on detail pages and underneath transparent segments. |
|
theme_border_radius
|
Border radius | Average border radius (in pixels). The theme will still select a lower or higher value (relative to this setting) if that suits the context better. If set to 0, all visual elements will be square by default. |
|
logo_inverted_path
|
Logo (inverted) | An inverted version of your logo, for display on dark backgrounds. |
|
divider_5
|
Divider | |
|
theme_font_header
|
Heading font | Specify a Google webfont for all headings on the site. You can enter just the name (i.e.: Open Sans) or a string containing font weights too. Use the latest (v2) syntax for this: Open+Sans:ital,[email protected],400;0,700;1,400;1,700. |
|
logo_badge_inverted_path
|
Badge (inverted) | An inverted version of your badge icon, for display on dark backgrounds. |
|
divider_1
|
Divider | |
|
theme_color_primary
|
Primary theme color | Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text. |
|
layout_background_default
|
Default layout background | Applies to ContentBlocks layouts. Useful for example if you want to have a non-white page background, in which case you'd probably use mostly transparent layouts. |
|
theme_font_page
|
Page font | Specify a Google webfont for all regular content. The formatting is the same as described above for the heading font. If you want to use the same font as the headings, you only need to enter the font name here. And if you leave this empty, the fallback font will be used. |
|
logo_path
|
Logo | Upload a logo for your website. For the sharpest result, provide an SVG file. If that's not an option, then PNG is your best bet. JPG files are allowed, but should be avoided. |
|
divider_4
|
Divider | |
|
logo_target_width
|
Logo target width | The desired width (in pixels) of the logo on a large desktop monitor. This probably won't turn out to be the exact width, because the size of the logo is defined in relative units, which are different per screen size. It will be close enough though. |
|
footer_background_default
|
Default footer background | You can always change the footer background on each page later if you want. |
|
theme_font_size
|
Font size | This controls the font size of regular page content. Combined with the font scale ratio setting, this will decide how big text will appear on various screens. |
|
header_background_default
|
Default header background | You can always change the header background on each page later if you want. |
|
divider_2
|
Divider | |
|
logo_badge_path
|
Badge | Upload a square version of the logo. This will be used for the favicon and other locations where a badge icon fits in better. |
|
theme_color_secondary
|
Secondary theme color | Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text. |
|
divider_3
|
Divider | |
|
theme_color_secondary_light
|
Secondary theme color (Light) | A light variant of the secondary color, for faintly tinted backgrounds. Make sure it has enough contrast with dark (primary) elements and text. |
Performance
| Key | Label | Description |
|---|---|---|
|
critical_excluded_templates
|
Non-critical templates | Don't generate critical CSS for pages with these templates. Reference templates by ID and separate them with a comma. Global templates are excluded automatically. |
|
img_quality
|
Image quality | This affects the file size of generated images, and thereby also the loading time of each page. Please note that all images in Romanesco are resized first, before being displayed in the browser. This means you don't have to worry about file sizes when uploading images in MODX. In fact, it's better to upload high quality images (1-3 MB) because the image processor gives better results if it has good source files. |
|
divider_performance_2
|
Divider | |
|
critical_shared_templates
|
Shared critical templates | Use a single critical CSS file for pages with these templates. Reference templates by ID and separate them with a comma. |
|
cache_buster
|
Cache buster | When you cache static assets on server level (recommended for performance), they will be stored in the visitors' browser for a long time period (often 1 year). This means that changes to these files won't be visible in their browser on return visits, unless the filename is different. The cache buster takes care of this. When static assets like CSS or Javascript are updated, they receive a new suffix so the client browser will treat it as a new file and download it again. |
|
divider_performance_1
|
Divider | |
|
minify_css_js
|
Minify CSS/JS | Convenient to switch off during development, but don't forget to turn it back on once the site is live! |
|
max_thumb_width
|
Maximum image width | Content images will never exceed this width. Make sure it is at least as wide as the widest possible container, but also consider performance by not setting it too high. |
|
svg_inline
|
Inline SVGs | Embed SVG code into the HTML itself by default. This will save a lot of requests to and little downloads from the server, but at the expense of not being able to cache the SVG file after the initial download. For this reason, it works best on sites with a large amount of very small SVGs (< 5kb, like icons). An added bonus is that inline SVGs can be manipulated with CSS. |
|
custom_cache
|
Custom caching | By default, MODX clears the site cache very thoroughly and very often. This means that every time you save something in the manager (even something small like a fixed typo), a lot of content needs to be regenerated from the database, resulting in slower page loads. Thats why some parts of the cache have been moved to their own partition (bucket), so they won't be cleared on every save action. The only thing I did not quite figure out yet is how to tell MODX that parts of this custom cache have been updated, so you will have to inform MODX yourself. There is a button in the top menu under Magage that says "Clear Custom Cache". Pressing that ensures that all the latest changes to any custom partition are visible on the website. There is also a submenu for clearing it per partition. |
|
img_optimize
|
Optimize images | By default, the images are already thumbnailed to their appropriate size(s) by MODX, using the quality setting above. This works fine as far as image quality is concerned, but from a performance perspective, things could be better. The generated JPG and PNG thumbnails are still quite large, so they require more time to load. The solution is to use a post processor (in this case a library called Squoosh, which needs to be installed on your server), which optimizes the thumbnail to reduce file size and creates an alternative version in a modern image format (in this case WebP). This drastically reduces file size, without sacrificing image quality. |
|
img_hidpi
|
Optimize images for HiDPI / Retina displays | If set to 'yes', the responsive image function will make sure that there's always an image available at double its original resolution. This way, images and graphics will always look crisp on devices with a higher pixel ratio, but it also means longer loading times on these devices. |
|
critical_css
|
Enable critical CSS | When enabled, a CSS file will be generated for each resource, containing only the styles needed to properly display content above the fold. This feature requires the 'critical' NPM package to be installed locally. |
Feedback
| Key | Label | Description |
|---|---|---|
|
comment_platform
|
Commenting platform of choice | My personal preference is to use Commento, a free and open source discussion plugin. Commento is lightweight and privacy-focused, so no ads, third-party tracking scripts, or injected affiliate links... If you want all that, don't worry: you can still choose Disqus. |
|
commento_url
|
Commento URL | Full URL to where Commento is hosted (incl. https://). You can run Commento on your own server, or use their hassle free cloud service by creating an account on commento.io. |
|
disqus_shortname
|
Disqus shortname | The name of the Disqus account that will collect your comments. |
SEO
| Key | Label | Description |
|---|---|---|
|
alternative_tracking_code
|
Alternative tracking code | Use another analytics platform instead of Google Analytics. Matomo for example, is free and open source, giving you full ownership of your data. You can host Matomo on your own server, or create a cloud account on matomo.org. Because the tracking code is often slightly customized for each site, it's easier to just paste the full javascript snippet here. Always make sure it's inside |