Compact quotes

[RobinHood]

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]

Compact quotes can be a good idea.

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]

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

.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:

 

[Paul B]

No need to edit the template, just add this to EXTRA.css:

.bbCodeQuote {
max-height: 400px;
overflow: auto;
}

The max-height attribute will fix the small quote problem.

 

[Chris D]

No need to edit the template, just add this to EXTRA.css:

.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]

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?

 

[RobinHood]

Yeah, it would be cool to find a cleaner way to execute this such as on the HUKD site.

 

[Chris D]

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]

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]

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]

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!

 

[RobinHood]

I'll second that It's a great solution to reduce thread length until someone can figure out an expandable version.

 

[Chris D]

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]

Might take a bit longer as if possible I don't want to use a plugin at all, but I'll see how I get on.

 

[Chris D]

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?

 

[Andy.N]

Quick opinion: Do you guys prefer to use the Template Modification System add-on?

yes. more and more people use it.

 

[Digital Doctor]

Quick opinion: Do you guys prefer to use the Template Modification System add-on?

TMS please !

 

[Chris D]

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:



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



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

 

[Digital Doctor]

Make the quote optionally indent as well.
Indented quotes make the "Real Text" easier to read.
IMO.

 

[Chris D]

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?