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

Render news item preview images using image_scales #3

Open
wants to merge 2 commits into
base: ree-solr-support
Choose a base branch
from
Open

Render news item preview images using image_scales #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
541cf11
Render news item preview images using image_scales
davisagli Jun 27, 2023
e85b4ae
fix tests
davisagli Jun 27, 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
113 changes: 61 additions & 52 deletions src/components/theme/SolrSearch/resultItems/NewsItemResultItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,68 @@ import newsSVG from '@plone/volto/icons/news.svg';
import ConcatChildren from './helpers/ConcatChildren';
import ImageType, { getImageType } from './helpers/ImageType';

const NewsItemResultItem = ({ item }) => (
<article className="tileItem">
{/* <span className="contentTypeLabel">
<FormattedMessage id={mapContentTypes(item['@type'])} />
</span> */}
<Link to={item['@id']}>
<img
className="previewImage"
src={`${item['@id']}/@@images/image/preview`}
alt={item.title}
/>
</Link>
<p className="url">{item['@id']}</p>
<h2 className="tileHeadline">
<Link to={item['@id']} className="summary url" title={item['@type']}>
{item.title}
</Link>
</h2>
{item?.highlighting && item.highlighting.length > 0 ? (
<div className="tileBody">
<span
className="description"
dangerouslySetInnerHTML={{
__html: item.highlighting,
}}
/>
{' ...'}
</div>
) : (
<div className="tileBody">
<span className="description">
{item.description
? item.description.length > 200
? item.description.slice(0, 199) + '...'
: item.description
: ''}
</span>
</div>
)}
<div className="tileFooter">
{(item?.effective || item?.extras?.start) && (
<ConcatChildren if1={getImageType(item?.extras?.mime_type)}>
<Icon className="itemIcon" size="20px" name={newsSVG} />
<ImageType mimeType={item?.extras?.mime_type} />
<ResultItemDate
date={item?.extras?.start ? item.extras.start : item?.effective}
showIfNotPublished={true}
const NewsItemResultItem = ({ item }) => {
const previewScale =
item.image_scales[item.image_field]?.[0]?.scales?.preview;

return (
<article className="tileItem">
{/* <span className="contentTypeLabel">
<FormattedMessage id={mapContentTypes(item['@type'])} />
</span> */}
{previewScale && (
<Link to={item['@id']}>
<img
className="previewImage"
src={`${item['@id']}/${previewScale.download}`}
alt={item.title}
width={previewScale.width}
height={previewScale.height}
/>
</ConcatChildren>
</Link>
)}
</div>
<div className="visualClear" />
</article>
);
<p className="url">{item['@id']}</p>
<h2 className="tileHeadline">
<Link to={item['@id']} className="summary url" title={item['@type']}>
{item.title}
</Link>
</h2>
{item?.highlighting && item.highlighting.length > 0 ? (
<div className="tileBody">
<span
className="description"
dangerouslySetInnerHTML={{
__html: item.highlighting,
}}
/>
{' ...'}
</div>
) : (
<div className="tileBody">
<span className="description">
{item.description
? item.description.length > 200
? item.description.slice(0, 199) + '...'
: item.description
: ''}
</span>
</div>
)}
<div className="tileFooter">
{(item?.effective || item?.extras?.start) && (
<ConcatChildren if1={getImageType(item?.extras?.mime_type)}>
<Icon className="itemIcon" size="20px" name={newsSVG} />
<ImageType mimeType={item?.extras?.mime_type} />
<ResultItemDate
date={item?.extras?.start ? item.extras.start : item?.effective}
showIfNotPublished={true}
/>
</ConcatChildren>
)}
</div>
<div className="visualClear" />
</article>
);
};

export default NewsItemResultItem;
4 changes: 3 additions & 1 deletion src/reducers/solrsearch/solrsearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const mapSolrItem = (portal_path, highlighting, item) => {
created,
effective,
image_field,
image_scales,
review_state,
...extras
} = item;
Expand All @@ -55,7 +56,8 @@ const mapSolrItem = (portal_path, highlighting, item) => {
created,
effective,
UID, // unused
image_field, // missing
image_field,
image_scales: image_scales && JSON.parse(image_scales),
review_state, // missing
highlighting: getHighlighting(highlighting, UID),
extras,
Expand Down
2 changes: 2 additions & 0 deletions src/reducers/solrsearch/solrsearch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ describe('SOLR search reducer', () => {
extras: {},
highlighting: ['<em>Blah</em>'],
image_field: undefined,
image_scales: undefined,
review_state: undefined,
},
],
Expand Down Expand Up @@ -196,6 +197,7 @@ describe('SOLR search reducer', () => {
extras: {},
highlighting: ['<em>Blah</em>'],
image_field: undefined,
image_scales: undefined,
review_state: undefined,
},
],
Expand Down