Skip to content

feat: add aspect ratio control for Feedzy Classic Block #1117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Soare-Robert-Daniel merged 7 commits into from
Aug 11, 2025
Merged

feat: add aspect ratio control for Feedzy Classic Block #1117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
873082b
feat: added thumbnail image control
RaduCristianPopescu Jul 31, 2025
18e5498
fix: formatting
RaduCristianPopescu Jul 31, 2025
c466b87
chore: format
RaduCristianPopescu Aug 1, 2025
27164cc
refactor: selector's design
RaduCristianPopescu Aug 1, 2025
251a556
fix: update default aspect ratio for compatibility
RaduCristianPopescu Aug 4, 2025
283064d
fix: linter
RaduCristianPopescu Aug 4, 2025
1974b4c
test: add e2e tests for Feedzy Classic Block aspect ratios
RaduCristianPopescu Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 51 additions & 28 deletions includes/abstract/feedzy-rss-feeds-admin-abstract.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,6 +620,8 @@ public function get_short_code_attributes( $atts ) {
'default' => '',
// thumbs pixel size.
'size' => '',
// default aspect ratio for the image.
'aspectRatio' => '1',
// only display item if title contains specific keywords (Use comma(,) and plus(+) keyword).
'keywords_title' => '',
// only display item if title OR content contains specific keywords (Use comma(,) and plus(+) keyword).
Expand Down Expand Up @@ -1404,44 +1406,54 @@ private function get_feed_item_filter( $sc, $sizes, $item, $feed_url, $index, $i
$item_link = $item->get_feed()->get_permalink();
}
}
$new_link = apply_filters( 'feedzy_item_url_filter', $item_link, $sc, $item );
$new_link = apply_filters( 'feedzy_item_url_filter', $item_link, $sc, $item );
$amp_running = function_exists( 'amp_is_request' ) && amp_is_request();
$content_thumb = '';

// Fetch image thumbnail.
$thumbnail_to_use = '';
if ( 'yes' === $sc['thumb'] || 'auto' === $sc['thumb'] ) {
$the_thumbnail = $this->feedzy_retrieve_image( $item, $sc );
$content_thumb = '';
// Fetch image thumbnail.
$thumbnail_to_use = $this->feedzy_retrieve_image( $item, $sc );
$thumbnail_to_use = $this->feedzy_image_encode( $thumbnail_to_use );

if ( empty( $thumbnail_to_use ) && 'yes' === $sc['thumb'] ) {
$thumbnail_to_use = $sc['default'];
}
} else {
$thumbnail_to_use = $sc['default'];
}

if ( ! empty( $thumbnail_to_use ) && is_string( $thumbnail_to_use ) ) {
$img_style = '';

if ( isset( $sizes['height'] ) && is_numeric( $sizes['height'] ) ) {
$img_style .= 'height:' . $sizes['height'] . 'px;';
}

if ( isset( $sc['aspectRatio'] ) && '1' !== $sc['aspectRatio'] ) {
$img_style .= 'aspect-ratio:' . $sc['aspectRatio'] . '; object-fit: fill;';
}

if (
is_string( $the_thumbnail ) && ! empty( $the_thumbnail ) &&
isset( $sizes['width'] ) && is_numeric( $sizes['width'] ) &&
(
'yes' === $sc['thumb'] ||
$sizes['width'] !== $sizes['height'] || // Note: Custom modification via filters.
(
'auto' === $sc['thumb'] &&
! strpos( $the_thumbnail, 'img/feedzy.svg' )
isset( $sc['aspectRatio'] ) &&
(
( 'auto' === $sc['aspectRatio'] && $amp_running ) || // Note: AMP compatibility. Auto without `height` breaks the layout.
'1' === $sc['aspectRatio'] // Note: Backward compatiblity.
)
)
)
) {
$the_thumbnail = $this->feedzy_image_encode( $the_thumbnail );
$content_thumb .= '<span class="fetched" style="background-image: url(\'' . $the_thumbnail . '\');" title="' . esc_attr( $item->get_title() ) . '"></span>';
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $the_thumbnail . '">';
}
$img_style .= 'width:' . $sizes['width'] . 'px;';
}

if ( empty( $the_thumbnail ) && 'yes' === $sc['thumb'] ) {
$content_thumb .= '<span class="default" style="background-image:url(' . $sc['default'] . ');" title="' . esc_attr( $item->get_title() ) . '"></span>';
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $sc['default'] . '">';
}
}
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
} else {
$content_thumb = '';
$content_thumb .= '<span class="default" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image:url(' . $sc['default'] . ');" title="' . $item->get_title() . '"></span>';
if ( ! isset( $sc['amp'] ) || 'no' !== $sc['amp'] ) {
$content_thumb .= '<amp-img width="' . $sizes['width'] . '" height="' . $sizes['height'] . '" src="' . $sc['default'] . '">';
}
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
$content_thumb .= '<img decoding="async" src="' . $thumbnail_to_use . '" title="' . esc_attr( $item->get_title() ) . '" style="' . $img_style . '">';
$content_thumb = apply_filters( 'feedzy_thumb_output', $content_thumb, $feed_url, $sizes, $item );
}

$content_title = html_entity_decode( $item->get_title(), ENT_QUOTES, 'UTF-8' );
if ( is_numeric( $sc['title'] ) ) {
$length = intval( $sc['title'] );
Expand Down Expand Up @@ -1593,11 +1605,22 @@ private function get_feed_item_filter( $sc, $sizes, $item, $feed_url, $index, $i
if ( empty( $item_content ) ) {
$item_content = esc_html__( 'Post Content', 'feedzy-rss-feeds' );
}

$img_style = '';
if ( isset( $sizes['height'] ) ) {
$img_style = 'height:' . $sizes['height'] . 'px;';
if ( isset( $sc['aspectRatio'] ) && '1' !== $sc['aspectRatio'] ) {
$img_style .= 'aspect-ratio:' . $sc['aspectRatio'] . ';';
} elseif ( isset( $sizes['width'] ) ) {
$img_style .= 'width:' . $sizes['width'] . 'px;';
}
}

$item_array = array(
'feed_url' => $item->get_feed()->subscribe_url(),
'item_unique_hash' => wp_hash( $item->get_permalink() ),
'item_img_class' => 'rss_image',
'item_img_style' => 'width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px;',
'item_img_style' => $img_style,
'item_url' => $new_link,
'item_url_target' => $sc['target'],
'item_url_follow' => isset( $sc['follow'] ) && 'yes' === $sc['follow'] ? 'nofollow' : '',
Expand Down
4 changes: 4 additions & 0 deletions includes/gutenberg/feedzy-rss-feeds-gutenberg-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,10 @@ public function feedzy_register_block_type() {
'type' => 'number',
'default' => 150,
),
'aspectRatio' => array(
'type' => 'string',
'default' => '1',
),
'price' => array(
'type' => 'boolean',
'default' => true,
Expand Down
38 changes: 19 additions & 19 deletions js/FeedzyBlock/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ class Editor extends Component {
this.onThumb = this.onThumb.bind(this);
this.onDefault = this.onDefault.bind(this);
this.onSize = this.onSize.bind(this);
this.onAspectRatio = this.onAspectRatio.bind(this);
this.onReferralURL = this.onReferralURL.bind(this);
this.onColumns = this.onColumns.bind(this);
this.onTemplate = this.onTemplate.bind(this);
Expand Down Expand Up @@ -326,6 +327,9 @@ class Editor extends Component {
onSize(value) {
this.props.setAttributes({ size: !value ? 150 : Number(value) });
}
onAspectRatio(value) {
this.props.setAttributes({ aspectRatio: value });
}
onReferralURL(value) {
window.tiTrk?.with('feedzy').add({ feature: 'block-referral-url' });
this.props.setAttributes({ referral_url: value });
Expand Down Expand Up @@ -669,9 +673,9 @@ class Editor extends Component {
<div
className="rss_image"
style={{
width:
aspectRatio:
this.props.attributes
.size + 'px',
.aspectRatio,
height:
this.props.attributes
.size + 'px',
Expand All @@ -684,41 +688,37 @@ class Editor extends Component {
item.title
)}
style={{
width:
aspectRatio:
this.props
.attributes
.size +
'px',
.aspectRatio,
height:
this.props
.attributes
.size +
'px',
}}
>
<span
className="fetched"
<img
src={this.getImageURL(
item,
false
)}
alt={unescapeHTML(
item.title
)}
style={{
width:
aspectRatio:
this.props
.attributes
.size +
'px',
.aspectRatio,
height:
this.props
.attributes
.size +
'px',
backgroundImage:
this.getImageURL(
item,
true
),
}}
title={unescapeHTML(
item.title
)}
></span>
/>
</a>
</Disabled>
</div>
Expand Down
10 changes: 7 additions & 3 deletions js/FeedzyBlock/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const attributes = {
disableStyle: {
type: 'boolean',
default: false,
},
},
follow: {
type: 'string',
default: 'no',
Expand All @@ -137,7 +137,11 @@ const attributes = {
_dry_run_tags_: {
type: 'string',
default: '',
}
},
aspectRatio: {
type: 'string',
default: '1',
},
};

export default attributes;
export default attributes;
73 changes: 73 additions & 0 deletions js/FeedzyBlock/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,79 @@ class Inspector extends Component {
this.props.edit.onSize
}
/>
<SelectControl
label={__(
'Aspect Ratio',
'feedzy-rss-feeds'
)}
value={
this.props.attributes
.aspectRatio
}
options={[
{
label: __(
'Original',
'feedzy-rss-feeds'
),
value: 'auto',
},
{
label: __(
'1:1 (Square)',
'feedzy-rss-feeds'
),
value: '1',
},
{
label: __(
'4:3 (Standard)',
'feedzy-rss-feeds'
),
value: '4/3',
},
{
label: __(
'3:4 (Portrait)',
'feedzy-rss-feeds'
),
value: '3/4',
},
{
label: __(
'3:2 (Classic)',
'feedzy-rss-feeds'
),
value: '3 / 2',
},
{
label: __(
'2:3 (Clasic Portrait)',
'feedzy-rss-feeds'
),
value: '2/3',
},
{
label: __(
'16:9 (Widescreen)',
'feedzy-rss-feeds'
),
value: '16/9',
},
{
label: __(
'9:16 (Vertical)',
'feedzy-rss-feeds'
),
value: '9/16',
},
]}
onChange={
this.props.edit
.onAspectRatio
}
className="feedzy-aspect-ratio-select"
/>
</Fragment>
)}
</PanelBody>
Expand Down
65 changes: 65 additions & 0 deletions tests/e2e/specs/classic-block.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* WordPress dependencies
*/
import { test, expect } from '@wordpress/e2e-test-utils-playwright';

test.describe('Feedzy Classic Block', () => {
test('check aspect ratio default', async ({ editor, page, admin }) => {
await admin.createNewPost();

await editor.insertBlock({
name: 'feedzy-rss-feeds/feedzy-block',
attributes: {
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
max: 1,
},
});

const postId = await editor.publishPost();
await page.goto(`/?p=${postId}`);

const image = page.locator('.feedzy-rss .rss_image img');
await expect(image).toHaveAttribute(
'style',
'height:150px;width:150px;'
);
});

test('check aspect ratio (3/2)', async ({ editor, page, admin }) => {
await admin.createNewPost();

await editor.insertBlock({
name: 'feedzy-rss-feeds/feedzy-block',
attributes: {
aspectRatio: '3/2',
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
max: 1,
},
});

const postId = await editor.publishPost();
await page.goto(`/?p=${postId}`);

const image = page.locator('.feedzy-rss .rss_image img');
await expect(image).toHaveAttribute('style', /aspect-ratio:\s*3\/2;/i);
});

test('check aspect ratio auto', async ({ editor, page, admin }) => {
await admin.createNewPost();

await editor.insertBlock({
name: 'feedzy-rss-feeds/feedzy-block',
attributes: {
aspectRatio: 'auto',
feeds: 'https://www.nasa.gov/feeds/iotd-feed/',
max: 1,
},
});

const postId = await editor.publishPost();
await page.goto(`/?p=${postId}`);

const image = page.locator('.feedzy-rss .rss_image img');
await expect(image).toHaveAttribute('style', /aspect-ratio:\s*auto;/i);
});
});
Loading