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

XF 1.4 CSS: Resize image, after click max width message messageContent?

Discussion in 'Styling and Customization Questions' started by Axel B, Mar 8, 2015.

  1. Axel B

    Axel B Well-Known Member

    Hi there,

    I found the CSS tweak to resize pictures:
    HTML:
    .message .messageContent .messageText img {
    max-width: 70%;
    }
    This works really nice, but after a click the large pictures resize beyond the maximum width of the messageContent (I hope I picked the right class).

    Is it possible to cap the maximum width after clicking so it stays in line with the maximum width of the messageContent?

    I know a bit of CSS, but this is beyond me :)

    Thanks for your time!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    I believe using !important will do that.

    Check the FAQ, it's mentioned there.
     
  3. Axel B

    Axel B Well-Known Member

    @Brogan, thanks for your quick reply. Already tried the !important. That will disable an image being clickable to full size.

    What I'm looking for is capping the full size to the width of the messageContent so it stays in line with the forum layout. Not sure if that's possible, hence my question ;)
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You would have to set the max width to 100%.
     
  5. Axel B

    Axel B Well-Known Member

    @Brogan, thanks again for your fast reply. Not sure if I asked my question clear enough.

    On my forum a lot of pictures are uploaded. If I set the max width to 100% it takes a lot of space, hence the CSS tweak (less scrolling, looks better IMHO).
    Sometimes people want to see the bigger image (if available), which can be done by clicking on it.

    If possible I want to have the bigger image take the maximum width of the messageContent.

    I cannot give a link because only a thumb is shown to visitors. I only found out just now... more to look into :(
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    It's not possible, hence why I said you would have to set it to 100% (using !important).

    Otherwise just set the image width and height limits in the ACP so the max width matches the message content width.
     
  7. Axel B

    Axel B Well-Known Member

    @Brogan, thanks for your reply :) Clear. Will have to live with it ;)
     
  8. aana

    aana Member

    Hi,

    can you explain me something please ?

    if i use this code :

    HTML:
    .message .messageContent .messageText img {
    max-width: 70%;
    }
    all images can be uploaded in différent size ( 800x600 or 1600x1600 or wathever ) but they will be resized, they can't be bigger than 70% of the messageContent.
    Can members click on the image to show the full size version ?

    thx
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Resizing is determined by the settings in the options.
    That CSS will just restrict the images displayed in posts to 70% of the available width.
    Clicking on them will show them full size.
     
  10. aana

    aana Member

    ok thx,

    Its 70 % of the messageContent width ?
    In option / attachment / maximal attachment size i can set : 1600 x 1600, then i can use this CSS to restrict the image to be displayed at 70 % of the messageContent width ? But what happens to a small image ?

    it will be faster to load the page ?
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Yes, 70% of the post area.

    Images smaller than that will just display at their full size.

    It won't make any different to page loading times as the image is the same - it is just being restricted via CSS in how it displays.
     
  12. aana

    aana Member

    Thx,

    what can i do to reduce the page loading ?
     

Share This Page