How to display a small excerpt of the listing description in the search results list of listings?

[stephunique]

Hello
The listings results on the listings search page do not show their descriptions, only a title and certain attributes if the vendor had it filled out, and without the attribute’s title too. This means it is confusing to look at, as you only have a title and something random, like “yes”, and a seemingly random number, since the “yes” was an option the vendor picked while making the listing, and the number could be anything from a phone number to the salary. So for example the listings on the search result page for a job board might look like: “Staff wanted, yes, 3” which makes no sense to the person browsing the list of listings, but to the vendor, it was “title: Staff wanted” and “Experience needed: yes” and “number of staff needed: 3”.

I saw this thread: Can we show the label of description in listing details page and Make it first item to show on page - #2 by aqmiami7

I tried using the PHP code suggested here with the Code Snippets plugin and it didn’t work for me. I am using the Listings Hive theme.

[Fabricator]

Hi! You need to add these tokens, in the attribute format field:

%label%: %value% 

And dont’t forget to select “block secondary” to display. The ‘label’, is the attribute’s title, the ‘value’, is the value what your vendors typing into the attribute field. If you want to show the listing description, what is a default integrated attribute, you can’t do that, but maybe still… To achieve the desired result, you need some CSS snippet, and a little “trick”.If you are intrested, I using this solution on one of my test website.

The listing block looks like this:

Listing block on “hover” state:

[stephunique]

Hi Fabricator,

Thanks for your reply!
I am not a developer so I may be doing something wrong, maybe it is because I have not tried your css trick for the description, but here is what I tried, and it didn’t work for me:

I am making a job board, so one of the attributes is Salary. You said that the “label” is the attribute’s title. Well, for “salary”, I put “salary”, ie “%salary%: %value%”.

For the value, you said it is the value that the vendors type into the attribute field. Does this mean literally what they type into the field, because this can be very long or different each time. For example, if the attribute was “location”, the value could be anything from “City, State, Country” to and entire address “1 Test St, Example Town, City, State, Country, Post Code”. Do I have to use exactly this in the value field?

In any case, it made no difference in the front end. Perhaps I need the CSS?
Thanks

[stephunique]

Hello Fabricator,

Thank you for trying to help, but I realise now that there has been some misunderstandings about what I want.

Currently, in my listings directory, or when you search for a listing, the only thing that shows is each listings’ title. I want say, the first 140 characters of the listing description to show as well so users can decide if that listing is relevant to them.

The link I mentioned in my first post on this thread was titled “Can we show the label of description in listing details page” and I interpreted that as showing the description in the search results page of all listings, ie, something like this:

In the screenshot above, I wanted the description for each listing to show in this search results/directory of all listings page where the red boxes are (I added the red boxes manually as a screenshot).

What the code mentioned in the link I posted in my first post on this page actually does is puts a heading on the page of each individual listing, like this: What is, or how can i get rid of "Put your custom title here" in listings?

So basically, I have not yet been able to achieve what I want.

Hoping someone could help me with this.

[Fabricator]

Hi! When I said “if you are intrested” I don’t gave you any css for display some line of the listing description, on the listing view block, I’m just waiting for “yes, I want to know how”
Here is the solution, if you still want to do it.

1. Create a new listing attribute, with any name.
2. Field name: listing_about (it can be anything, but use this).
3. Set this attribute properties: text field, min lenght, max lenght, etc.
4. Display it on the “block secondary” and “page secondary”, select categories, and save.
5. Hide the original listing description attribute, what is integrated in HivePress, or your users will get two listing description field:

/* Hide the description field in the listing edit form #hivepress #listings
-------------------------------------------------------------------------*/
add_filter(
	'hivepress/v1/forms/listing_update',
	function( $form ) {
		unset( $form['fields']['description'] );
		
		return $form;
	},
	1000
);

add_filter(
	'hivepress/v1/models/listing',
	function( $model ) {
		$model['fields']['description']['required'] = false;

		return $model;
	},
	1000
);

Don’t use snippet insertion plugin, just open your functions.php in your theme/child theme folder, and paste in.
6. Insert this CSS below, into the Additional CSS field, from the front-end customiser.

.hp-listing--view-block .hp-listing__attribute--listing-about { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden;}
.hp-listing__content {word-wrap: break-word;}
.hp-col-lg-6 {-ms-flex-preferred-size: 50%;flex-basis: 100%;max-width: 100%;word-wrap: break-word;}

This css will do the following: display 4 line of text (search for the number “4” in this css, and change to what you want) from your listing description field, second, it will change the two column attribute display on the listing view block to a one column.
The final result will look like this image below

When you ready, go to your test listing, and write a long description into the newly created listing description field, save, and test.
If you need I have a lot of customisation for that, for ex.: show the image only 50%, and display 100% on hover, remove listing block footer, remove listing category from the listing view block, and so on…

P.S. this is bad: “%salary%: %value%” use this: %label%: %value% don’t change, just copy/paste.

[stephunique]

Hello Fabricator,

Thank you so much for this reply!

@Fabricator

Hi! When I said “if you are intrested” I don’t gave you any css

No problem, of course I know that you were waiting to see if I was interested in more details before you post them.

I tested the suggested code using your method and can confirm it works.

I do feel that it is a little redundant to hide the default description field and create a new one using the “create an atribute” method, so I would like to ask, is it possible to simply display the first 4 lines of the original description field instead?

The code in the links I mentioned originally do not do that, they are for something different.

If not, this solution works really well! Thank you so much!

Also, if you have the CSS for other customisations, maybe you can post them here hivepress’s gists · GitHub so other people can benefit too? (I know it is for PHP code only… just a suggestion).

I don’t need any more customisations for now, thank you so much for your help.

[Fabricator]

Hi! I just recommend to use this new listing description attribute, because with this option, you don’t need to create/use a php snippet. The original “listing description” display only on the listing view page secondary block, so if you want to insert it’s text into the listing view block secondary, you only can do it, with a php code. So this is the “easy way”. Of course, if you have a working live website with a lot of listings, I don’t recommend to use my solution, because the listing what already using the default description attribute, they lose it, and need to re-edit their listings.

[stephunique]

Thank you Fabricator so much! I understand now. This is the perfect solution for me. Luckily I am still testing things before I go live, so there are no real listings yet.

Thank you so much again, and on a weekend too! I hope you have a nice rest of the day!

[stephunique]

@Fabricator

Here is the solution, if you still want to do it.

Hello again,

Today I was doing some testing and I made a test listing with this solution and ran into a problem. After I hid the original description field, the listing won’t let you publish it until you filled out the “description” field because it is “required”. And since it was hidden, there was no way to fill it out, so now there is no way to proceed.

Could I get some assistance with this?

[Fabricator]

Hi!

/* Hide the description field in the listing edit form #hivepress #listings
-------------------------------------------------------------------------*/
add_filter(
	'hivepress/v1/forms/listing_update',
	function( $form ) {
		unset( $form['fields']['description'] );
		
		return $form;
	},
	1000
);

add_filter(
	'hivepress/v1/models/listing',
	function( $model ) {
		$model['fields']['description']['required'] = false;

		return $model;
	},
	1000
);

as you see: [‘required’] = false; it need to be work. I use this on my 3 websites too, without problem. If you still use snippet inserter, please turn off and place manually this code into your child theme/functions.php

[stephunique]

Hello Fabricator,

I added it to the ListingHive theme functions.php, not the code snippets. And it is already on “= false”. The only thing I did differently was I deleted my test site and started over with a clean installation. Do you have another idea why it might not work? I will also do more testing to see if I can solve it.

[stephunique]

Back again to give an update.

I discovered the issue. The code is perfectly fine. It was my fault - I had installed a second theme to use on certain parts of the site, the rest runs on ListingHive. I put the CSS code in the wrong theme’s CSS area, I should have put it in the Listing Hive CSS.

Thank you Fabricator! Issue resolved.