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

Compact quotes

Discussion in 'Resource and Add-on Requests' started by RobinHood, Apr 22, 2012.

  1. RobinHood

    RobinHood Well-Known Member

    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?
     
    Bellinis and Ingenious like this.
  2. Digital Doctor

    Digital Doctor Well-Known Member

    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.
     
    RobinHood likes this.
  3. Chris D

    Chris D XenForo Developer Staff Member

    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
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
    Yorick likes this.
  5. Chris D

    Chris D XenForo Developer Staff Member

    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 :)
     
  6. Andy.N

    Andy.N Well-Known Member

    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?
     
  7. RobinHood

    RobinHood Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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.
     
    RobinHood and Andy.N like this.
  9. Andy.N

    Andy.N Well-Known Member

    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.
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  11. Ingenious

    Ingenious Well-Known Member

    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!
     
  12. RobinHood

    RobinHood Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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 :)
     
    RobinHood likes this.
  14. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    RobinHood likes this.
  15. Chris D

    Chris D XenForo Developer Staff Member

    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?
     
  16. Andy.N

    Andy.N Well-Known Member

    yes. more and more people use it.
     
    RobinHood likes this.
  17. Digital Doctor

    Digital Doctor Well-Known Member

    TMS please !
     
  18. Chris D

    Chris D XenForo Developer Staff Member

    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 ;)
     
    RobinHood likes this.
  19. Digital Doctor

    Digital Doctor Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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?
     

Share This Page