• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Compact quotes

RobinHood

Well-known member
#1
Does anyone know if there's an add on or a way to implement something similar to what they do on Hot UK Deals where the quotes boxes are limited in size unless you choose to expand it?

You can see a few examples in this thread.

Also, does anyone know what software they use to power the site?
 

Digital Doctor

Well-known member
#2
Compact quotes can be a good idea.

Code:
HTML Images - The <img> Tag and the Src Attribute
 
In HTML, images are defined with the <img> tag.
 
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
 
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
 
Syntax for defining an image:
 
<img src="url" alt="some_text"/>
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
 
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
 
HTML Images - The Alt Attribute
 
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
 
The value of the alt attribute is an author-defined text:
 
<img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
 
HTML Images - Set Height and Width of an Image
 
The height and width attributes are used to specify the height and width of an image.
 
The attribute values are specified in pixels by default:
 
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
 
Basic Notes - Useful Tips
 
Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.
 
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
 
 
More Examples
 
Aligning images
How to align an image within the text.
 
Let the image float
How to let an image float to the left or right of a paragraph.
 
Make a hyperlink of an image
How to use an image as a link.
 
Create an image map
How to create an image map, with clickable regions. Each of the regions is a hyperlink.
 
HTML Image Tags
 
Tag    Description
<img />    Defines an image
<map>    Defines an image-map
<area />    Defines a clickable area inside an image-map
Another method of compact quoting might be to use what the [ CODE ] BBCode uses, but just make it smaller.

I proposed earlier today a limit on quote length, and if it exceeds it ..... then use a compacting quote method.
 

Chris D

XenForo developer
Staff member
#3
Compact quotes can be a good idea.

...

Another method of compact quoting might be to use what the [ CODE ] BBCode uses, but just make it smaller.

I proposed earlier today a limit on quote length, and if it exceeds it ..... then use a compacting quote method.
I think this is a really elegant way of doing it, actually.

Quite simple too.

All you'd do is add the following to EXTRA.css

Code:
.bbCodeQuote
{
max-height: 400px;
overflow: auto;
}
Works nicely :)

It must be "max-height" instead of just "height" of course, because you don't want all of your quotes to be 400px.

Here's what it would look like in practise:

quote.pmg.PNG
 

Brogan

XenForo moderator
Staff member
#4
No need to edit the template, just add this to EXTRA.css:
Code:
.bbCodeQuote {
max-height: 400px;
overflow: auto;
}
The max-height attribute will fix the small quote problem.
 

Chris D

XenForo developer
Staff member
#5
No need to edit the template, just add this to EXTRA.css:
Code:
.bbCodeQuote {
max-height: 400px;
overflow: auto;
}
The max-height attribute will fix the small quote problem.
Thanks Brogan, you're absolutely right. I have updated my post. I realised the small quote problem as soon as I posted it. You're too quick man :)
 

Andy.N

Well-known member
#6
Does anyone know if there's an add on or a way to implement something similar to what they do on Hot UK Deals where the quotes boxes are limited in size unless you choose to expand it?

You can see a few examples in this thread.

Also, does anyone know what software they use to power the site?
Actually, this is a very good way to collapse the quote. It is a lot cleaner in that example thread.

Is it possible to implement in XF?
 

Chris D

XenForo developer
Staff member
#8
I had a go at doing this with various available jquery plugins etc.

I got it to work but most quotes seemed to have three "show more" buttons and only one worked. My inexperience with jQuery and all other things javascript prevented me from getting it to work as I wanted it.

I'm not saying it can't be done, but unfortunately I'm not the guy! :)

I might have another go... will give me a good chance to learn some javascript.
 

Andy.N

Well-known member
#9
Keep at it yorick and let us know once you get it working.
It will be a heck of an improvement since I have people who quote huge part of the post.
 

Chris D

XenForo developer
Staff member
#10
Keep at it yorick and let us know once you get it working.
It will be a heck of an improvement since I have people who quote huge part of the post.
I will keep at it.

In the interim, is the scrolling quote I provided instructions for any good? Very quick/easy to implement and nothing to install.
 

Ingenious

Well-known member
#11
Yorick this is a brilliantly simple solution, I have just tried it in my forum and it makes the longer quotes look much neater - thanks!
 

Chris D

XenForo developer
Staff member
#13
Ok. Good news.

I've actually cracked this. Will involve a jQuery plugin and some manual template edits, but it works.

Just doing something which I hope will make it look better :)
 

Chris D

XenForo developer
Staff member
#15
Quick opinion: Do you guys prefer to use the Template Modification System add-on?

Just wondering if it's worth me implementing it that way, or whether you still prefer manual template edits?
 

Chris D

XenForo developer
Staff member
#18
Ok, this is going to take a little longer, as I've only just started looking at the TMS myself.

But my aim will be you will already have TMS installed, then you download and install my add on and the quote will look like this:

longquote-hidden.PNG

After clicking on the "View full quote" link it expands to:

longquote-shown.PNG

I'm not sure, yet, how far I'm going to go with this. There's lots of customisable options in the jQuery plugin I'm using so I may very well have an options page that allows you to customise all this in the GUI rather than you having to make additional code edits.

But I've never done anything like that before, I'm still pretty new to all this, so it'll either take me some time or I'll get bored and just give it to you how it is ;)
 

Chris D

XenForo developer
Staff member
#20
Just a quick query as well regarding licensing. The jQuery plugin that does all the clever stuff is licensed as follows: "licensed under the MIT and GPL licenses".

I assume that means we're good to use this, freely?