Skip to content

Commit f0cc0a2

Browse files
RaduCristianPopescuRaduCristianPopescu
authored
feat: add aspect ratio control for Feedzy Classic Block (#1117)
By default, the `1:1` will be used to maintain compatibility.
1 parent 8e122a3 commit f0cc0a2

6 files changed

Lines changed: 219 additions & 50 deletions

File tree

‎includes/abstract/feedzy-rss-feeds-admin-abstract.php‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -620,6 +620,8 @@ public function get_short_code_attributes( $atts ) {
620620
'default' => '',
621621
// thumbs pixel size.
622622
'size' => '',
623+
// default aspect ratio for the image.
624+
'aspectRatio' => '1',
623625
// only display item if title contains specific keywords (Use comma(,) and plus(+) keyword).
624626
'keywords_title' => '',
625627
// only display item if title OR content contains specific keywords (Use comma(,) and plus(+) keyword).
@@ -1404,44 +1406,54 @@ private function get_feed_item_filter( $sc, $sizes, $item, $feed_url, $index, $i
14041406
$item_link = $item->get_feed()->get_permalink();
14051407
}
14061408
}
1407-
$new_link = apply_filters( 'feedzy_item_url_filter', $item_link, $sc, $item );
1409+
$new_link = apply_filters( 'feedzy_item_url_filter', $item_link, $sc, $item );
1410+
$amp_running = function_exists( 'amp_is_request' ) && amp_is_request();
1411+
$content_thumb = '';
14081412

1409-
// Fetch image thumbnail.
1413+
$thumbnail_to_use = '';
14101414
if ( 'yes' === $sc['thumb'] || 'auto' === $sc['thumb'] ) {
1411-
$the_thumbnail = $this->feedzy_retrieve_image( $item, $sc );
1412-
$content_thumb = '';
1415+
// Fetch image thumbnail.
1416+
$thumbnail_to_use = $this->feedzy_retrieve_image( $item, $sc );
1417+
$thumbnail_to_use = $this->feedzy_image_encode( $thumbnail_to_use );
1418+
1419+
if ( empty( $thumbnail_to_use ) && 'yes' === $sc['thumb'] ) {
1420+
$thumbnail_to_use = $sc['default'];
1421+
}
1422+
} else {
1423+
$thumbnail_to_use = $sc['default'];
1424+
}
1425+
1426+
if ( ! empty( $thumbnail_to_use ) && is_string( $thumbnail_to_use ) ) {
1427+
$img_style = '';
1428+
1429+
if ( isset( $sizes['height'] ) && is_numeric( $sizes['height'] ) ) {
1430+
$img_style .= 'height:' . $sizes['height'] . 'px;';
1431+
}
1432+
1433+
if ( isset( $sc['aspectRatio'] ) && '1' !== $sc['aspectRatio'] ) {
1434+
$img_style .= 'aspect-ratio:' . $sc['aspectRatio'] . '; object-fit: fill;';
1435+
}
1436+
14131437
if (
1414-
is_string( $the_thumbnail ) && ! empty( $the_thumbnail ) &&
1438+
isset( $sizes['width'] ) && is_numeric( $sizes['width'] ) &&
14151439
(
1416-
'yes' === $sc['thumb'] ||
1440+
$sizes['width'] !== $sizes['height'] || // Note: Custom modification via filters.
14171441
(
1418-
'auto' === $sc['thumb'] &&
1419-
! strpos( $the_thumbnail, 'img/feedzy.svg' )
1442+
isset( $sc['aspectRatio'] ) &&
1443+
(
1444+
( 'auto' === $sc['aspectRatio'] && $amp_running ) || // Note: AMP compatibility. Auto without `height` breaks the layout.
1445+
'1' === $sc['aspectRatio'] // Note: Backward compatiblity.
1446+
)
14201447
)
14211448
)
14221449
) {
1423-
$the_thumbnail = $this->feedzy_image_encode( $the_thumbnail );
1424-
$content_thumb .= '<span class="fetched" style="background-image: url(\'' . $the_thumbnail . '\');" title="' . esc_attr( $item->get_title() ) . '"></span>';
1425-
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
1426-
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $the_thumbnail . '">';
1427-
}
1450+
$img_style .= 'width:' . $sizes['width'] . 'px;';
14281451
}
14291452

1430-
if ( empty( $the_thumbnail ) && 'yes' === $sc['thumb'] ) {
1431-
$content_thumb .= '<span class="default" style="background-image:url(' . $sc['default'] . ');" title="' . esc_attr( $item->get_title() ) . '"></span>';
1432-
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
1433-
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $sc['default'] . '">';
1434-
}
1435-
}
1436-
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
1437-
} else {
1438-
$content_thumb = '';
1439-
$content_thumb .= '<span class="default" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image:url(' . $sc['default'] . ');" title="' . $item->get_title() . '"></span>';
1440-
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
1441-
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $sc['default'] . '">';
1442-
}
1443-
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
1453+
$content_thumb .= '<img decoding="async" src="' . $thumbnail_to_use . '" title="' . esc_attr( $item->get_title() ) . '" style="' . $img_style . '">';
1454+
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
14441455
}
1456+
14451457
$content_title = html_entity_decode( $item->get_title(), ENT_QUOTES, 'UTF-8' );
14461458
if ( is_numeric( $sc['title'] ) ) {
14471459
$length = intval( $sc['title'] );
@@ -1593,11 +1605,22 @@ private function get_feed_item_filter( $sc, $sizes, $item, $feed_url, $index, $i
15931605
if ( empty( $item_content ) ) {
15941606
$item_content = esc_html__( 'Post Content', 'feedzy-rss-feeds' );
15951607
}
1608+
1609+
$img_style = '';
1610+
if ( isset( $sizes['height'] ) ) {
1611+
$img_style = 'height:' . $sizes['height'] . 'px;';
1612+
if ( isset( $sc['aspectRatio'] ) && '1' !== $sc['aspectRatio'] ) {
1613+
$img_style .= 'aspect-ratio:' . $sc['aspectRatio'] . ';';
1614+
} elseif ( isset( $sizes['width'] ) ) {
1615+
$img_style .= 'width:' . $sizes['width'] . 'px;';
1616+
}
1617+
}
1618+
15961619
$item_array = array(
15971620
'feed_url' => $item->get_feed()->subscribe_url(),
15981621
'item_unique_hash' => wp_hash( $item->get_permalink() ),
15991622
'item_img_class' => 'rss_image',
1600-
'item_img_style' => 'width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px;',
1623+
'item_img_style' => $img_style,
16011624
'item_url' => $new_link,
16021625
'item_url_target' => $sc['target'],
16031626
'item_url_follow' => isset( $sc['follow'] ) && 'yes' === $sc['follow'] ? 'nofollow' : '',

‎includes/gutenberg/feedzy-rss-feeds-gutenberg-block.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ public function feedzy_register_block_type() {
171171
'type' => 'number',
172172
'default' => 150,
173173
),
174+
'aspectRatio' => array(
175+
'type' => 'string',
176+
'default' => '1',
177+
),
174178
'price' => array(
175179
'type' => 'boolean',
176180
'default' => true,

‎js/FeedzyBlock/Editor.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ class Editor extends Component {
5353
this.onThumb = this.onThumb.bind(this);
5454
this.onDefault = this.onDefault.bind(this);
5555
this.onSize = this.onSize.bind(this);
56+
this.onAspectRatio = this.onAspectRatio.bind(this);
5657
this.onReferralURL = this.onReferralURL.bind(this);
5758
this.onColumns = this.onColumns.bind(this);
5859
this.onTemplate = this.onTemplate.bind(this);
@@ -326,6 +327,9 @@ class Editor extends Component {
326327
onSize(value) {
327328
this.props.setAttributes({ size: !value ? 150 : Number(value) });
328329
}
330+
onAspectRatio(value) {
331+
this.props.setAttributes({ aspectRatio: value });
332+
}
329333
onReferralURL(value) {
330334
window.tiTrk?.with('feedzy').add({ feature: 'block-referral-url' });
331335
this.props.setAttributes({ referral_url: value });
@@ -669,9 +673,9 @@ class Editor extends Component {
669673
<div
670674
className="rss_image"
671675
style={{
672-
width:
676+
aspectRatio:
673677
this.props.attributes
674-
.size + 'px',
678+
.aspectRatio,
675679
height:
676680
this.props.attributes
677681
.size + 'px',
@@ -684,41 +688,37 @@ class Editor extends Component {
684688
item.title
685689
)}
686690
style={{
687-
width:
691+
aspectRatio:
688692
this.props
689693
.attributes
690-
.size +
691-
'px',
694+
.aspectRatio,
692695
height:
693696
this.props
694697
.attributes
695698
.size +
696699
'px',
697700
}}
698701
>
699-
<span
700-
className="fetched"
702+
<img
703+
src={this.getImageURL(
704+
item,
705+
false
706+
)}
707+
alt={unescapeHTML(
708+
item.title
709+
)}
701710
style={{
702-
width:
711+
aspectRatio:
703712
this.props
704713
.attributes
705-
.size +
706-
'px',
714+
.aspectRatio,
707715
height:
708716
this.props
709717
.attributes
710718
.size +
711719
'px',
712-
backgroundImage:
713-
this.getImageURL(
714-
item,
715-
true
716-
),
717720
}}
718-
title={unescapeHTML(
719-
item.title
720-
)}
721-
></span>
721+
/>
722722
</a>
723723
</Disabled>
724724
</div>

‎js/FeedzyBlock/attributes.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const attributes = {
117117
disableStyle: {
118118
type: 'boolean',
119119
default: false,
120-
},
120+
},
121121
follow: {
122122
type: 'string',
123123
default: 'no',
@@ -137,7 +137,11 @@ const attributes = {
137137
_dry_run_tags_: {
138138
type: 'string',
139139
default: '',
140-
}
140+
},
141+
aspectRatio: {
142+
type: 'string',
143+
default: '1',
144+
},
141145
};
142146

143-
export default attributes;
147+
export default attributes;

‎js/FeedzyBlock/inspector.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -660,6 +660,79 @@ class Inspector extends Component {
660660
this.props.edit.onSize
661661
}
662662
/>
663+
<SelectControl
664+
label={__(
665+
'Aspect Ratio',
666+
'feedzy-rss-feeds'
667+
)}
668+
value={
669+
this.props.attributes
670+
.aspectRatio
671+
}
672+
options={[
673+
{
674+
label: __(
675+
'Original',
676+
'feedzy-rss-feeds'
677+
),
678+
value: 'auto',
679+
},
680+
{
681+
label: __(
682+
'1:1 (Square)',
683+
'feedzy-rss-feeds'
684+
),
685+
value: '1',
686+
},
687+
{
688+
label: __(
689+
'4:3 (Standard)',
690+
'feedzy-rss-feeds'
691+
),
692+
value: '4/3',
693+
},
694+
{
695+
label: __(
696+
'3:4 (Portrait)',
697+
'feedzy-rss-feeds'
698+
),
699+
value: '3/4',
700+
},
701+
{
702+
label: __(
703+
'3:2 (Classic)',
704+
'feedzy-rss-feeds'
705+
),
706+
value: '3 / 2',
707+
},
708+
{
709+
label: __(
710+
'2:3 (Clasic Portrait)',
711+
'feedzy-rss-feeds'
712+
),
713+
value: '2/3',
714+
},
715+
{
716+
label: __(
717+
'16:9 (Widescreen)',
718+
'feedzy-rss-feeds'
719+
),
720+
value: '16/9',
721+
},
722+
{
723+
label: __(
724+
'9:16 (Vertical)',
725+
'feedzy-rss-feeds'
726+
),
727+
value: '9/16',
728+
},
729+
]}
730+
onChange={
731+
this.props.edit
732+
.onAspectRatio
733+
}
734+
className="feedzy-aspect-ratio-select"
735+
/>
663736
</Fragment>
664737
)}
665738
</PanelBody>

‎tests/e2e/specs/classic-block.spec.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { test, expect } from '@wordpress/e2e-test-utils-playwright';
5+
6+
test.describe('Feedzy Classic Block', () => {
7+
test('check aspect ratio default', async ({ editor, page, admin }) => {
8+
await admin.createNewPost();
9+
10+
await editor.insertBlock({
11+
name: 'feedzy-rss-feeds/feedzy-block',
12+
attributes: {
13+
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
14+
max: 1,
15+
},
16+
});
17+
18+
const postId = await editor.publishPost();
19+
await page.goto(`/?p=${postId}`);
20+
21+
const image = page.locator('.feedzy-rss .rss_image img');
22+
await expect(image).toHaveAttribute(
23+
'style',
24+
'height:150px;width:150px;'
25+
);
26+
});
27+
28+
test('check aspect ratio (3/2)', async ({ editor, page, admin }) => {
29+
await admin.createNewPost();
30+
31+
await editor.insertBlock({
32+
name: 'feedzy-rss-feeds/feedzy-block',
33+
attributes: {
34+
aspectRatio: '3/2',
35+
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
36+
max: 1,
37+
},
38+
});
39+
40+
const postId = await editor.publishPost();
41+
await page.goto(`/?p=${postId}`);
42+
43+
const image = page.locator('.feedzy-rss .rss_image img');
44+
await expect(image).toHaveAttribute('style', /aspect-ratio:\s*3\/2;/i);
45+
});
46+
47+
test('check aspect ratio auto', async ({ editor, page, admin }) => {
48+
await admin.createNewPost();
49+
50+
await editor.insertBlock({
51+
name: 'feedzy-rss-feeds/feedzy-block',
52+
attributes: {
53+
aspectRatio: 'auto',
54+
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
55+
max: 1,
56+
},
57+
});
58+
59+
const postId = await editor.publishPost();
60+
await page.goto(`/?p=${postId}`);
61+
62+
const image = page.locator('.feedzy-rss .rss_image img');
63+
await expect(image).toHaveAttribute('style', /aspect-ratio:\s*auto;/i);
64+
});
65+
});

0 commit comments

Comments
 (0)