Automattic / Automattic/jetpack

Slideshow Shortcode: individual image backgrounds are black and do not match slideshow background/border

Open
#19,055 1 comment 0 reactions 0 assignees View on GitHub
[Feature] Shortcodes / Embeds [Pri] Low Enhancement Good For Community
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Steps to reproduce the issue

1. Create a new post or page and insert a Classic Block
2. Click on the Add Media button. On the left, click "Create Gallery"
3. Select multiple images, preferably with differing aspect ratios. Then click the "Create a new gallery" button
4. Use the "Type" dropdown to select "Slideshow" and then click "Insert Gallery"
5. Publish and view your new post/page

#### What I expected
The slideshow element should be one consistent color, where the background of the image matches the border of the element itself (or more accurately, the `slideshow-slide` element's background should be transparent so the `slideshow-window` element's background is fully visible) as shown below

#### What happened instead
A black background is applied, inline, to the `slideshow-slide` element.

**Screenshots**
Expected result, one consistent background behind the image:
![Screenshot (1127)](https://user-images.githubusercontent.com/13856531/110169833-4389cb80-7dc7-11eb-9a41-c0f73d3caa23.png)

Actual result, a black background with a dark gray border (and the inline styling causing the black background)
Screen Shot 2021-03-05 at 3 22 07 PM
Screen Shot 2021-03-05 at 3 25 33 PM

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue through a post or page using a Classic Block, the Add Media gallery flow, and the Slideshow type. Start by locating the slideshow shortcode output and inspect the inline background styling on slideshow-slide relative to slideshow-window. Done means individual image backgrounds no longer appear black and match the slideshow background or border.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.