tl;dr: When cropping images using the image transformation option of the scrivito_image_tag helper, the new crop parameter now lets you specify the area of interest: left, right, top, bottom, or center.
Refined Image Cropping
Posted on
A little bit of history
Starting at version 0.70.0 of the Scrivito SDK, images can be transformed via the scrivito_image_tag helper. You can, for example, crop images to fit them into an area with given dimensions. This can be achieved by setting the fit parameter to crop, like so:
Copy
<%= scrivito_image_tag widget, :image, transform: {
width: 200, height: 200, fit: :crop
} %>
If (and only if) both image dimensions are larger than those of the target area, the image is scaled down prior to cropping, keeping its aspect ratio and making it completely fill the area. Otherwise, the image is not scaled. In the next step, the image parts exceeding the given area are removed.
Until today, cropping always focused on the image center and removed excess image data in equal parts from both sides of the dimension concerned. This only leads to the desired result if the relevant image information is at the center.
And now the news
To make image cropping more flexible, we added the
crop parameter that lets you specify one of five possible image sections of interest: left, right, top, bottom, or center, the latter being the default setting.
As an example, the image shown here is 600 pixels wide and 200 pixels high. To have it cropped retaining the area on the left-hand side, use the following helper call:
Copy
<%= scrivito_image_tag widget, :image, transform: {
width: 200, height: 200, fit: :crop, crop: :left
} %>
Note that not the scrivito_image_tag helper itself but the service responsible for handling and delivering images has been extended. Thus, all apps using an SDK version that supports image transformation (>= 0.70.0) have access to this new functionality.
More great blog posts from Andreas Viebke
Scrivito JS 1.9.0 Released – Featuring Refined Content Validation
Improvements Finer grained content control through validation levels In version 1.7 of the Scrivito SDK, we introduced validations, a means for programmatically checking whether content meets specific requirements. The consequence of a single failing validation was that the working copy could not...
Scrivito JS 1.8.0 Released – Featuring Quick Search
Improvements Introducing the search panel Scrivito’s sidebar now includes a search panel that allows editors to hunt for pages directly in the editing interface. It is no longer required to use the search provided by the app – if it has one. Just enter the search term in the input field and watch...
Scrivito JS 1.7.0 Released – Featuring Protected Content
Improvements Authentication via identity providers & restrictable pages For more flexibility and to facilitate collaboration even better, Scrivito now allows editors and website visitors to log in via identity providers supporting OpenID Connect, e.g. Google. You can set up the providers you...
Introducing Workflow Email Notifications
Working copies are one of the many features that set Scrivito apart from the competition. They let you edit content independently of the live website and of other users. If you are a Scrivito user, you have undoubtedly experienced the versatility of working copies as a collaboration tool. You can...
Scrivito JS 1.6.0 – More Editing Tools & Progressive Image Loading
Major improvements Reverting changes and restoring widgets Scrivito now lets editors revert the changes made to individual widgets. For this, corresponding menu items are available in the respective widget menus. Furthermore, in the “Changes” view mode, a deleted widget can now be restored to its...
Scrivito Rails 1.16.0 Released - Rails 5.2 Support & Improved Link Editor
Improvements Supports and requires Rails 5.2 Scrivito now supports and requires Rails 5.2. Please update your app to Rails 5.2 before upgrading to Scrivito 1.16. There are no Rails 5.2 specific Scrivito settings, therefore this part of the update should be smooth. For instructions and details on...
Scrivito JS 1.5.0 Featuring Changes View Mode & Hierarchy Browser
Major improvements View the changes made to a page How often do you have to question a team mate about the changes they made to a specific page? You could compare a reworked page with its published version instead, but that’s a tedious job in most cases. No longer. The Scrivito UI now provides a...
Staged Deployment with Scrivito and Netlify
What do you mean by "I don't need a staging server"?
It used to be... It used to be that a large part of releasing changes to a professional website required a long list of steps to ensure secure propagation of changes through the development cycle into production. Each part needed to be kept in sync with the next, or the whole flow would break....
Scrivito Rails SDK 1.15.0 Has Been Released
Improvements Changes dialog displays last editor On the changes dialog of a working copy, the individual items now include the name of the user who most recently edited them. So, should questions arise regarding the changes made to a page (for example when publishing), instead of navigating to...
Scrivito JS SDK 1.4.0 Is Available
Editing interface improvements Changes dialog displays last editor On the changes dialog of a working copy, the individual items now include the name of the user who most recently edited them. So, should questions arise regarding the changes made to a page (for example when publishing), instead...
Scrivito JS SDK 1.3.0 Is Available
Major improvements Tour for beginners Scrivito now includes a tour, which introduces the main editing controls to users who are new to Scrivito. After opening the Example App from within the dashboard, the tour starts automatically, but it can also be started using the "Start tour" item in the...
Live Updating now also Works in Editing Mode
Recently, we announced Scrivito’s new live updating feature that lets editors see the changes made by their coworkers. Up to now, this only worked in preview mode, but still was a great achievement as it significantly improves collaboration. We promised to make live updating available in editing...
Scrivito Rails SDK 1.14.0 Has Been Released
General improvements Publishing via the top bar For better accessibility and even more convenience, the top bar (also known as panel) of Scrivito’s in-place editing interface now includes a “Publish” button. In contrast to the “Publish” button in the sidebar, the new top bar button opens the...
Scrivito JS SDK 1.2.0 Is Available
Major improvements Live updating, part 2 Recently, we praised live updating (we first called it auto updating) as truly beneficial to collaborative settings such as reviews. And it is, because changes to a page become immediately visible to the participants. However, live updating was functional...
Introducing Publish Webhooks
Scrivito now lets you call web services each time a working copy of your CMS is published. This allows you to initiate post-processing actions (e.g. pre-rendering), but also to notify anyone interested, for example by sending emails, posting a message to your team collaboration tool, and much...
Introducing Smart Content Auto-Merging
Scrivito working copies are virtual copies of the entire website and a feature that allows editors to change content safely in a sandbox. A working copy lets you change or add as much content as you want or need to, and publish everything at the push of a button. Sometimes, it’s just a single...
Collaborating Real-Time with Scrivito
In mid-February, we launched Scrivito 1.0, our JavaScript-based CMS with unmatched in-place editing: add widgets from a large extensible selection to a page, rearrange them to your liking, add your content. From what we’ve gathered from our customers, the user experience is so amazingly smooth –...
Scrivito JS SDK 1.1.0 Is Available
After successfully launching Scrivito in mid-February this year and collecting valuable feedback from testers and customers, we set ourselves to work: There is nothing that cannot be improved. Major improvements Auto updating Wouldn't it be nice if the changes made by other editors were instantly...
Scrivito Rails SDK 1.13.0 Has Been Released
Content Browser improvements File upload made easier The Content Browser now has a button for uploading images via the file selection dialog of your operating system. If drag and drop isn’t yours, click this button and conveniently browse your image directories wherever they may be...
Leaving WordPress Behind?
WordPress has given millions of individuals, companies, and organizations a means for getting heard, for advertising and selling their products, or promoting their ideas on the web, no question. It works, and, initially, it’s free – so why care about alternatives? Do you wish for an easier, more...
Scrivito 1.11.0 Release Notes
Ready for Rails 5.1 You can now integrate Scrivito into Rails 5.1 applications! Rails 5.0 and 4.2 continue to be supported. The latest Rails version is stuffed with new and improved functionality – see the Rails 5.1 release notes for details! Updated and improved HTML editor Scrivito includes...
Scrivito 1.10.0 Release Notes
More options for creating, copying and moving pages For making the life of editors even easier when creating pages, we've added several items to the page menu and made the wording more consistent. There are three new menu commands: The Add subpage command lets you add a subpage to the current...
Scrivito 1.9.1 Release Notes
This is a bugfix release. Bugfix This release makes widget and widget list menus on properties dialogs visible again, allowing you to add widgets to widget lists or move, copy, paste, or delete widgets in details views. Sorry for the inconvenience this bug might have caused. Please update your...
Scrivito 1.9.0 Release Notes
Unified changes view modes When working on a page, Scrivito lets you compare the current page contents with the version you started off with. Up to now, the changes view that lets you do this had three modes, “Additions,” “Deletions,” and “All changes” of which – according to the feedback we...
Scrivito 1.8.1 Release Notes
Bugfixes This is a bugfix release that solves two widget-related issues, and one referring to the Content Browser. Restoring a widget that originally had a direct subwidget (which was deleted) no longer causes an error. When restoring a widget, attributes that were originally empty are now...
Scrivito 1.8.0 Release Notes
Improvements Content Browser The Content Browser is significantly faster now because it loads much more data in parallel. Just watch the main area while image thumbnails are being displayed! Also, the multi-selection mode is now directly accessible in the user interface. It lets you select...
Scrivito 1.7.0 Release Notes
Improvements Rails 5.0 support This release of Scrivito adds support for Rails 5.0 to the SDK. Rails 5.0 was released this summer and includes numerous speed improvements, refactorings and new features (see the Rails 5.0 overview for details). Scrivito continues to support Rails 4.2, so in case...
Scrivito 1.4.3 and 1.5.4 Release Notes
Bugfixes These releases make Scrivito compatible with jquery-ui-rails 6. On November 29, 2016, jquery-ui-rails 6 has been released. Unfortunately, Scrivito was incompatible with this new major version. Sorry to everyone who has been bitten by this. Please update your Gemfile and run...
Scrivito 1.6.0 Release Notes
Improvements Introducing the sidebar Over the past months, as we added notification icons and the display size switch to the Scrivito panel, we realized that the panel has become too small to nicely accommodate any further controls. So we complemented it with a sidebar for better accessibility...
Scrivito 1.5.3 Release Notes
Bugfixes This is a bugfix release that addresses an issue with <script> tags contained in html attributes that are edited in place: In Scrivito 1.5.0, we reimplemented how values are stored while content is edited in place. During this reimplementation, we also reworked the part that handles...
Scrivito 1.5.2 Release Notes
Bugfixes This is another bugfix release. It fixes a minor issue regarding in-place editing: Scrivito's in-place editing interface now again stores HTML tags with missing attributes, e.g. <a>Link</a> or <img>. We're sorry for the inconvenience this bug might have caused. Please update your...
Scrivito 1.5.1 Release Notes
Bugfixes This release fixes three bugs that were found in Scrivito's editing interface: The “Duplicate page” command caused the resulting new page to have the same path as the source page. Now, the duplicated CMS object shares the parent path of the source, but has a different and unique last...
Scrivito 1.5.0 Release Notes
Improvements Specifying link targets Editors now have access to the target property of link and linklist fields, making it possible to specify whether a link should be opened in a new window. Note that your app needs to render this property for it to have an effect: link_to(link.display_title...
Scrivito 1.4.2 Release Notes
Bugfixes No, you didn't miss the release of 1.4.1, but we had to skip this version for technical reasons. This release fixes a couple of bugs that were introduced in version 1.4.0 of the Scrivito SDK: You can now drag and drop files to the Content Browser again. Also, it is now possible...
Scrivito 1.4.0 Release Notes
Improvements Introducing the publishing history We are proud to present Scrivito's new publishing history to you! It gives you full control of what has been published in the recent past. No matter, whether you're just curious regarding the progress your site content made, or whether you need to...
Scrivito 1.3.1 Release Notes
After the release of Scrivito 1.3.0, we encountered two small bugs we didn't want anybody to be annoyed of, so we simply fixed them. Sorry for the inconvenience updating might cause. Bugfixes We fixed a bug that caused drag and drop to be available in the "Changes" display modes. The page...
Scrivito 1.3.0 Release Notes
Improvements Improved drag 'n' drop Dragging and dropping widgets in the Scrivito UI has become much smoother. Compared to the previous version: The drop target is detected more reliably. While dragging, the current structure of the widgets on the page doesn't change; the widgets don't hop...
Scrivito 1.2.0 Release Notes
Improvements Renaming files In editing mode, the files associated with binary attributes of CMS objects or widgets can now be renamed in the Content Browser if rendered in the details view using the scrivito_tag or scrivito_image_tag helper. To disallow renaming a file, set the...
Scrivito 1.1.1 Release Notes
Bugfixes This release fixes a bug that showed up in version 1.1.0 of the Scrivito SDK in which freely customizable routing was introduced. The bug caused some permalinks ending with a 16 character word to produce a “Not found” error (404). We recommend updating your Scrivito SDK, even if you...
Scrivito 1.1.0 Release Notes
Improvements Introducing faceted search The Scrivito SDK now lets you do faceted searches for having search results categorized, for example. By using specific properties, e.g. the product vendor in a shop application, you can now offer your visitors a means to quickly narrow down what they are...
Scrivito 1.0.0 Release Notes
No new features were added to Scrivito since version 0.90.0 was released. What does it mean for Scrivito to be 1.0? Breaking changes We finally removed the support for the scrivito_reload JS event we deprecated some time ago. Please refer to the release notes of version 0.40.0 for...
Scrivito 0.90.0 Release Notes
Items added or changed after the release of RC 1 are marked with [0.90.0.rc2] or [0.90.0.rc3], repectively. Improvements New API for defining and selecting editors The JavaScript API now provides a more concise way to define an editor for in-place editing: scrivito.define_editor("editor_name"...
The Pages in the Attic
For more than half a year now, the content of this website is maintained in place by Scrivito developers and me. This ensures that all of our experience with editing content in place flows back into the application design and development process, which is, of course, extremely helpful if you...