In my page I show posts from feeds. A post-preview has an image and the content. The width of the image is fixed at 150px but I want the image to have height equal to content's height. A post-preview content may have less than 450 chars, that means that the height of it will be smaller that other posts.
Is this possible using jQuery?
This is my code:
<div id="post">
<div id="image">
<?php
$imgpath="timthumb.php?src=THE-IMAGE.PNG&h=91&w=150"; } ?>
<img border="0" src="<?php echo $imgpath; ?>"></img>
</div>
<div id="thepost2">
<?php echo mb_substr(strip_tags($entry->description), 0, 450, "UTF-8"); ?>
</div>
</div>
HTML
<div id="uniqueid" class="autoheight">
<img />
</div>
$('.autoheight img').css({height: $('#thepost2').height(), width:'150 px'});
If you will not specify the width it will set the width equal to height as well. So you will be specifying width appropriately as your needs. It may change the aspect ratio of the image and it might not look good.
Related
I'm pulling a list of news articles from the database and I'm putting them in a bootstrap card. My problem is when the news title is longer obviously the paragraph will be in a different position, look at the picture to better understand the problem
I have tried to set different margins and padding styles but I know it needs to be dynamic depending on the title size but what's the best possible way to do that? Here is my code.
<div class="item card ">
<img src="public/img/news/<?= $singleNews['news_image']; ?>" class="card-img-top" alt="blog">
<div class="card-body">
<a href="passion.html">
<h5 class="card-title ">
<?= $singleNews['news_title']; ?>
</h5>
</a>
<div class="card-paragraph ">
<p>
<?php
// $shortDetail = strlen($singleNews['news_short_detail']) > 70 ? substr($singleNews['news_short_detail'],0,70):$singleNews['news_short_detail'];
echo $singleNews['news_short_detail']; ?>
</p>
</div>
read more
</div>
</div>
There are two options
OPTION1: set min-height of title tag and align it to center via line-height or flex.
OPTION2: set specific height and then font-size to vw unit so that it adjust it self with overflow:hidden
I have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.
I am trying to set my featured image as a background image in CSS.
I need to show the same featured image in two places in the HTML and CSS.
How do you use the_post_thumbnail() in CSS?
HTML
<div class="magnify">
<div class="large"></div>
<img class="small" <?php the_post_thumbnail( 'large', array
('class' =>'img- responsive') ); ?> />
</div>
CSS
.large {background: url('img/image.jpg') no-repeat;}
As Tim Malone stated in the comments, you will need to do this with inline styles. You can do something like this:
<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
list($url, $width, $height, $is_intermediate) = $thumbnail;
?>
<div class="large" style="height:<?php echo $height; ?>px;background-image:url(<?php echo $url; ?>);background-repeat:no-repeat;"></div>
Note that I am using wp_get_attachment_image_src so that I can get the image dimensions in case I need them. In this case, it is to set the height of the div to the height of the image.
<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%" align="center" data-arrows="true" data-click="false" data-swipe="false" data-autoplay="2000" data-nav="thumbs">
<?php
$query="select * from released_movies" ;
$queryr=$con->query($query);
while($row=$queryr->fetch_assoc()) { ?>
<div>
<a href="single.php?id=<?php echo $row['rel_id'];?>">
<img u="image" src="../AbaamAdmin/Released_Movies/<?php echo $row['rel_movies_pics'];?>" />
</a>
</div>
<?php }?>
</div>
I need to create a fotorama gallery slideshow with thumbnails of the larger image. But by giving the above code, no image appears as thumbnail instead I got only a thumbnail border. How I will get the thumbnail image there dynamically. Thanks in advance.
This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i