Skip to content
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

Add image scale property to Teaser Block schema (#4653) #4706

Closed
wants to merge 7 commits into from
Closed

Add image scale property to Teaser Block schema (#4653) #4706

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6ab2b30
Add image scale property to Teaser Block schema (#4653)
cihanandac Apr 17, 2023
afa5d0b
Merge branch 'master' into Teaser-block-image-resize-#4653
erral Apr 18, 2023
d87f000
Merge branch 'master' into Teaser-block-image-resize-#4653
erral Apr 19, 2023
2994b29
Add default value to the scale and intl for values
cihanandac Apr 20, 2023
d0db84f
Merge branch 'master' into Teaser-block-image-resize-#4653
erral Apr 20, 2023
e4873b4
Add teaser block imageScale intl messages to the language files
cihanandac Apr 20, 2023
dd673eb
Merge branch 'master' into Teaser-block-image-resize-#4653
cihanandac Apr 20, 2023
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
1 change: 1 addition & 0 deletions news/4653.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add a new property called 'image scale' to the schema of the Teaser Block. @cihanandac
5 changes: 3 additions & 2 deletions src/components/manage/Blocks/Teaser/DefaultBody.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ const TeaserDefaultTemplate = (props) => {
const href = data.href?.[0];
const image = data.preview_image?.[0];
const align = data?.styles?.align;

const scale = data?.styles?.scale;

const hasImageComponent = config.getComponent('Image').component;
const Image = config.getComponent('Image').component || DefaultImage;
const { openExternalLinkInNewTab } = config.settings;
const defaultImageSrc =
href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
href && flattenToAppURL(getTeaserImageURL({ href, image, align, scale }));

return (
<div className={cx('block teaser', className)}>
Expand Down
17 changes: 16 additions & 1 deletion src/components/manage/Blocks/Teaser/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ const messages = defineMessages({
id: 'Alignment',
defaultMessage: 'Alignment',
},
scale: {
id: 'image_scale',
defaultMessage: 'Image size',
},
});

export const TeaserSchema = ({ intl }) => {
Expand Down Expand Up @@ -96,8 +100,19 @@ export const TeaserSchema = ({ intl }) => {
actions: ['left', 'right', 'center'],
default: 'left',
};
schema.properties.styles.schema.properties.scale = {
title: intl.formatMessage(messages.scale),
choices: [
['mini', 'Mini'],
['preview', 'Preview'],
['teaser', 'Teaser'],
['large', 'Large'],
['great', 'Great'],
],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scale names should be passed through intl to get them translated.

For future reuse of the scale list, perhaps this list should be configurable in the block configuration, this way a developer can change the list of the available scales without overriding the component.

Moreover, right now we do not have an API endpoint to expose the available image scales, but in the future I think that the list of available scales should come from the API endpoint call.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review. I will keep this in mind for the future contributions.

default: 'teaser',
};

schema.properties.styles.schema.fieldsets[0].fields = ['align'];
schema.properties.styles.schema.fieldsets[0].fields = ['align', 'scale'];

return schema;
};
4 changes: 2 additions & 2 deletions src/components/manage/Blocks/Teaser/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { isInternalURL } from '@plone/volto/helpers';
import config from '@plone/volto/registry';

export function getTeaserImageURL({ href, image, align }) {
export function getTeaserImageURL({ href, image, align, scale }) {
Copy link
Member

@erral erral Apr 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To keep backwards compatibility in the function, I think that the scale parameter should get the default value.

export function getTeaserImageURL({ href, image, align, scale = 'teaser' }) {

// The default scale used in teasers is the 'teaser' scale
// except if it's customized otherwise in the teaser block settings
// or if the teaser is center (top)
const imageScale =
align === 'center'
? 'great'
: config.blocks.blocksConfig['teaser'].imageScale || 'teaser';
: config.blocks.blocksConfig['teaser'].imageScale || scale;

if (image) {
// If the image is overriden locally in the teaser block
Expand Down