This adds 100 characters long description from each listing into each listing box at /listings/
Ensures that long text lines without spaces does not overflow the listing box.
Feedback/improvement is welcome. This is done thanks to HivePress AI Assistant (it took around 10 attempts and it have been unable to deliver CSS into the PHP snippet itself), but anyway it works:
PHP snippet (for example plugin Code snippets):
// This script needs also CSS which is defined at /wp-admin/customize.php , Additional CSS.
add_filter(
'hivepress/v1/templates/listing_view_block/blocks',
function( $blocks, $template ) {
$listing = $template->get_context('listing');
if ( $listing && $listing->get_description() ) {
$description = $listing->get_description();
// Truncate to 100 characters
if ( strlen( $description ) > 100 ) {
$description = substr( $description, 0, 100 ) . '...';
}
$blocks = hivepress()->helper->merge_trees(
[ 'blocks' => $blocks ],
[
'blocks' => [
'listing_content' => [
'blocks' => [
'custom_listing_description' => [
'type' => 'content',
'content' => '<p class="hp-listing__description-preview">' . esc_html( $description ) . '</p>',
'_order' => 999,
],
],
],
],
]
)['blocks'];
}
return $blocks;
},
1000,
2
);
CSS code for that:
/* A CSS for a PHP snippet which adds a listing description to a /listings/ page. This CSS moves description to bottom and fix overflow: */
.hp-listing__content > p {
order: 999;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
max-width: 100%;
padding: 0 15px;
margin: 10px 0 0 0 !important;
}
.hp-listing__content {
display: flex;
flex-direction: column;
}
.hp-listing__categories {
order: 1;
}
.hp-listing__title {
order: 2;
}
.hp-listing__details {
order: 3;
}
