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_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 | |
|
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". |
Social
| Key | Label | Description |
|---|---|---|
|
social_linkedin
|
LinkedIn profile | Please fill in the complete URL (including http(s)://). |
|
social_github
|
Github username | Only fill in the account name (the part after https://github.com/). |
|
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_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_pinterest
|
Pinterest board | 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_facebook
|
Facebook account | 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/). |
|
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. |
Content
| Key | Label | Description |
|---|---|---|
|
divider_content_1
|
Divider | |
|
header_visibility_default
|
Default header visibility | This can be overruled on each page if needed. |
|
qredits_visibility
|
Show credits in copyright footer | This adds a little Romanesco badge at the bottom right corner of the footer, linking to the website. Feel free to change this icon, and/or point it somewhere else. You could also create a dedicated 'colophon' page for your project, and link to that. |
|
divider_content_2
|
Divider | |
|
qredits_img
|
Credits image / icon | This overrides the default Romanesco logo. |
|
global_footer_id
|
Default footer | This can be overridden per page, or per context (by adding a global_footer_id context setting). |
|
qredits_title
|
Credits title | This overrides the default text retrieved from lexicon. |
|
footer_visibility_default
|
Default footer visibility | This can be overruled on each page if needed. |
|
qredits_link
|
Credits link | This overrides the default link, pointing to https://romanesco.info. |
Overviews
| Key | Label | Description |
|---|---|---|
|
overview_img_pano_fallback
|
Fallback image (Panorama) | 21:9 aspect ratio |
|
overview_img_square_fallback
|
Fallback image (Square) | 1:1 aspect ratio |
|
overview_img_landscape_fallback
|
Fallback image (Landscape) | 4:3 aspect ratio |
|
overview_icon_fallback
|
Fallback icon | |
|
overview_img_portrait_fallback
|
Fallback image (Portrait) | 3:4 aspect ratio |
|
overview_logo_fallback
|
Fallback logo | For empty client logo's in testimonials / portfolio. |
|
overview_img_wide_fallback
|
Fallback image (Wide) | 16:9 aspect ratio |
Presentation
| Key | Label | Description |
|---|---|---|
|
divider_1
|
Divider | |
|
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). |
|
logo_inverted_path
|
Logo (inverted) | An inverted version of your logo, for display on dark backgrounds. |
|
footer_background_default
|
Default footer background | You can always change the footer background on each page later if you want. |
|
header_background_default
|
Default header background | You can always change the header background on each page later if you want. |
|
theme_color_primary
|
Primary theme color | Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text. |
|
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_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. |
|
divider_3
|
Divider | |
|
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. |
|
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. |
|
logo_badge_inverted_path
|
Badge (inverted) | An inverted version of your badge icon, for display on dark backgrounds. |
|
divider_2
|
Divider | |
|
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. |
|
theme_page_background_color
|
Page background color | This color is visible on detail pages and underneath transparent segments. |
|
divider_5
|
Divider | |
|
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. |
|
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_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. |
|
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. |
|
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,wght@0,400;0,700;1,400;1,700. |
|
cta_background_default
|
Default CTA background | You can always change the background in the CTA itself if you want. |
|
divider_4
|
Divider | |
|
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. |
|
theme_color_secondary
|
Secondary theme color | Pick a relatively dark color, in order to maintain enough contrast with inverted (white/light) elements and text. |
Performance
| Key | Label | Description |
|---|---|---|
|
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. |
|
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. |
|
divider_performance_2
|
Divider | |
|
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. |
|
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. |
|
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_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. |
|
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. |
|
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_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. |
|
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! |
|
divider_performance_1
|
Divider | |
|
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. |
Feedback
| Key | Label | Description |
|---|---|---|
|
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. |
|
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. |
|
disqus_shortname
|
Disqus shortname | The name of the Disqus account that will collect your comments. |
SEO
| Key | Label | Description |
|---|---|---|
|
google_analytics_ua
|
Google Analytics tracking ID | DEPRECATED. Use the code field below to insert the full analytics tracking snippet. |
|
analytics_tracking_code
|
Analytics tracking code | Directly insert the tracking snippet of your analytics platform of choice. If you're using the ConsentFriend extra, this code will only be inserted after your visitor grants permission. Make sure it is inside |