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
with
<?php get_template_part( 'content', 'single' ); ?>
This pulls from content-single.php
which has the code for my posts
Html
<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >
<div>
<h2><?php the_title(); ?></h2>
<h3><?php the_category(', '); ?></h3>
<?php the_content(); ?>
</div>
<?php
$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
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)
<?php
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() {
jQuery(img).addClass('img-responsive');
});
</script>
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; }
source to share