Description

The Lodgify Themes can be customized using Liquid templates to override all or partial content, additionally all the text can be overrided using a custom i18n file, or new translated text can be added to allow your custom theme be fully localized

We think the Lodgify Theme system is really powerful and allows the user to change almost everything, but there are also some limitations and dependencies. We're trying to improve the system to give the maximun flexibility to the designer so you can focus on the "Design" part

Your first theme

Firsts Steps

We linked Lodgify to Google Drive. So in order to connect your Theme files with Lodgify, you would need to do the following one-time setup:

  1. Go to http://www.lodgify.com and create a Lodgify account.
  2. Download the latest version of the Lodgify “Capucine” default theme files here (contact us for other Lodgify default theme files)
  3. Create a Google Drive Folder and drop the default theme files into that folder.
  4. Give that Google Drive Folder a name (this will become the title of your theme and shouldn't be changed, also no spaces and special characters please)
  5. Share the Google Drive folder with us via info@lodgify.com ("Can Edit") and send an email to info@lodgify.com stating your folder name and Lodgify user name.
  6. We will notify you once we have manually linked your Google Drive folder with your Lodgify Account and voilà, you can now fully customize your Lodgify website in real-time editing your Theme files from Google Drive.

TIP: Install Google Drive on your computer for local/synched editing. For browser-based editing you could use the Neutron Drive Chrome plugin

Theme structure

A Theme is structured basically with layouts, assets and templates. The only Mandatory file is a theme layout, that defines the generic page structure, but uses the defaul layouts for the rest of the content.

With Lodgify's Theme system you can override the default content to use your own (with certain limitations, but you can change almost everything). On the Right menu you can see all the templates available organized by category: Page, Special and Widgets.

The Page templates are the most important. The only one mandatory is the theme.liquid, but there are overridable templates for the first level page templates. Special templates are those that are used for some concrete functionality like the prices table or the search results. And the Widgets templates are the ones used to render the content associated to the widgets added to a page with the Lodgify Content Management System.

To create a theme and atfer the setup we will provide you, you need the next folder structure:

  • /assets: It will contain all the styles, images and javascript for your theme. We don't enforce any specific structure inside this folder, but we recommend something like
    • /css: less and stylesheet files
    • /img: images
    • /js: any required javascript file
  • /layout: This is where the main theme.liquid file is located
  • /snippets: It will contain utility liquid templates.
  • /templates: The main folder for page and special templates
    • /widgets: Here is where the widgets templates will be located

NOTE: On the starter template package we provide, we include all the templates, but renamed to not be used if there are no customizations. To start customizing a template, please rename from "-_homepage.liquid" to "_homepage.liquid" removing the dash at the beginning of the filename.

Assets

You can add your own images, stylesheets, javascript, etc.. to your custom theme, and then link the files on your theme. There is only one mandatory file you need to put on css folder, and its a user_styles.less file. This file creates the css styles based on the typeface and colors the user selected on Lodgify design backend. If you want to use your own and ignore those, leave the file empty. If you want to use that selected colors and typeface please take a look on the variables listed below

To link a stylesheet, image, or any other asset file in the theme you should use the asset_url liquid filter, so the final url will be used

<link rel="shortcut icon" href="{{ 'img/customfavicon.ico' | asset_url }}" />
{{'css/mystylesheet.css' | asset_url | stylesheet_tag}}

user-styles.less variables

@font-body Font face selected for the text
@font-body-size Font size for the text
@font-title Font face selected for the Title
@font-title-size Font size for the title
@font-subtitle Font face selected for the subtitle
@font-subtitle-size Font size for the subtitle
@color-bg-start Color for the background, if there is a @color-bg-end then this is the gradient start color
@color-bg-end Color end for the background gradient
@color-logo Color for the logo
@color-links Color for the links
@color-action Color for the actions like buttons or other visual components

Internationalization (i18n)

Lodgify Themes system allows the designer to change all the texts used on the template with custom text for any language, even add a new ones so a fully localized custom template can be created.

To override, create or remove your texts you can use the Custom translations tool available on the Lodgify Backend. This tool allows you to change the translation texts for a website

The previous file i18n.json file used for localization has been deprecated, and is not used anymore.

Limitations and Quirks

The themes have a dependency with Bootstrap 2.3.2. and the css is injected on all the themes, so it may cause issues with other Bootstrap and or css frameworks. Our intention is to remove this dependency at some point in the future but we don't have any estimated date for this. Also JQuery and stripped JQuery UI javascript are injected on the content.

Some templates and content rely hard on javascript to handle functionality and html identifiers should be keeped like in the original template.

Liquid

Reference

We use a port of Liquid into C# called DotLiquid so for generic reference we will point you in his direction at dotliquidmarkup.org and his GitHub documentation.

Most of it is a port from Ruby Liquid, so the original documentation should be helpful too liquidmarkup.org

All of the custom tags and filters documentation implemented in Lodgify Themes can be found in the next sections.

Liquid Tags

content_for_form

Injects in the output all the needed content for a form. You need to call this at some widgets or templates so we can add all the fields that need to be send to the server in order to work as expected.

Possible values: ownersignup, contactform, callmeback, searchform, bookingform, paymentform, reviewspages, reviewsadd, searchresultspage, subscribenewsletter

example
{% content_for_form OwnersSignup %}
content_for_header

Injects in the output all the needed content to load stylesheets, javascripts and other mandatory html

example
{% content_for_header %}
content_for_footer

Renders the content for footer

example
{% content_for_footer %}
content_for_layout

This tag should be used on theme.liquid, to render the content in the page. It will call the right page template dependign the page is currently being rendered.

example
{% content_for_layout %}
content_for_widget

Loads and renders the content for a given Widget. Named widgets can be: SearchForm, BookingSummary, SearchResult, Agreement, Payment

example
Renders the Search Widget
{% content_for_widget SearchForm %} 
Render the widgets for a page
{% for item in model.page_widgets -%}
{% content_for_widget item %}
{% endfor -%}
customization_less

Compiles and returns the user_styles.less file. You don't need to call this, because it's dinamically inserted through content_for_header.

decrement

i18n

Retrieves a named resource for the current culture. If multiple named resources are passed to the tag, then the first one will be used as format and the others as a positioned strings. Additionally you can also pass a context string and the associated value will be used

example
{% i18n G_OtherUnits %} => "Other Units"
{% i18n FormatTag, Replace0, Replace1 %} where FormatTag is like "{0} is {1}" => "Replace0 is Replace1"
{% i18n model.my_key %} and the i18n tag will use the content on model.my_key as a key to search on dictionaries.
{% i18n ... | js_encode %} and the i18n tag will encode the result so that it won't break a javascript string.
react_component

powered_by

Generates the Html content for a PoweredBy

example
{% powered_by -%}
react_deferred

Generates the Html content for a ReactDeferred component. It need a react Component Name, a priority (0-5) and a Event (string), optionally also you can pass a attribute list of props to be passed to the component

example
{% reactDeferred CurrencySelector 0 'onReady' position:"top", culture: model.culture -%}
increment

smart_image

react

use

It will search and include the contents of a specific template or snippet. Please use this tag instead the Generic Include in Liquid, because this one will perform the template search in the themes hierarchy in the correct order. It also allows for some additional perks. The format is: use "template" [with model] [parameter0,parameter1] Tag Parameters as: passes the variable with an specific name instead the default shortened template name repeat: it forces the template to no be repeated if the object passed is a collection. Useful if you want to iterate yourself the collection but don't want to pass all the model to the template. [any]:[value] You can also add your own parameters, and then use it on the loaded template

example
{% use "templates/widgets/contactform" %} => Render the template 
{% use "snippets/area_and_tooltip" with item -%} => Render the template and pass the model "item"
{% use "snippets/area_and_tooltip" with room as:item,repeat:false,add_size:false %} => Render the template, pass "room" object as model, but rename it to "item" so it can be used as item inside the template, do not repeat the template and add an additional parameter "add_size" with value of false

Liquid Filters

Html filters

Collection of utility filters to help creating generic HTML content
stylesheet_tag

Adds the html for a external css stylesheet

Name Description Type
stylesheet Stylesheet url String
media Media parameter for the stylesheet, default value "all" String
script_tag

Adds the html for a external javascript file

Name Description Type
script Script url String
crossorigin Value for the crossorigin attribute. Default is anonymous String
scriptid Value for the script id attribute. Default is null String
custom Custom attributes String
img_tag

Creates the basic html for an img tag

Name Description Type
img Url for the image String
alt Optional alternate text, if not provided will be left empty String
cssClass String
srcset String
sizes String
newid

Creates a new pseudo-uniqueidentifier

Name Description Type
text text that will prefix the identifier String
example
{{'my'|newid}}  => my-168a13
default_pagination

Creates the default pagination html structure

Name Description Type
pagination Pagination Model used to create the pagination. This object is available in some templates PaginationModel

Url filters

Filters used to create specific Lodgify Urls, for images, assets or pages
image_url

Returns the full url for a image uploaded through Lodgify system, adjusted to the defined parameters

Name Description Type
input AssetModel for which we want to obtain the image url AssetModel
width Width of the returned image Integer
height Height of the returned image Integer
mode Resize mode used for the returned image: freesize, full, stretch String
type AssetModel Type String
includeParameters Include the parameter on the request Boolean
widgetWidth Width of the containing widget Integer (null)
file_url

Returns the full url for a file uploaded through Lodgify system

Name Description Type
input AssetModel for which we want to obtain the file url AssetModel
static_url

Returns a Url for the file hosted on Lodgify static domain. It's used mostly internally, but it can be useful in some cases

Name Description Type
input File we want to get the static Url String
asset_url

Returns a Url for a Theme file

Name Description Type
input File we want to get the static Url, the input should be relative to /assets theme folder String
shared_url

Returns a Url for a varsioned Shared file

Name Description Type
input File we want to get the static Url, the input should be relative to /assets folder of shared String
google_font_url

Generates the url for the Google Fonts selected by the user

Name Description Type
theme Theme Model containing the fonts definition ThemeModel
flag_img

Returns the partial image file for the flag image on a given culture. This should be used with static_url to get the flags images hosted on Lodgify static domain

Name Description Type
culture Culture we want the flag image String
link_to_culture

Returns a url for the website in the specified culture, it will return the current page url on the culture passed

Name Description Type
culture Culture we want the page url String
page_slug String
link_to_page

Returns a url for a given page

Name Description Type
page_id Page identifier for the one we want to obtain the url String
page_slug Page slug for the one we want to obtain the url String
link_to_checkout

Returns the url for the checkout

Name Description Type
website_slug Website slug String
property_id property identifier Object
culture Culture, will use the current one if omitted String
currency_code Promotion code, if any String
promotion_code Promotion code, if any String
property_img_url

Returns the main image url for a given property and with the defined parameters

Name Description Type
property_id Property identifier Integer (null)
width Width of the returned image Integer
height Height of the returned image Integer
mode Resize mode used for the returned image: freesize, full, stretch String

Format filters

Collection of util filters to use in Liquid Templates for formatting and converting values
area

Formats a area to a string using the default format for areas

Name Description Type
area Decimal value we want to format Decimal
to_sqf

Converts a area in Square meters to Square feet

Name Description Type
area_in_sqm Area value we want to transform to square feet Decimal
to_sqm

Converts a area in Square foot to Square meters

Name Description Type
area_in_sqf Area value we want to transform to square meters Decimal
money

Formats a value in the default money format

Name Description Type
money Decimal value we want to obtain a money representation Decimal
money_with_currency

Formats a decimal value in the default money format and including currency symbol and/or code

Name Description Type
money Decimal value we want to obtain a money representation Decimal
currency Currency definition we will use CurrencyModel
showCode If true the moeny code will be appended at the end between parenthesis Boolean
format Money format used, by default is "0.##" String
example
If we call the method with a value of 123.45348, it will return
* $ 123.45 (USD)
* 123.45 € (EUR)
distance

Formats a decimal value in a distance format (it will use 0.## as formatting string)

Name Description Type
distance Value we want to format Decimal
to_km

Transforms a decimal value of distance in miles to its value in kilometers, and rounding it do 5 decimals)

Name Description Type
distance_in_miles Distance in miles we want to convert to Kilometers Decimal
to_miles

Transforms a decimal value of distance in kilometers to its value in mile, and rounding it do 5 decimals)

Name Description Type
distance_in_km Distance in kilometers we want to convert to Miles Decimal
custom_decimal_format

Formats a decimal value with the passed custom decimal format.

Name Description Type
number Decimal value we want to format Decimal
format Format string. For more info please look here String
short_date

Format a datetime value to its short date representation. It uses the current culture.

Name Description Type
date DateTime we want to format DateTime (null)
plus_date

Adds a certain value to a given date.

Name Description Type
date DateTime to which we want to add some value DateTime
part The part we want to add. y:year, M:month, h:hours, m:minutes, s:seconds String
value The quantity we want to add Integer
hour

Returns an Read-like representation of an Hour. Like "12:00 AM" for 0 value

Name Description Type
hour 0-23 value representing a hour of the day Short (null)
pluralize_i18n

Returns a diferent text depending on the number passed.

Name Description Type
number Number we want to use to decide if we should return the singular or the plural Integer
singular I18N tag returned if the number is 1 String
plural I18N tag returned if the number is greater than 1 String
pluralize

Returns a diferent text depending on the number passed.

Name Description Type
number Number we want to use to decide if we should return the singular or the plural Integer
singular Text returned if the number is 1 String
plural Text returned if the number is greater than 1 String
to_json

Converts an object to its JSON representation. Useful for inspecting the Model.

Name Description Type
data Object we want to convert to json Object
indented Return and indented and nice to read json object. If not passed it will be false as default Boolean
to_js_template

Transform a text to MicroTemplate. Used mostly internally.

Name Description Type
text Text to convert String
slugify

Returns a url safe representation for the text passed

Name Description Type
text text to convert String
newline_to_br

Replaces all ocurrences of newline to br

Name Description Type
text Text to replace String
obfuscate

Obfuscates an email to avoid spam bot scanning

Name Description Type
email Email to obfuscate String
js_encode

Encodes text to be embedded into a javascript string

Name Description Type
text Text to encode String
html_attribute_encode

Encodes text to be embedded into a HTML attribute

Name Description Type
text Text to encode String

Page Templates

theme.liquid

This is the Only mandatory file in any Lodgify Custom Theme. It should contain the top level layout for the pages including all the head content (css, and javascript), the menu and any script content the theme needs to load on all pages

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_homepage.liquid view code

Template for the website homepage. It should contain any custom code you want for the homepage. In basic themes, in this template are rendered the Theme widgets, that are widgets associated to the theme. and not to the page. And after that it renders the generic page template.

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_page.liquid view code

Main template for the Page content. Other page types like homepage rely on this to render the page contents. The main purpose of this template is render the page_widgets configured on the Lodgify Content Management System.

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_house.liquid view code

Main template for the House page content. This template belongs to those pages created on Lodgify Content Management system as House and they're contained information about the house.

Most of the code on this template is to render the House Tabs and the special Templates like BookingSummary or Payment

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_allproperties.liquid view code

This template is the one rendered in the Multiproperty websites that contain a list of the properties and also works as a Search results page. The Single property page doesn't use this template at all.

The logic of the basic template is render the Widget Template SearchResults that handles al the searching of the website properties.

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

Special Templates

_agreement.liquid view code

Renders the Agreement content. The basic template relies on Agreement Widget Template to do it.

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_bookingconfirm.liquid view code

Renders the Booking confirmation template, visible after a succesful booking

Data available

Name Type Description
model LiquidModel Top level model containing the Website and page information
utc_now DateTime Current Datetime in UTC

_bookingsummary.liquid view code

It renders the Booking Summary, this template is only valid on House Type pages. The Booking summary comprehends the table with the rooms and the booking modal popup after clicking on the Book Button.

Data available

Name Type Description
model BookingSummaryModel Booking summary information

_payment.liquid view code

It renders the Booking Summary, this template is only valid on House Type pages. The Booking summary comprehends the table with the rooms and the booking modal popup after clicking on the Book Button.

Data available

Name Type Description
model PaymentSummaryModel Top level model containing Payment information
error_message String If something went wrong with the payment here will have a descriptive error message

_pricestable.liquid view code

This template shows a summary of the prices when someone is trying to book a room.

Data available

Name Type Description
model PricesTableModel Top level model containing Prices information

_searchresults.liquid view code

This template shows a summary of the prices when someone is trying to book a room.

Data available

Name Type Description
model SearchResultModel Results of the search or about all the properties on the website

Widget Templates

_agreement.liquid view code

This template renders the rental agreement for a property

Data available

Name Type Description
model RentalAgreementModel Information and/or text of the rental agreement

_availabilitytab.liquid view code

This template renders the availability tab (or full page) for a property. The default behaviour is to load the availability information with an ajax request after the load

To do it relies on a javascript object called ldgfy.availability, but if you want to use your own you can make a request to the AvailabilityUrl available on the model.

The ajax request will return a result like this one below, where "s" is the start date, "e" the end date and "x" a boolean indicating if its available or not

[
    {
        "s": "20150401",
        "e": "20150422",
        "x": true
    },
    {
        "s": "20150711",
        "e": "20151230",
        "x": false
    }
]

Data available

Name Type Description
model WidgetAvailabilityTabModel Information for a property availability

_callmeback.liquid view code

Renders the form for the callmeback widget.

Data available

Name Type Description
model WidgetCallMeBackModel All the information needed to render and process a callmeback widget

_contactform.liquid view code

Renders the contact form

Data available

Name Type Description
model WidgetContactFormModel All the information needed to render and process a contact form widget

_contacttab.liquid view code

Renders the contact tab (or full page) for a property. Internally it will use the _contactform.liquid template to render the form and add more conact content specifically for this template

Data available

Name Type Description
model WidgetContactTabModel All the information needed to render and process a contact tab widget

_gallerytab.liquid view code

Renders the gallery tab (or full page) for a property.

Data available

Name Type Description
model WidgetGalleryTabModel A list of Gallery groups and the images on each one

_heading.liquid view code

Renders the Heading Widget

Data available

Name Type Description
model WidgetContentModel A generic content object

_html.liquid view code

Renders the Html/Raw Widget

Data available

Name Type Description
model WidgetContentModel A generic content object

_image.liquid view code

Renders the Image Widget

Data available

Name Type Description
model WidgetImageModel Contains information for the image associated with the widget

_mainslideshow.liquid view code

This is a special widget template, because even is a Slideshow Widget this template is used for the Theme Slideshow most of the themes have on the Home page

Data available

Name Type Description
model WidgetGalleryModel Contains information for the slideshow

_maptab.liquid view code

Renders the map tab (or full page) for a property

Data available

Name Type Description
model WidgetMapTabModel Contains information about the property location

_overviewtab.liquid view code

Renders the overview tab (or full page) for a property

Data available

Name Type Description
model WidgetOverviewTabModel Contains information about the property

_ownerlogin.liquid view code

Renders the Owner Login widget

Data available

Name Type Description
model WidgetOwnerLoginModel Contains information for the Widget rendering

_ownersignup.liquid view code

Renders the Owner Signup widget

Data available

Name Type Description
model WidgetOwnerSignupModel Contains information for the Widget rendering

_ratestab.liquid view code

Renders the Rates Tab (or full page) for a property

Data available

Name Type Description
model WidgetRatesTabModel Contains information for the Rates Tab Widget rendering

_reviewstab.liquid view code

Renders the Reviews Tab (or full page) for a property

Data available

Name Type Description
model WidgetReviewsTabModel Contains information for the Reviews Tab Widget rendering

_searchform.liquid view code

Renders the Search form

Data available

Name Type Description
model WidgetSearchFormModel Contains information for Search form rendering

_slideshow.liquid view code

Renders the slideshow widget

Data available

Name Type Description
model WidgetGalleryModel Contains information for the slideshow

_video.liquid view code

Renders the Video Widget

Data available

Name Type Description
model WidgetContentModel A generic content object

_video.liquid view code

Renders the Promotion Widget

Data available

Name Type Description
model WidgetPromotionModel A generic content object