Create Responsive Images and Effects for Equal in Drupal - Softqubes
Making Portrait and Landscape Images Equal in Drupal
Website Maintenance & Development

Making Portrait and Landscape Images Equal in Drupal

It’s very easy to format images created manually and this is the task to be done for every project. While formatting any image, its length, breadth, pixels etc are to be taken care of. Most of the issues are faced while resizing human photographs. Sometimes it becomes very difficult to format these pictures to a standard size in Drupal.

Hence, a question arises in mind regarding the tools that must be used to ease the process of formatting these images. Certain tools are Image Cache Actions, Auto Image Style, Image Field Focus, Smart crop etc and much more.

Here, we will discuss about a single Drupal module that will help us to get maximum results with less efforts. The main aim of this article is to provide in depth information that will help users to easily manage the site especially for those who
have very less knowledge about website management.

Talking about Drupal, it becomes very easy to add and upload photos using ImageCache Actions module. With this module, it becomes easy to create a final image of 280×240 pixels which means it is 280 pixels wide and 240pixels tall and dimensions can be changed later on.

Resizing Image in Drupal Content Management System:

The first step is to enlarge the image, move the focus up and then crop it. This can be done through three different image styles: a) dealing with broad photographs b) Dealing with long photos c) Selecting the perfect one to upload an image.

Three Image Styles:

1) Landscape Images:

  • – Activate the sub module Imagecache Canvas Actions that will also activate the main Imagecache Actions module.
  • – Select – Admin/Config/media/image styles/. Develop a new style known as “Landscape to preview 280 x240’ or you can give any suitable name.
  • – Now, choose scale for the image style action and then set the height to 260px.
  • – Now, select “Crop” and adjust width to 280pixels and height 240 pixels.
  • – You can also crop to a less height which will delete the white borders.
  • – Adjust Anchor tag to top middle section and create a focus on the upper half of the image while adjusting the centre sections.
  • – Now, this style is ready.

2) Resizing Portrait Images:

  • – Make a new style called “Portrait preview 280 x240
  • – Then, choose the scale from image style section and then add the width up to 300px
  • – Then, select “Crop” and adjust width to 280 pixels and height 240 pixels. Anchor should be adjusted to top middle.

3) Developing one more style as an option:

  • – With the help of ImageCache Action, we will create a new style called “Revised 280 x 240 and any other name that suits you.
  • – Then we will choose Aspect Switcher
  • – Then we can select the appropriate image style for a particular condition and then we need to select these two styles and then click on “Add Effect” button. Thus, the style is created.

Take Away:

Select the last style for your image field and you can use any image for different contents. In case you aren’t satisfied with the results, adjust the dimension settings a little bit as per your need. Still, if you face any difficulty then feel free to get in touch with expert Drupal developers at Softqube Technologies, a well known Drupal website development company.

Hari Patel

Hari Patel

I am the Managing Director of Softqube Technologies Pvt. Ltd., a modern-day digital transformation, design and development service provider. We provide services to businesses of all verticals across the globe. I believe and live by a mission that I help more entrepreneurs to build, launch and grow profitable businesses.