laubacht
asked on
Maximum Image Size On Front Page
http://www.tornadoeskick.com
I am wondering if a code exists to resize images on the front page so that they fit within the column widths. I do not use the media uploader in WP. Instead, I upload my images to image folders within my site and link using the standard IMG command.
The front page displays the entry in a two column layout that is smaller than my standard image size (700px). However, single article pages do not have the sidebar and thus expand the content area to accommodate the images.
Is there a code I can add to the front page file that will resize any images bigger than 500px to a set size (i.e. 500px)?
Thanks all!
I am wondering if a code exists to resize images on the front page so that they fit within the column widths. I do not use the media uploader in WP. Instead, I upload my images to image folders within my site and link using the standard IMG command.
The front page displays the entry in a two column layout that is smaller than my standard image size (700px). However, single article pages do not have the sidebar and thus expand the content area to accommodate the images.
Is there a code I can add to the front page file that will resize any images bigger than 500px to a set size (i.e. 500px)?
Thanks all!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks guys, I am going to give both options a look and test them out..
Jeremy, basically what I am going for is a resize on the front page to fit the column width. Since I run my images through a program that resizes, renames, and watermarks all my images, I upload them via standard FTP to a directory in my site to which I store them and call them via IMG SRC commands to post into pages. With that said, I do not use the media tools supplied by Wordpress. The issue is my standard resize is 700px wide; my front page column for an article is only 500 pixels wide.
If you go to my website (http://www.tornadoeskick.com), you'll notice that the images in the first entry spill out on the right cause they are too big. However, if you open up the single article page which has no sidebar (and thus is only one column), it'll fit fine.
What I want to do is make it so any articles displayed on the front page automatically resize my image to a specified size (or percentage) so it'll fit on the front page. But if a user opens the single article, it will display as normal.
Its hard to make sense of this, but that's something I hope makes sense.
Below is a code sample I found today...
So something like that perhaps?
To better give a visual, go to my front page at http://www.tornadoeskick.com/ and scroll down to the first article titled "First Snow Of 10/11 Season". Notice how the image of the three cars with the snow falling is too big for the column (its 700px by default) and thus spills out on the right side. If you display the article on its own (via http://www.tornadoeskick.com/2010/11/4236), it fits fine given the lack of the sidebar.
What I want to do is make it so images being displayed on the front page automatically get displayed with a smaller width so they fit, but then display like normal when on its own.
Does that help a bit?
Thanks again guys!
Jeremy, basically what I am going for is a resize on the front page to fit the column width. Since I run my images through a program that resizes, renames, and watermarks all my images, I upload them via standard FTP to a directory in my site to which I store them and call them via IMG SRC commands to post into pages. With that said, I do not use the media tools supplied by Wordpress. The issue is my standard resize is 700px wide; my front page column for an article is only 500 pixels wide.
If you go to my website (http://www.tornadoeskick.com), you'll notice that the images in the first entry spill out on the right cause they are too big. However, if you open up the single article page which has no sidebar (and thus is only one column), it'll fit fine.
What I want to do is make it so any articles displayed on the front page automatically resize my image to a specified size (or percentage) so it'll fit on the front page. But if a user opens the single article, it will display as normal.
Its hard to make sense of this, but that's something I hope makes sense.
Below is a code sample I found today...
So something like that perhaps?
To better give a visual, go to my front page at http://www.tornadoeskick.com/ and scroll down to the first article titled "First Snow Of 10/11 Season". Notice how the image of the three cars with the snow falling is too big for the column (its 700px by default) and thus spills out on the right side. If you display the article on its own (via http://www.tornadoeskick.com/2010/11/4236), it fits fine given the lack of the sidebar.
What I want to do is make it so images being displayed on the front page automatically get displayed with a smaller width so they fit, but then display like normal when on its own.
Does that help a bit?
Thanks again guys!
.rt-article-content img {
max-width:100%;
height:100%;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
or if you want to use instead ...
just add height="500" or style="height:500px;" to the image tag of the loop...but DO NOT add a width attribute
just add height="500" or style="height:500px;" to the image tag of the loop...but DO NOT add a width attribute
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
So the trick was to modify my template.css file to include the lines of code below.. this adjusted the images displayed onthe front to a max size of 600px, maintain the aspect ratio of the original image, but display the image normally on the single post pages.
.rt-article-content img {
max-width:600px;
height:100%;
}
LINK: http://soulsizzle.com/word