Skip to content

Commit 2c36f49

Browse files
emeaguiarravichdev
emeaguiar
authored and
ravichdev
committed
Merge pull request #21 from material-components/feature/566-card-image
Image size on cards
2 parents 714ef55 + df2bed0 commit 2c36f49

File tree

12 files changed

+109
-32
lines changed

12 files changed

+109
-32
lines changed

‎.github/workflows/lint-tests.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ jobs:
5656
- name: Build assets
5757
run: npm run build:js
5858

59+
- name: Sleep for 10 seconds
60+
uses: jakejarvis/wait-action@master
61+
with:
62+
time: '10s'
63+
5964
- name: Start docker local env
6065
run: |
6166
npm run env:start

‎plugin/assets/src/block-editor/blocks/card/components/card-image-edit.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,11 @@ const CardImageEdit = ( {
116116
[ `material-design-card-with-${ contentLayout }` ]: contentLayout,
117117
}
118118
) }
119-
style={ { backgroundImage: `url(${ imageSourceUrl })` } }
120119
>
120+
<img
121+
src={ imageSourceUrl }
122+
alt={ cardPrimaryProps.title || '' }
123+
/>
121124
{ contentLayout === 'text-over-media' && (
122125
<div className="mdc-card__media-content">
123126
<CardPrimary { ...cardPrimaryProps } />

‎plugin/assets/src/block-editor/blocks/card/components/card-primary.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ const CardPrimary = ( {
5353
value={ title }
5454
onChange={ value => setter( 'title', value, cardIndex ) }
5555
placeholder={ __( 'Title goes here', 'material-design' ) }
56-
place
5756
/>
5857
) }
5958
{ displaySecondaryText && (

‎plugin/assets/src/block-editor/blocks/common-posts-list/style.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,22 @@
7878
text-decoration: none !important;
7979
}
8080
text-decoration: none !important;
81-
8281
}
8382

8483
.mdc-button__comment-count {
8584
justify-content: left !important;
8685
min-width: 36px !important;
8786
}
87+
88+
.mdc-card__media {
89+
90+
& img {
91+
bottom: 0;
92+
height: 100%;
93+
left: 0;
94+
object-fit: cover;
95+
position: absolute;
96+
top: 0;
97+
width: 100%;
98+
}
99+
}

‎plugin/php/templates/partials/card-image.php‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,8 @@
4747

4848
if ( ! empty( $featured_image ) ) :
4949
?>
50-
<div
51-
class="<?php echo esc_attr( Template::classnames( $class_names ) ); ?>"
52-
style="background-image: url(<?php echo esc_url( $featured_image ); ?>)"
53-
>
50+
<div class="<?php echo esc_attr( Template::classnames( $class_names ) ); ?>">
51+
<?php echo get_the_post_thumbnail( get_the_ID(), 'list' === $style ? 'medium' : 'large' ); ?>
5452
<?php
5553
if ( 'text-over-media' === $layout ) {
5654
?>

‎plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -574,9 +574,13 @@ Object {
574574
>
575575
<div
576576
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
577-
style="background-image: url(http://test.loc/test.jpg);"
578577
tabindex="0"
579-
/>
578+
>
579+
<img
580+
alt="Test title"
581+
src="http://test.loc/test.jpg"
582+
/>
583+
</div>
580584
</div>
581585
<div
582586
class="material-design-card__primary"
@@ -1202,9 +1206,13 @@ Object {
12021206
>
12031207
<div
12041208
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
1205-
style="background-image: url(http://test.loc/test.jpg);"
12061209
tabindex="0"
1207-
/>
1210+
>
1211+
<img
1212+
alt="Test title"
1213+
src="http://test.loc/test.jpg"
1214+
/>
1215+
</div>
12081216
</div>
12091217
<div
12101218
class="material-design-card__primary"
@@ -1911,9 +1919,13 @@ Object {
19111919
>
19121920
<div
19131921
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
1914-
style="background-image: url(http://test.loc/test.jpg);"
19151922
tabindex="0"
1916-
/>
1923+
>
1924+
<img
1925+
alt="Test title"
1926+
src="http://test.loc/test.jpg"
1927+
/>
1928+
</div>
19171929
</div>
19181930
<div
19191931
class="material-design-card__primary"
@@ -2539,9 +2551,13 @@ Object {
25392551
>
25402552
<div
25412553
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
2542-
style="background-image: url(http://test.loc/test.jpg);"
25432554
tabindex="0"
2544-
/>
2555+
>
2556+
<img
2557+
alt="Test title"
2558+
src="http://test.loc/test.jpg"
2559+
/>
2560+
</div>
25452561
</div>
25462562
<div
25472563
class="material-design-card__primary"
@@ -3248,9 +3264,13 @@ Object {
32483264
>
32493265
<div
32503266
class="mdc-card__media mdc-card__media--square material-design-card__media material-design-card-with-text-under-media"
3251-
style="background-image: url(http://test.loc/test.jpg);"
32523267
tabindex="0"
3253-
/>
3268+
>
3269+
<img
3270+
alt="Test title"
3271+
src="http://test.loc/test.jpg"
3272+
/>
3273+
</div>
32543274
</div>
32553275
<div
32563276
class="material-design-card__primary"
@@ -3867,9 +3887,13 @@ Object {
38673887
>
38683888
<div
38693889
class="mdc-card__media mdc-card__media--square material-design-card__media material-design-card-with-text-under-media"
3870-
style="background-image: url(http://test.loc/test.jpg);"
38713890
tabindex="0"
3872-
/>
3891+
>
3892+
<img
3893+
alt="Test title"
3894+
src="http://test.loc/test.jpg"
3895+
/>
3896+
</div>
38733897
</div>
38743898
<div
38753899
class="material-design-card__primary"

‎plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-image-edit.test.js.snap‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,12 @@ Object {
3434
>
3535
<div
3636
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
37-
style="background-image: url(http://test.loc/test.jpg);"
3837
tabindex="0"
3938
>
39+
<img
40+
alt=""
41+
src="http://test.loc/test.jpg"
42+
/>
4043
<div
4144
class="mdc-card__media-content"
4245
>
@@ -78,9 +81,12 @@ Object {
7881
>
7982
<div
8083
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
81-
style="background-image: url(http://test.loc/test.jpg);"
8284
tabindex="0"
8385
>
86+
<img
87+
alt=""
88+
src="http://test.loc/test.jpg"
89+
/>
8490
<div
8591
class="mdc-card__media-content"
8692
>
@@ -300,9 +306,12 @@ Object {
300306
>
301307
<div
302308
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
303-
style="background-image: url(http://test.loc/test.jpg);"
304309
tabindex="0"
305310
>
311+
<img
312+
alt=""
313+
src="http://test.loc/test.jpg"
314+
/>
306315
<div
307316
class="mdc-card__media-content"
308317
>
@@ -320,9 +329,12 @@ Object {
320329
>
321330
<div
322331
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
323-
style="background-image: url(http://test.loc/test.jpg);"
324332
tabindex="0"
325333
>
334+
<img
335+
alt=""
336+
src="http://test.loc/test.jpg"
337+
/>
326338
<div
327339
class="mdc-card__media-content"
328340
>
@@ -518,9 +530,12 @@ Object {
518530
>
519531
<div
520532
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
521-
style="background-image: url(http://test.loc/test.jpg);"
522533
tabindex="0"
523534
>
535+
<img
536+
alt=""
537+
src="http://test.loc/test.jpg"
538+
/>
524539
<div
525540
class="mdc-card__media-content"
526541
>
@@ -538,9 +553,12 @@ Object {
538553
>
539554
<div
540555
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
541-
style="background-image: url(http://test.loc/test.jpg);"
542556
tabindex="0"
543557
>
558+
<img
559+
alt=""
560+
src="http://test.loc/test.jpg"
561+
/>
544562
<div
545563
class="mdc-card__media-content"
546564
>

‎plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-image.test.js.snap‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,9 +244,12 @@ Object {
244244
>
245245
<div
246246
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
247-
style="background-image: url(http://test.loc/test.jpg);"
248247
tabindex="0"
249248
>
249+
<img
250+
alt=""
251+
src="http://test.loc/test.jpg"
252+
/>
250253
<div
251254
class="mdc-card__media-content"
252255
>
@@ -264,9 +267,12 @@ Object {
264267
>
265268
<div
266269
class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
267-
style="background-image: url(http://test.loc/test.jpg);"
268270
tabindex="0"
269271
>
272+
<img
273+
alt=""
274+
src="http://test.loc/test.jpg"
275+
/>
270276
<div
271277
class="mdc-card__media-content"
272278
>

‎plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11194,7 +11194,6 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
1119411194
<ForwardRef
1119511195
className="material-design-card__title mdc-typography mdc-typography--headline6"
1119611196
onChange={[Function]}
11197-
place={true}
1119811197
placeholder="Title goes here"
1119911198
tagName="h2"
1120011199
value="Title #1 goes here"
@@ -11514,7 +11513,6 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
1151411513
<ForwardRef
1151511514
className="material-design-card__title mdc-typography mdc-typography--headline6"
1151611515
onChange={[Function]}
11517-
place={true}
1151811516
placeholder="Title goes here"
1151911517
tagName="h2"
1152011518
value="Title #2 goes here"

‎plugin/tests/phpunit/php/blocks/class-test-posts-list-block.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ public function test_render_block_hand_picked() {
321321
$content = $this->clean_content( $content );
322322

323323
// Assert the article with featured image shows content inside the image container.
324-
$this->assertEquals( 1, substr_count( $content, 'style="background-image: url(http://example.org/wp-content/uploads/image.jpg)"><div class="mdc-card__media-content">' ) );
324+
$this->assertEquals( 1, substr_count( $content, '<img width="1" height="1" src="http://example.org/wp-content/uploads/image.jpg"' ) );
325325

326326
// Assert all 4 posts are rendered.
327327
$this->assertEquals( 4, substr_count( $content, 'class="single-post-card__title' ) );
@@ -427,7 +427,7 @@ public function test_render_block_recent() {
427427
$content = $this->clean_content( $content );
428428

429429
// Assert the article with featured image shows content inside the image container.
430-
$this->assertEquals( 1, substr_count( $content, 'style="background-image: url(http://example.org/wp-content/uploads/image.jpg)"><div class="mdc-card__media-content">' ) );
430+
$this->assertEquals( 1, substr_count( $content, '<img width="1" height="1" src="http://example.org/wp-content/uploads/image.jpg"' ) );
431431

432432
// Assert all 5 posts are rendered.
433433
$this->assertEquals( 5, substr_count( $content, 'class="single-post-card__title' ) );

0 commit comments

Comments
 (0)