Problem/Motivation

Allow users to use a conjunction of the background color field + a NEW opacity field (attached to the background media field) to achieve what looks like an "overlay effect".

blb overlay 1

blb overlay 2

Steps to reproduce

n/a

Proposed resolution

Remaining tasks

  1. Create a range slider component to output a percentage based value to use for our opacity value.

User interface changes

TBD.

API changes

n/a

Data model changes

n/a

CommentFileSizeAuthor
#9 bakground-overlay-3163894-9.patch12.89 KBldavidsp
#8 bakground-overlay-3163894-8.patch12.92 KBldavidsp
#7 bakground-overlay-3163894-7.patch10.94 KBldavidsp
#5 bakground-overlay-3163894-5.patch25.05 KBldavidsp

Issue fork bootstrap_styles-3163894

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

AaronChristian created an issue. See original summary.

mahmoud-zayed’s picture

mahmoud-zayed commented
Status: Active » Needs work
mahmoud-zayed’s picture

mahmoud-zayed commented
Title: Plugin: Background Opacity » Plugin: Background Overlay
ldavidsp’s picture

ldavidsp commented
Status: Needs work » Reviewed & tested by the community
StatusFileSize
new bakground-overlay-3163894-5.patch25.05 KB

I have created a patch to activate overlay to the images and videos.

ldavidsp’s picture

ldavidsp commented
Status: Reviewed & tested by the community » Needs review
ldavidsp’s picture

ldavidsp commented
StatusFileSize
new bakground-overlay-3163894-7.patch10.94 KB
ldavidsp’s picture

ldavidsp commented
StatusFileSize
new bakground-overlay-3163894-8.patch12.92 KB
ldavidsp’s picture

ldavidsp commented
StatusFileSize
new bakground-overlay-3163894-9.patch12.89 KB
aaronchristian’s picture

aaronchristian commented

Thanks @davidparedes21!

Great work! I will test this bad boy out tomorrow!

nwom’s picture

nwom commented

Very cool. Can't wait to see this get committed.

nwom’s picture

nwom commented
Status: Needs review » Needs work

It looks like it needs a re-roll. It no longer applies to newest dev.

aaronchristian’s picture

aaronchristian commented

Hi @davidparedes21, are you able to reroll this patch when you have some time?

ldavidsp’s picture

ldavidsp commented

Hi @AaronChristian, Ok, let's create it again.

AaronChristian opened merge request !30

drupgirl’s picture

drupgirl commented

Hi, yes, this is definitely a good idea. What's the status on this re-roll/merge request?

I see there's also issue https://www.drupal.org/project/bootstrap_styles/issues/3213112, which looks related.

My solution was to apply a background color class and have the background image added as part of the class, with the overlay. Defeats the purpose, but it works.