Orientation of image content for flexible calibration

I am using "Aqua Resizer" (aq_resizer.php) to resize my thumbnails on my Wordpress site. My messages are made from a loop in single.php


<?php get_template_part( 'content', 'single' ); ?>


This pulls from content-single.php

which has the code for my posts


<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >

        <h2><?php the_title(); ?></h2>
        <h3><?php the_category(', '); ?></h3>
        <?php the_content(); ?>

        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image

    <?php if($image) : ?>
    <img class="img-responsive" src="<?php echo $image ?>"/>
    <?php endif; ?> 

</div><!-- /#post -->


Everything works fine (the resizer function works with the features it includes <?php the_content(); ?>

. The image is scaled up / down as the window is resized

The effect works because it class="img-responsive"

is applied to the displayed message image.

I have images in post content. I want them to act the same (now they are just brought in with their original size) I need a class img-responsive

to apply to images in<?php the_content(); ?>


source to share

1 answer

Applying CSS classes to images can be done from within the post itself, just edit the image and place the CSS class img-responsive


If you are unable to edit / modify the posts (or this is too much work) then the second option is to write a small piece of code in your custom file function.php

(this is only true when displaying the post in your loop)

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));


See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for details .

And the third option is to use jQuery in your file header.php

, this way all the images on the page will get a responsive class (however, this may not be what you want, especially if you have backgrounds, logos, menu images, etc.) and JavaScript will need to be enabled in the client browser):

<script type="text/javascript">
jQuery(function() {


The last option I can think of is to use pure CSS:

.content img { height: auto; max-width: 100%; }


Where .content

is the area your message is contained in.

Note. You can also override the class the .wp-caption

same way.

.wp-caption { width: auto !important; }




All Articles