Close

Copyright © RebelMouse 2019

Follow Us:

post_image_settings.ratios

Purpose:

With ratios you can set which crop sizes will be created in entry editor when editor wants to use splash image.


Type:

Required. Default values are shown in example below.


Example:

    'post_image_settings': {        'ratios': {            '3x1': {                'title': 'Super Wide',                'sizes': [                    '1200x400',                    '600x200',                ],                'order': 1,            },            '2x1': {                'title': 'Wide',                'sizes': [                    '600x300',                    '1200x600',                ],                'order': 0            },            '1x1': {                'title': 'Tall',                'sizes': [                    '300x300',                    '600x600',                ],                'order': 2            },            '600x300': {                'title': 'Slide',                'sizes': [                    '600x300',                ],                'order': 3,                'hidden': True,            },        },    },

Important:

1. Crop definition with title "Slide" should not be ever removed. Size can be changed, but not removed. We are using this crop size for slideshows.

2. With parameter hidden, you can hide the tab from entry editor. Useful for slides if you don't want to force editors to make one addition step.

'hidden': True,

3. More different ratios you will define, more crop editor will need to make.

In example above there are 4 different crop ratios, one of them is hidden, meaning we have 3 steps in cropping tool in entry editor - wide, super wide, tall.

5. If editor won't go through the all steps of cropping tool, crops of default sizes will be still created and you can open them in the browser, but they won't be available directly in Bootstrap object. Only defaults:

6. You can reorder crop steps with order parameter.

'order': 2

7. For each crop ratio you can define as many image sizes as you want, but make sure they all have the same ratio! The way to check if sizes have the same ratio is by dividing height with width. Number should be always the same. Example:

1 / 3 = 0.3333200 / 600 = 0.3333400 / 1200 = 0.3333640 / 1920 = 0.3333

Usage in JS:

As already mentioned you can find url to each crop in Bootstrap object. Example:

image: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/origin.jpg"image35x35: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/35x35.jpg"image210x: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/210x.jpg"image300x: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/300x.jpg"image300x300: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/300x300.jpg"image600x: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/600x.jpg"image600x200: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/600x200.jpg"image600x300: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/600x300.jpg"image600x400: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/600x400.jpg"image600x600: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/600x600.jpg"image980x: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/980x.jpg"image1200x400: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/1200x400.jpg"image1200x600: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/1200x600.jpg"image1200x800: "https://s3.amazonaws.com/dev-assets.rbl.ms/bregant/638/1200x800.jpg"

Usage in mustache:

All crops which you have available in Bootstrap you can use it in mustache as well. Here is an example how to use crop 600x200px or default 600x if wanted crop doesn't exist:

{{#image}}    {{#image600x200}}        {{image600x200}}    {{/image600x200}}    {{^image600x200}}        {{image600x}}    {{/image600x200}}{{/image}}

Usage in XML:

The only place where we use crops is for <posts> filters. Example:

    <posts format="popular">        <filters>            <set_image_size url="image528x304,image300x" mobile_url="image528x304,image300x"  />        </filters>    </posts>

Set image size filter will fill the image property (later used in mustache or JS) with desired image crop. It accepts two attributes:

  • url - for desktops
  • mobile_url - for mobiles

Both attributes accept two crop sizes.

  1. First is wanted one.
  2. Second is fallback if first one doesn't exist.

RebelMouse CEO: Reimagining Diversity “Starts in the Office”

Why women, minorities, and the LGBTQ+ community will restructure workplace norms

Entering a new decade means a new opportunity to change how we approach diversity. In a joint interview alongside Leanne Pittsford of Lesbians Who Tech, RebelMouse founder and CEO Andrea Breanna said that the only way to fight patriarchal dominance is to encourage and nurture more women, minorities, and members of the LGBTQ+ community in the workplace, particularly in tech.

Over half of RebelMouse's employees are women or identify as LGBTQ. Read our full diversity and inclusion report here.

Check out the full video below.

Related Articles

Publishers No Longer Have to Submit Their Site to Google News

Google's Publisher Center creates new opportunities for audience growth

Just before the start of the next decade, Google announced an important change to its Google News offering with the launch of Google Publisher Center. The new interface merges Google News Producer and Google News Publisher into one to streamline the partnership process for publishers.

Overall, the change should make it easier for publishers to manage their Google News settings, including updating themes, directing URLs to section pages, and configuring user permissions. Read the full list of features here.

Keep reading...

How to Find Work-Life Balance as a Remote Employee

Tips from our CEO on making the most of an office-free lifestyle

Working from home is becoming increasingly popular, with an estimated 66% of companies now allowing remote work and 16% operating completely office-free. RebelMouse is one of those fully remote companies, and over the years we've mastered how to stay close to each other despite being spread across more than a dozen countries. We believe working remotely is good for both our personal lives and our productivity. Read more about this here.

Still, working free from the shackles of an office environment doesn't mean every day is a dance party in your pajamas from 9 to 5. Working from home comes with its own set of challenges just like any other job.

Keep reading...
Subscribe to Our Newsletter