Sandbox project:

https://www.drupal.org/sandbox/cityreader/2486445

Description:

Background image formatter is used for image field. It outputs original image as background image in the field item div wrapper and put a transparent image with exactly the same size as a placeholder. This allows user to display a image when they want to use 'background-size' feature of CSS in a responsive theme. This is useful when you want to display a image with fixed height and fluid width.

As most of code is borrowed from image formatter, so its formatter settings is same as that of image formatter.

There is a similar module called background_image_formatter Project. But there is slight difference between them. This is module provides a placeholder transparent image to make it work well in the responsive theme. The use case for this module is display hero image in responsive theme when you want to use "background-size" for this hero image in CSS.

By using this formatter, we can get HTML output as below:

<div class="field field-name-hero-image field-type-image field-label-hidden">
  <div class="field-items">
    <div class="field-item even">
      <div class="image-placeholder" style="background-image: url(http://mywebsite.com/sites/default/files/styles/hero_image/public/images/hero_image.jpg?itok=4lulAnsK)">
        <img style="height: 1326px; width: 1920px;" typeof="foaf:Image" src="/sites/all/modules/custom/background_image/transparent.png" />
      </div>
    </div>
  </div>
</div>

Clone repository

git clone --branch 7.x-1.x http://git.drupal.org/sandbox/cityreader/2486445.git background_image
cd background_image

How to test
1. Clone and install the module from admin/modules.
2. Goto article page and create a new field called "Hero image" with "image" field type and "image" widget.
3. Goto Manage display and change "Hero image" formatter to "Background image" and choose an image style.
4. Create an Article node and upload an image to "Hero image" field.
5. View source to find "Hero image" output and to check if uploaded image is rendered in the background image wrapping a placeholder transparent image with same size.

CommentFileSizeAuthor
#17 background_image-original-image-2506013-17.patch1.72 KBeric.chenchao

Comments

eric.chenchao’s picture

eric.chenchao commented
Status: Active » Needs review
eric.chenchao’s picture

eric.chenchao commented
Issue summary: View changes
eric.chenchao’s picture

eric.chenchao commented
Issue summary: View changes
PA robot’s picture

PA robot commented
Status: Needs review » Needs work

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

We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)

Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).

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

eric.chenchao’s picture

eric.chenchao commented
Status: Needs work » Needs review

Fix code format. But I still keep seeing that

Type hint "array" missing for $variables

. I have read comment standard again and haven't see any example put hint type in the arguments of function. Quite confusing.

maen’s picture

maen commented

Hello Eric, could you please try this:

function theme_background_image_formatter(array $variables) {
  $item = array();

Tell me if this is the solution...

Regards,

maen

daffodilsoftware’s picture

daffodilsoftware commented

Hello Eric,
I think $variable need to define as array and maen is correct . Please try above
Also git link you have provided
git clone --branch 7.x-1.x cityreader@git.drupal.org:sandbox/cityreader/2486445.git background_image
is not valid because this may work only for you.

This git link will work
git clone --branch 7.x-1.x http://git.drupal.org/sandbox/cityreader/2486445.git background_image
Check it when logout from id on drupal.org

Also please add git link in description of your module because for checking people have to download it from git

eric.chenchao’s picture

eric.chenchao commented
Issue summary: View changes

@maen Yes that works find. Thanks.

@nitingoyal Thanks for pointing the wrong git link. I have already updated in the description.

maen’s picture

maen commented

Automated Review

No issues identified by pareview.sh.

Manual Review

Individual user account
Yes: Follows the guidelines for individual user accounts.
No duplication
Yes: Does not cause module duplication and/or fragmentation. Although I think that this module could be made as a patch for background image formatter
Master Branch
No: Does not follow the guidelines for master branch.
Licensing
Yes: Follows the licensing requirements.
3rd party assets/code
Yes: Follows the guidelines for 3rd party assets/code.
Becquse there are no 3rd party assets.
README.txt/README.md
Yes: Follows the guidelines for in-project documentation and/or the README Template.
Code long/complex enough for review
Yes: Follows the guidelines for project length and complexity.
Secure code
Yes: Meets the security requirements.

This review uses the Project Application Review Template.

eric.chenchao’s picture

eric.chenchao commented

Thanks @maen. I cannot believe I forgot to create master branch. I have already added it.

jungle’s picture

jungle
He/Him
Location Chongqing, China
commented
Status: Needs review » Needs work

You should DELETE the master branch, not keep it!

Although master branches are commonly used in the Git world, the Drupal community uses major version branches (e.g., 7.x-1.x) instead.

There is still a master branch, make sure to set the correct default branch: https://www.drupal.org/node/1659588 . Then remove the master branch, see also step 6 and 7 in https://www.drupal.org/node/1127732

-- form http://pareview.sh/pareview/httpgitdrupalorgsandboxcityreader2486445git

eric.chenchao’s picture

eric.chenchao commented
Status: Needs work » Needs review

Master branch has been removed from remote.

PA robot’s picture

PA robot commented
Status: Needs review » Closed (duplicate)
Multiple Applications
It appears that there have been multiple project applications opened under your username:

Project 1: https://www.drupal.org/node/2546444

Project 2: https://www.drupal.org/node/2506013

As successful completion of the project application process results in the applicant being granted the 'Create Full Projects' permission, there is no need to take multiple applications through the process. Once the first application has been successfully approved, then the applicant can promote other projects without review. Because of this, posting multiple applications is not necessary, and results in additional workload for reviewers ... which in turn results in longer wait times for everyone in the queue. With this in mind, your secondary applications have been marked as 'closed(duplicate)', with only one application left open (chosen at random).

If you prefer that we proceed through this review process with a different application than the one which was left open, then feel free to close the 'open' application as a duplicate, and re-open one of the project applications which had been closed.

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

eric.chenchao’s picture

eric.chenchao commented
Status: Closed (duplicate) » Needs review
PA robot’s picture

PA robot commented
Multiple Applications
It appears that there have been multiple project applications opened under your username:

Project 1: https://www.drupal.org/node/2506013

Project 2: https://www.drupal.org/node/2546444

As successful completion of the project application process results in the applicant being granted the 'Create Full Projects' permission, there is no need to take multiple applications through the process. Once the first application has been successfully approved, then the applicant can promote other projects without review. Because of this, posting multiple applications is not necessary, and results in additional workload for reviewers ... which in turn results in longer wait times for everyone in the queue. With this in mind, your secondary applications have been marked as 'closed(duplicate)', with only one application left open (chosen at random).

If you prefer that we proceed through this review process with a different application than the one which was left open, then feel free to close the 'open' application as a duplicate, and re-open one of the project applications which had been closed.

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

kevincrafts’s picture

kevincrafts commented

I installed and tested this module and found the following issues:

  1. An image style other than original must be selected in the formatter. Not selecting an image style results in a broken image
  2. When site is not installed at the root level, the transparent image results in a broken image. Path to this image should be relative to the site.
eric.chenchao’s picture

eric.chenchao commented
StatusFileSize
new background_image-original-image-2506013-17.patch1.72 KB

@kevincrafts Good spot. I have applied patch as below. Thanks for reviewing!

eric.chenchao’s picture

eric.chenchao commented

Can it be approved please?

omarlopesino’s picture

omarlopesino
he/him
commented

Automated Review

Review result of 7.x-1.x branch: http://pareview.sh/pareview/httpgitdrupalorgsandboxcityreader2486445git
No fixes are necessary, it's recommended a test but it's a formatter, so you don't need really to. You could test when you go to a page where a node it's created the required markup appears.

Manual Review

Individual user account
Yes, it follows.
No duplication
I've seen there are some modules similar to this.
https://www.drupal.org/project/bg_image_formatter
https://www.drupal.org/project/background_image_formatter
Master Branch
Yes, default branch 7.x-1.x is set
Licensing
Yes, it follows
3rd party assets/code
Yes, there is not third party code associated.
README.txt/README.md
Yes, README file exists and with properly standards.
Code long/complex enough for review
Yes, code is enough complex.
Secure code
Yes, it follows.
Coding style & Drupal API usage
Allright.

Module works correctly. I set a content type with a field image using this formatter and image was a background!

klausi’s picture

klausi
he/him||they/them
Primary language German
Location 🇦🇹 Vienna
commented

@mistermoper: I think you forgot to change the status. Is this now RTBC after your review or are there application blockers left?

omarlopesino’s picture

omarlopesino
he/him
commented
Status: Needs review » Reviewed & tested by the community

No, there is no application blockers. Thanks for remind!

crzdev’s picture

crzdev commented
Status: Reviewed & tested by the community » Needs review

Not sure if it is fully reviewed, can you tell us the differences with this 2 modules(*)?
https://www.drupal.org/project/bg_image_formatter (*)
https://www.drupal.org/project/background_image_formatter (*)

Just to complete the last point, No duplication, from manual review.

Thanks and great work!

greg boggs’s picture

greg boggs
he/him
Primary language English
Location Portland Oregon
commented
Status: Needs review » Needs work

Thanks for your contributions to Drupal! Please tell us about the differences between your module and the other two listed when you have a chance.

PA robot’s picture

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

Closing due to lack of activity. If you are still working on this application, you should fix all known problems and then set the status to "Needs review". (See also the project application workflow).

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