SimplePortal

Support => English Support => Topic started by: berkcet on July 09, 2015, 12:29:39 PM

Title: Auto resizing of images in articles, using CSS
Post by: berkcet on July 09, 2015, 12:29:39 PM

    Hi there,


    I was able to get all images posted/attached on my boards re-sized following steps shown on this post from smf mod site: http://www.simplemachines.org/community/index.php?topic=505050.0 (http://www.simplemachines.org/community/index.php?topic=505050.0)

Code: [Select]

/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>blockquote>img,
.inner>.bbc_link>img, .inner>blockquote>.bbc_link>img{
   height: auto;
   width: auto;
/* This is just to keep images to a handy size, even on large screens. */
   max-height: 640px;
/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;
}

    On that same post, the user shares a code for re-sizing shoutbox images on Simple Portal:

Code: [Select]

.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}



    I didn't apply the shoutbox options since I'm not using one at the moment but I was wondering how can I get images on the article block re-sized in a similar manner? Should I edit portal.css or index.css? Where and what would should I add?




ps: I'm running SMF 2.0.10 with SimplePortal 2.3.6

Title: Re: Auto resizing of images in articles, using CSS
Post by: berkcet on July 09, 2015, 08:49:56 PM

I solved the problem myself.


Find in ...themes/yourtheme/css/index.css

Code: [Select]

.bbc_img
{
border: 0;
}

Change it to

Code: [Select]

.bbc_img
{
border: 0;
height: auto;
   width: auto;
   max-height: 640px;
   max-width: 95%;
}


Feel free to delete the post or keep it in case someone else has the same question

Title: Re: Auto resizing of images in articles, using CSS
Post by: [SiNaN] on August 01, 2015, 09:00:55 AM

Glad to hear that you were able to solve your issue and thank you for sharing your solution as it may be useful to some other in the future. :)