Summary

This module provides an image display formatter that allows a selected region of an image to occupy space and maintain aspect ratio as if it were a smaller image; the rest of the image expands outwards. This is particularly useful when dealing with responsive designs that incorporate large splash images, where on some pages the entire image should scale down and on some pages the image should crop as screen width decreases.

Possible Use Cases:

  • You have a large area to fill with an image (such as a slide), and you want a selected region of the image to be displayed while the rest can expand/collapse as-needed.
  • You have content maintainers who frequently want to change the background image of a region of your responsive design, and you don't want to get stuck coding special cases for every page update.
  • You have copy writers that want some thumbnail images to "pop" out of their normal boundaries.

Usage

  • Enable Imagefield Focus, and create an image field with a focus rectangle enabled on the entity of your choice.
  • Assign said field's display formatter to "Overflowing Image".
  • Assign a focus rectangle to an instance of said field.

How it works

This field formatter encases an image in a div that automatically maintains it's aspect ratio (see Responsive Elements that retain their aspect ratio), and positions said image absolutely based on percent offset within said div. This allows the container div to behave in much the same way a normal image would in terms of page layout, and the image's position and scale to exist relative to that.

Project Page

https://drupal.org/sandbox/uncommented/2053961

Git Repo

git clone http://git.drupal.org/sandbox/uncommented/2053961.git overflowing_image

Reviews of other projects

[D7] Views App Folders, Comment #8
[D7] Fields in Regions, Comment #9
[D7] Browser Based Targeting, Comment #9

Comments

uncommented’s picture

Issue summary: View changes

Added review of other projects to post description.

uncommented’s picture

Issue summary: View changes

Improved git repo link

uncommented’s picture

Issue tags: +PAreview: review bonus

Please review this module and provide feedback regarding its usefulness and functionality.

PA robot’s picture

Status: Needs review » Needs work

There are some errors reported by automated review tools, did you already check them? See http://pareview.sh/pareview/httpgitdrupalorgsandboxuncommented2053961git

I'm a robot and this is an automated message from Project Applications Scraper.

uncommented’s picture

Status: Needs work » Needs review

Fixed errors identified by PA robot

balajidharma’s picture

Status: Needs review » Needs work

I review your code and my commands

$attributes['style'] = "";
$attributes['style'] .= "width: {$calc_width}%;";
$attributes['style'] .= "left: {$calc_left}%;";
$attributes['style'] .= "top: {$calc_top}%;";

$attributes['style'] = ""; this line is not required.

$attributes['style'] = "width: {$calc_width}%;"; 
$attributes['style'] .= "left: {$calc_left}%;";
$attributes['style'] .= "top: {$calc_top}%;";
PA robot’s picture

Status: Needs work » Closed (won't fix)

Closing due to lack of activity. Feel free to reopen if you are still working on this application (see also the project application workflow).

I'm a robot and this is an automated message from Project Applications Scraper.

PA robot’s picture

Issue summary: View changes

Added project review