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
Comment #0.0
uncommented CreditAttribution: uncommented commentedAdded review of other projects to post description.
Comment #0.1
uncommented CreditAttribution: uncommented commentedImproved git repo link
Comment #1
uncommented CreditAttribution: uncommented commentedPlease review this module and provide feedback regarding its usefulness and functionality.
Comment #2
PA robot CreditAttribution: PA robot commentedThere 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.
Comment #3
uncommented CreditAttribution: uncommented commentedFixed errors identified by PA robot
Comment #4
balajidharmaI review your code and my commands
$attributes['style'] = ""; this line is not required.
Comment #5
PA robot CreditAttribution: PA robot commentedClosing 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.
Comment #5.0
PA robot CreditAttribution: PA robot commentedAdded project review