Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Maximum Image Size On Front Page

Posted on 2010-11-10
7
Medium Priority
?
482 Views
Last Modified: 2012-05-10
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!
0
Comment
Question by:laubacht
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34107974
I am not positive I completely understand all of your requirements. I will start off by providing a link to an article which I believe addresses what you are asking for. Let me know if I am wrong, and I will look again.

LINK: http://soulsizzle.com/wordpress/adding-additional-image-sizes-to-wordpress-themes/
0
 
LVL 15

Accepted Solution

by:
AndyBeard earned 1336 total points
ID: 34108903
The easy way is to just use CSS and rely on a browser to do a sufficient job of rendering the image.

The programming solution would be to use something like http://code.google.com/p/timthumb/

You could then write some javascript/jquery that would modify each image URL and pass it to timthumb

Alternatively if you uploaded smaller versions each time, you could just use some javascript to modify image src.
0
 
LVL 1

Author Comment

by:laubacht
ID: 34109376
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!
.rt-article-content img {
       max-width:100%;
       height:100%;
}

Open in new window

0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 8

Assisted Solution

by:Sam Cohen
Sam Cohen earned 664 total points
ID: 34109501
If the wordpress theme is already coded to show the image..look for that code and just add width="500" or style="width:500px;" to the image tag of the loop...do not add a height attribute
0
 
LVL 8

Expert Comment

by:Sam Cohen
ID: 34109507
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
0
 
LVL 15

Assisted Solution

by:AndyBeard
AndyBeard earned 1336 total points
ID: 34109627
The css route is really easy... though much easier if just one of those nested DIVs, or just a unique class was applied to all your historical photos.

then you could just add this to your CSS

.home .imghome {max-width:500px;}

You could use that aligncenter if it isn't used for anything else anywhere.

That being said it will squish things.

Probably the best solution possible is to create a shortcode

We can grab a shortcode from this post
http://www.jauhari.net/resize-images-using-shortcode-with-timthumb.jsp

// Image resize in content
function timmyimg($atts, $content = null) {
      extract(shortcode_atts(array(
            'w' => '540',
            'h' => '250',
            'class' => 'alignnone',
            'alt' => ''
      ), $atts));
      return "<img src='". get_bloginfo('template_directory') . "/timthumb.php?src=".$content."&w=".$w."&h=".$h."' alt=".$alt." class='wp-post-img ".$class."' />";
}
add_shortcode('img', 'timmyimg');


Then modify it with a is_singular conditional to return an unmodified width.

thus something like

if is_singular {

return "<img src='" . $content . "' alt=".$alt." class='wp-post-img ".$class."' />";

} else

return "<img src='". get_bloginfo('template_directory') . "/timthumb.php?src=".$content."&w=".$w."&h=".$h."' alt=".$alt." class='wp-post-img ".$class."' />";
}


I am sure there are some bugs in that but you will get the idea. (I just tinker with code)
0
 
LVL 1

Author Comment

by:laubacht
ID: 34199659
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%;
}

Open in new window

0

Featured Post

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nowadays, it is so easy to get started with a website and all thanks to the Content Management Systems (CMS) like WordPress, Drupal, Joomla, and many others like them. However, if we talk about the reliability and ratings, WordPress definitely rules…
SEO can be a real minefield to navigate, but there are three simple ways to up your SEO game just be re-assessing your content output.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question