Question

I have been searching all day for a solution to this and have read many articles on image resizing and DOM node searching and WordPress functions and any other possible way for this to be done.

Heres the scenario…

I am creating a custom theme for WordPress for a client. This is a newspaper site and requires the functionality that it auto-resizes the pictures proportionally to fit within a certain box on the page. Normally I would just set width:SomeWidthin CSS but I don’t have any way to ID the img.

My index page is a framework and the wordpress engine loads the content. This means that until it is displayed to the user I don’t have any control of the attributes on the image. (Yes we could manually size every picture, but my client doesn’t want to have to do that, and she also wants it to be the original size on the single page.

Here is one of boxes:

<div class="box-center">
        <h1>Music 101</h1>
        <div class="box-inner-center">
            <ul>
                <?php
                    global $post;
                    $args = array('numberposts'=>1,'category'=>get_cat_ID('Music 101'));
                    $myposts=get_posts($args);
                    foreach($myposts as $post) : setup_postdata($post); ?>
                        <li><?php the_content(); ?></li>
                    <?php endforeach; ?>
            </ul>
            <a class="more" href="<?php echo esc_url(get_category_link(get_cat_ID('Music 101'))); ?>">More Music 101 >></a>
        </div>
    </div>

After the page loads this is what comes out:

<div class="box-center">
    <h1>Music 101</h1>
        <div class="box-inner-center">
            <ul>
                <li>
                    <p>
                        <a href="http://***?attachment_id=150" rel="attachment wp-att-150">
                            <img class="alignnone  wp-image-150" alt="Venice Symphony Orchestra" src="http://***/Venice-Symphony-Orchestra.jpg" width="960" height="640">
                        </a>
                    </p>
                    <p><span style="color: #000000;"><b><i>Some sample text.</i></b></span></p>
                    <p><span style="color: #000000;"><b>By Someone</b></span></p>
                    <p><span style="color: #000000;">Some quote and more content</span></p>
                    <p><span style="color: #000000;"><a href="http://***?p=141#more-141" class="more-link">(more…)</a></span></p>
                </li>
            </ul>
            <a class="more" href="http://***/?cat=20">More Music 101 &gt;&gt;</a>
        </div>
    </div>

I have tried using document.getElementById("box-center").childNodes and document.getElementByTagName("img") and then for loop through the results and set the properties there, but the above lines return no results somehow.

I would prefer not to use JQuery or any additional libraries if possible.

Thank you for your time.

Answer 1

I don’t see any reason why you can’t use css. I would suggest something like this:

.box-center .box-inner-center img {
    width:150px; /* or whatever */
    height:auto; /* overrides the set HTML height*/
}

This will override the width and height attributes on the image itself and you can even be more specific if necessary: .box-center .box-inner-center ul p > a img or whatever you want.