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

Image Resizer

Discussion in 'Styling and Customization Questions' started by Smooth, May 28, 2011.

  1. Smooth

    Smooth Active Member

    Hey all,

    Have been searching to no avail to try and find a Xen image resizer that will automatically resize any attached on linked images to a set size?

    It is a photography forum we are setting up so it is a fairly crucial element.

    Many thanks in advance for your replies.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Just so you are aware, all images over a certain size will be resized down to the maximum size set in the ACP.

    Smaller images won't be increased in size though.
     
  3. Smooth

    Smooth Active Member

    does that include linked images Brogan?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Linked images will automatically fit the post body width, but this can be changed to a percentage or fixed size by adding this to EXTRA.css
    Code:
    .bbCodeImage {
    max-width: 100%;
    }
    Change the max-width attribute to suit.
     
  5. Smooth

    Smooth Active Member

  6. Mike

    Mike XenForo Developer Staff Member

    There was a "." missed out, and I'd add important just to be sure:

    Code:
    .bbCodeImage {
    max-width: 20% !important;
    }
    Change the percent or size to fit.
     
    Brogan likes this.
  7. Brogan

    Brogan XenForo Moderator Staff Member

    It seems to be working for me, changing the value in Firebug.

    If the images are smaller than the max-width, then they won't be affected.

    Edit: Do'h! Just seen Mike's post - bad code from me.
     
  8. Smooth

    Smooth Active Member

    Thanks to the pair of you :)

    Is it ok to define using px size? ie 700... or will that cause issues?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    That's fine :)
     
  10. Smooth

    Smooth Active Member

    Still absolutely in love with Xen... everything... just works! No 3 hours of coding just to make one change, and you guys have clearly built with cleanliness and layout in mind.

    Thanks again!
     
  11. Commander

    Commander Member

    I do this, but now img is not clickable, how to make it clickable when clik on img to open in full size?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

  13. Commander

    Commander Member

    Wow tnx for fast answer :)

    One more question, is there chance maybe to open that linked img like uploaded img in default fancy lightbox gallery!?
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    The lightbox is only triggered by a thumbnail.
     
  15. Commander

    Commander Member

    OK, tnx for support.

    Regards
     
  16. Zynektic

    Zynektic Well-Known Member

    Sorry for bumping but is there a way to adjust this for the threads and the signatures as different sizes? Our conversations window on smaller screens has the signatures going over the sidebar whereas threads it is fine.

    If I use points 22 and 23 to limit signature sizes such as 23 being 500w x 250h on point 22 in your FAQ Brogan can I adjust that to fit the signature images right?
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    You should be able to by using the different classes for message text and signature content.
     
  18. Martok

    Martok Well-Known Member

    @Zynaphix if it helps, this is basically what I am using to display signature images at different sizes based on the screen width (ie so it works with tablets and mobiles):

    Code:
    <xen:comment>Limiting image sizes in signatures</xen:comment>
    <xen:if is="@enableResponsive">
        @media (min-width:700px) {
            .signature.messageText img {
            max-height: 125px !important;
            max-width: 550px !important;
            }
        }
        @media (min-width:481px) {
             .signature.messageText img {
            max-height: 125px;
            }
        }
    </xen:if>
    
    The first part ensures that signatures conform with the max sizes I have specified on my site. The second part it so that images will shrink at smaller screen widths.

    Below 481px is narrowResponsiveWidth (as defined in the Responsive section of the ACP) and signatures aren't displayed at all - this is for mobile phone sized screens.

    Adjust the sizes and the min-widths as appropriate for your forum.
     
  19. Zynektic

    Zynektic Well-Known Member

    Thanks for this but is it for EXTRA.css? I have added it and adjusted the values a few times and it does not seem to resize the widths, thanks.
     
  20. Martok

    Martok Well-Known Member

    Yes, for EXTRA.css.

    You may need to add an !important after the max-width in the 481px bit.
     
    Zynektic likes this.

Share This Page