RebelMouse Talk to 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.

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F9d29e886-8358-425c-aebc-c5da8bf03426%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=126&h=c8b81925f9ead09967c8336a26b9cedc40cb32c7ad65b4c81afd25c2dff987b9&size=980x&c=1933035446 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F9d29e886-8358-425c-aebc-c5da8bf03426%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D126%26h%3Dc8b81925f9ead09967c8336a26b9cedc40cb32c7ad65b4c81afd25c2dff987b9%26size%3D980x%26c%3D1933035446%22%7D" expand=1]


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.

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F8bda0d40-d717-4a86-b307-025e8662af96%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=748&h=f0ed0ea48543b763fff1e03a5979a391bddc9ed0c7eaf6ddbcd713400952c629&size=980x&c=1780884173 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F8bda0d40-d717-4a86-b307-025e8662af96%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D748%26h%3Df0ed0ea48543b763fff1e03a5979a391bddc9ed0c7eaf6ddbcd713400952c629%26size%3D980x%26c%3D1780884173%22%7D" expand=1]

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:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F33398b06-df83-4d78-be36-f99595a62b13%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=791&h=cb50dea91377d1f4689f0a2e5df621529b87dc36b15946b1a358a15a951140f5&size=980x&c=2837015965 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F33398b06-df83-4d78-be36-f99595a62b13%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D791%26h%3Dcb50dea91377d1f4689f0a2e5df621529b87dc36b15946b1a358a15a951140f5%26size%3D980x%26c%3D2837015965%22%7D" expand=1]

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.
Build on a Better PlatformReady to See More?
Request a Proposal
People on a train station
Rebel Insights

RebelMouse Q1 2021 Platform Updates

Speed, performance, and Core Web Vitals enhancements

Click here to read our Q2 2021 platform performance updates!

At RebelMouse, we pour our souls into making sure that our platform is always the most modern, high-performance CMS on the market. In fact, we invested over $100,000 worth of hours into our platform in Q1 2021 alone. This has resulted in updates and performance enhancements that publishers would have to pay for on their own to make happen on any other platform, such as WordPress. We're proud to be at a level of scale where we can invest this way into our platform, and we will continue to invest at this rate every quarter moving forward just as we have in the past.

Here are the major updates that we've added to the platform in Q1.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal
An Important Note on Site Quality From Google’s Search Expert
Rebel Insights

An Important Note on Site Quality From Google’s Search Expert

Do you ever wonder if a few typos can impact your site’s search performance? According to Google’s Search Advocate John Mueller, it takes more than just a few grammatical missteps for Google’s crawler to determine your site’s quality.

During a New Year’s Eve Office Hours hangout, Mueller said that if certain portions of a website are deemed low quality, it can negatively impact the site’s search ranking overall. A good example of this is a site that has different language versions within the same domain. If the site has a French-language version that is made up of quality content, but the English translation isn’t up to the same standard, the ranking of the French version of the site could be negatively impacted.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal