@JFernandez-WMF: I think there are still some design specifications needed for this task:

• What are the image size requirements?
• Are there image ratio requirements? (Does the image/logo need to be square?)
• What placeholder image should be used if for some reason the image specified in configuration is broken? (I suggested a placeholder image in this task, but perhaps we should use a codex icon or something else? )
• Is this configuration field optional?

In T365885#9831562, @KStoller-WMF wrote:

@JFernandez-WMF: I think there are still some design specifications needed for this task:

• What are the image size requirements?
• Are there image ratio requirements? (Does the image/logo need to be square?)
• What placeholder image should be used if for some reason the image specified in configuration is broken? (I suggested a placeholder image in this task, but perhaps we should use a codex icon or something else? )

I suggest the image to be square. On mobile it should fit a dimension of 47x47px and 74x74px on desktop.
If there is no image we can use the Codex icon Image-thumbnail with placeholder token. See example:

However we can go with another icon or a placeholder image if preferred.

• Is this configuration field optional?

I am in agreement of making it optional, but feel free to disagree. I suppose not every Wikiproject/campaign/etc. has a unique logo and we can use the Placeholder icon/image if the field is not filled.

Is the fallback thumbnail supposed to show when there's a problem loading a set logo or always, even if no logo was provided by the configuration? @JFernandez-WMF @KStoller-WMF

Change #1054293 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Community updates: add image to the config schema

https://gerrit.wikimedia.org/r/1054293

In T365885#9980579, @Sgs wrote:

Is the fallback thumbnail supposed to show when there's a problem loading a set logo or always, even if no logo was provided by the configuration? @JFernandez-WMF @KStoller-WMF

My understanding is that the fallback thumbnail should display if there is a problem loading the image added via Community Configuration and also if there is not an image / logo added via Community Configuration.

When an image is not added via Community Configuration, or the image can't load, then a placeholder image is displayed.

In T365885#9982140, @KStoller-WMF wrote:

My understanding is that the fallback thumbnail should display if there is a problem loading the image added via Community Configuration and also if there is not an image / logo added via Community Configuration.

Ack.

In the designs the fallback image is a custom image. I missed that so the initial implementation is using Codex Thumbnail default placeholder. Before going ahead and adding a custom image, I wanted to clarify a related aspect. The "Women in Red" image is a svg icon that has transparency and no border. Should we treat all images the same way? cc @JFernandez-WMF

Fallback	Women in Red	No border example

FYI I can't see the images due to the "Restricted File" issue.

@JFernandez-WMF is off today, so in case you need an answer to get unblocked:
As it wasn't specified in designs, I think moving forward with transparency and no border for other images makes sense. But if that seems problematic or difficult, then I suggest moving forward with whatever is easiest for now, and we can log a follow-up task for post-MVP improvements if needed.

@Sgs , on local am seeing the image attached{F56506182}

Change #1054293 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Community updates: add image to the config schema

https://gerrit.wikimedia.org/r/1054293

Checked on beta - below my comments to the acceptance criteria:
(1)

An image is displayed within the module, within the size constraints specified by designs: On mobile it should fit a dimension of 47x47px and 74x74px on desktop.

It seems that some additional padding is added, making an actual image smaller:

But the major visual impact happens when an image is landscape-oriented (even when the width is slightly more than the height). The image then looks misaligned vertically relative to the title.

File:Seascape_after_sunset_denoised.jpg 800 × 533	File:VisualEditor_toolbar_actions-en.png 313 × 40	File:Purple_Flower.jpg 800 × 532

svg files are displayed better.

The example with max character number int the title and in the body text. File:Commons-logo.svg 446 × 599		the size of img is a little bit off

(2)

When an image is not added via Community Configuration, or the image can't load, then a placeholder image is displayed: the Codex icon Image-thumbnail with placeholder token.

The placeholder img is displayed as 40x40 - is this correct?

(3)

Community updates Configuration form:

Validation: should be a valid Commons image file.

That's unfortunately cannot be validated reliably at beta cluster due to some restrictions on cross-origin resources constraints.
If a file cannot be found, the warning "No results found" is displayed, but it often isn't true. However, the fallback to displaying img placeholder works.
(4)

Add an explanation for the Image field: Choose an appropriate image that relates to the event or initiative you want to highlight, e.g. a logo. The image has to be selected from Commons and the link pasted below.

"The image has to be selected from Commons and the link pasted below." sentence is not present
One note for this sentence - for commons images to be used in the wikipedia context, the format is [[File:Tulip test 2013-05-13 09-45.jpg]] or without square brackets. Should such format still be referred as a link?

Thanks @Etonkovidova!

(1)
The issue with the shrinking styles seems to especially happen on very wide setups that have a Special:Homepage with three columns next to each other. The thumbnail is inside a flexbox, and we should be able to tell it relatively simple to stop shrinking:

		.cdx-card__thumbnail {
			margin-right: 1em;
			// Mobile size
			width: 47px;
			height: 47px;
			overflow: hidden;
+			flex-shrink: 0;

			// Desktop size
			@media ( min-width: @min-width-breakpoint-tablet ) {
				width: 74px;
				height: 74px;
			}
		}

(2)

The placeholder img is displayed as 40x40 - is this correct?

I agree that this looks funny, but stretching the outer box until it 74x74 looks also funny. Not sure what is better. Thoughts @JFernandez-WMF ?

(3)
Not sure how to do this even in principle. Let's discuss this particular requirement with @Urbanecm_WMF next week.

(4) I agree the copy needs to be adjusted. This currently selects on the file-name not the link. Also, we should probably instruct the user to select a (mostly) square image/logo. Anything else is inherently just going to look bad no matter what.

Thx, @Michael for reviewing! Two more notes:

(2)

The placeholder img is displayed as 40x40 - is this correct?

I agree that this looks funny, but stretching the outer box until it 74x74 looks also funny. Not sure what is better. Thoughts @JFernandez-WMF ?

Could we consider not displaying a placeholder img at all? The use case for displaying a placeholder is when

(3)
Not sure how to do this even in principle. Let's discuss this particular requirement with @Urbanecm_WMF next week.

if a preview of Community update module would be added to user workflow, it helps with overall validation. Also, testwiki works fine with commons wiki.

(4) I agree the copy needs to be adjusted. This currently selects on the file-name not the link. Also, we should probably instruct the user to select a (mostly) square image/logo. Anything else is inherently just going to look bad no matter what.

+1 to better instructions.

In T365885#10086247, @Etonkovidova wrote:

Could we consider not displaying a placeholder img at all? The use case for displaying a placeholder is when

I agree the placeholder does not bring much value. Should we remove it? cc @JFernandez-WMF @KStoller-WMF

(3)
Not sure how to do this even in principle. Let's discuss this particular requirement with @Urbanecm_WMF next week.

We fetch files only from commons, I don't think we need this validation as there's no way to add an image from a different source.

if a preview of Community update module would be added to user workflow, it helps with overall validation. Also, testwiki works fine with commons wiki.

That would be indeed ideal, but it requires T356857 to be solved first

(4) I agree the copy needs to be adjusted. This currently selects on the file-name not the link. Also, we should probably instruct the user to select a (mostly) square image/logo. Anything else is inherently just going to look bad no matter what.

+1 to better instructions.

Any suggestions on the wording for this? @JFernandez-WMF @KStoller-WMF

In T365885#10116956, @Sgs wrote:

In T365885#10086247, @Etonkovidova wrote:

Could we consider not displaying a placeholder img at all? The use case for displaying a placeholder is when

I agree the placeholder does not bring much value. Should we remove it? cc @JFernandez-WMF @KStoller-WMF

Definitely see your point here, I agree with removing the placeholder if there's no disagreement.

(4) I agree the copy needs to be adjusted. This currently selects on the file-name not the link. Also, we should probably instruct the user to select a (mostly) square image/logo. Anything else is inherently just going to look bad no matter what.

+1 to better instructions.

Any suggestions on the wording for this? @JFernandez-WMF @KStoller-WMF

My suggestion:
"Search for an image from Wikimedia Commons by typing its name and selecting it from the list. To ensure optimal display, we recommend choosing an image with a square aspect ratio."

What do you think? cc @KStoller-WMF

I'm fine with removing the placeholder image. 👍

"Search for an image from Wikimedia Commons by typing its name and selecting it from the list. To ensure optimal display, we recommend choosing an image with a square aspect ratio."

Sounds good, but I would suggest removing the pronoun "we". So perhaps something like:

Search for an image on Wikimedia Commons by typing its name and selecting it from the list. For the best display, choose an image with a square aspect ratio.

Change #1070911 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] CommunityUpdates: remove placeholder thumbnail

https://gerrit.wikimedia.org/r/1070911

Change #1070911 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] CommunityUpdates: remove placeholder thumbnail

https://gerrit.wikimedia.org/r/1070911

Re-checked on beta - works as per updated specs (the task description is updated):

• placeholder image is removed
• the Image field text is changed: Search for an image on Wikimedia Commons by typing its name and selecting it from the list. For the best display, choose an image with a square aspect ratio.