I am trying to integrate Cloudinary into my webpage. The problem is that when I use the code below:
<div class="col-md-4 col-xs-6 text-center product-image">
<?php
echo cl_image_tag($product['product_url'],
array("width"=>400, "height"=>300, "crop"=>"fill"));
?>
</div>
The image is not responsive due to the fixed proportions: "width"=>400, "height"=>300.
Is there a way of adjusting these parameters dynamically to the width and height that Bootstrap defines for the div?
I have tried this:
<img class="img-fluid img-thumbnail" style="max-width: 400px; max-height: 300px;" src="<?php echo $product['product_url']; ?>">
But then the size of each image is different, because each one has different dimensions and aspect ratios.
Why cant you use class .img-fluid with max-width: 100%; and height: auto;`
This link may help
While using .img-thumbnail you should not use width and height
Here is the link
You could try add this to css:
.product-image img {
width: 100%;
}
Related
<div class="site-blocks-cover overlay bg-light" style=" background-image: url('public/template/images/hero_bg_1.jpg')" id="home-section">
The photo doesn't appear on top of website.Also i didn't receive any error
the website
Try using url function of Laravel
background-image:url({{url('template/images/hero_bg_1.jpg')}})
You Must add {{url(' ')}} this to echo Your image
so your code must be
<div class="site-blocks-cover overlay bg-light" style=" background-image: url('{{url('public/template/images/hero_bg_1.jpg')}}')" id="home-section">
and another one you can use it asset()
like this
<div class="site-blocks-cover overlay bg-light" style=" background-image: url('{{asset('public/template/images/hero_bg_1.jpg')}}')" id="home-section">
I have an portfolio webpage, my problem is how can I adjust the image position when the image is bigger and smaller, for example I have a image that is vertically long and I have a image that is only small. how do I make the long image to be position as top while keeping the small image as centered.
I used a acf image uploader
Source Code:
<?php if( get_field('image_thumbnail') ): ?>
<div class="image__thumbnails" style="background-image: url(<?php the_field('image_thumbnail'); ?>);background-position: top;background-size: 100%;background-repeat: no-repeat;"></div>
<!-- <img src="<?php the_field('image_thumbnail'); ?>" />-->
<?php endif; ?>
css
.image__thumbnails {
height: 212px;
}
you can try css property:
.image__thumbnails{
height:200px;
width:200px;
object-fit:cover;
}
also :
object-fit: contain,cover,fill, etc...;
.wrapper
{
display:flex;
/* align-items:center; this doesn't works in ie11 */
}
.wrapper > *
{
align-self:center; /* this works in ie11 */
}
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I have been using the following code to display the images in Bootstrap carousel:
<a href="<?php echo get_page_link( $page->ID ); ?>">
<?php $image = wp_get_attachment_image( get_post_thumbnail_id($page->ID), 'child-page','', array('class' => "img-responsive img-shadow", 'alt' => get_the_title())) ?>
<?php echo $image; ?>
</a>
I have added add_image_size( 'child-page', 400, 200, true ); in functions.php but it is displaying the images of variable height.
How do I control size without having to optimize the images?
i added the following css
.gallery-slider .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
max-width: 100%;
height: 170px !important;
}
to solve the problem
Why not put in your style.css
.carousel-inner img{
width: 400px;
height: 200px;
}
Of course you can force your images to fit a specific width and height as proposed by #rockStar using CSS, however, that will result in ugly disproportionate images. There are plugins which allow you - effortlessly - to regenerate WordPress thumbnails in the dimensions you need them to be:
Regenerate Thumbnails
AJAX Thumbnail Rebuild
Cheers.
I'm creating an e-commerce site and I'm having trouble vertically centering all my thumbnails. The problem is all my images are different sizes and getting each one to vertical align across all browsers is turning out to be a pain. I've looked into the different CSS options, display-table, line-height, and others. They worked in modern browsers, but not well in IE (of course). My thought is the large big time sites are resizing the image (which I can do with no problem) and then overlaying the image on top of a background the exact size they need. Does anyone know if this is how it's done? IF so can you direct me to some documentation of how to do this in PHP?
Or if someone thinks I can do this without all the extra work of overlaying images please let me know. In-case you want to see what I'm working with here ya go:
HTML
<a href="#">
<div id="product">
<div id="product-image">
<img src="" border="0" />
</div>
<div id="product-name"></div>
<div id="product-price"></div>
</div>
</a>
OPTION 1 : JQUERY (this seemed to be my best hope, but couldn't get it to work right)
var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
var top =( h- $(e).height())/2;
$(e).css("margin-top",top);
});
OPTION 2 : CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
}
#product-image img
{
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
EDIT
I found the working code, thanks Explosion Pills. For anyone trying to get this work I would suggest using this jQuery method and Fiddle link http://jsfiddle.net/9VfUS/1/:
WORKING JQUERY
var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
If you can use JavaScript, I would do it that way as it's surefire to get things to work the way you want. You are using .map for the wrong purpose. You want .each:
$('#product-image img').each(function () {
var top = (h - $(this).height()) / 2;
$(this).css("margin-top",top);
});
I assume that h was already calculated correctly as the tallest image or the height of the container or what have you. If it's not, then you have to do that.
Try this, if you know in advance the sizes of your images...
HTML:
<a href="#">
<div class="product">
<div class="product-image" data-image-loc="path_to_your_image"> </div>
<div class="product-name"></div>
<div class="product-price"></div>
</div>
</a>
CSS:
div.product-image {
background-position:center center;
background-repeat:no-repeat;
background-color: transparent;
background-attachment: scroll;
}
div.product-image-width-x-height {
width:{width}px;
height:{height}px;
}
JS:
$(document).ready(function() {
$('div.product-image').each(function() {
$(this).css({backgroundImage:url($(this).attr('data-image-loc'))});
});
});
If you don't know your sizes, then a resize script that serves all your images to a new size would fix that, and you would simply move the width/height css properties to the div#product-image CSS declaration.