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 */
}
Related
I have two PHP variables:
$video_mp4: Which is a video file.
$video_poster: Which is an image.
For desktop, I want $video_mp4 to load as an ambient video, which it does. But on max-width: 576px I want the $video_poster to show.
Unsure on how to approach this though. This is my current code and thought process:
<div class="hero__container--teaser">
<div class="hero__teaser">
<!-- By default, show video -->
<?php echo wp_video_shortcode( $video_mp4 ); ?>
<!-- If max-width 576px, show image -->
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
Wondering what the best practise here?
Wrap video content with .video and image content with .image and using CSS Media queries in max-width: 576px show image and hide video
.hero__teaser .image {
display: none;
}
#media (max-width: 576px) {
.hero__teaser .image {
display: block !important;
}
.hero__teaser .video {
display: none;
}
}
<div class="hero__container--teaser">
<div class="hero__teaser">
<div class="video">
<?php echo wp_video_shortcode( $video_mp4 ); ?>
</div>
<div class="image">
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
</div>
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%;
}
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>
Let's say we need to display 2 different images for mobile and desktop. We would usually do something like this:
HTML
<div class="container"></div>
CSS
.container {
background-image: url('image-for-mobile.jpg');
}
#media (min-width: 1024px) {
.container {
background-image: url('image-for-desktop.jpg');
}
}
But what happens when we are getting those images from the server? Let's say from Wordpress or any other source?
One way to do it, would be:
HTML
<div class="container for-mobile" style="background-image: url(<?php echo $img_for_mobile; ?>);"></div>
<div class="container for-desktop" style="background-image: url(<?php echo $img_for_desktop; ?>);"></div>
CSS
.for-mobile {
display: block;
}
.for-desktop {
display: none;
}
#media (min-width: 1024px) {
.for-mobile {
display: none;
}
.for-desktop {
display: block;
}
}
For obvious reasons, even though this "works" this is not right because we are repeating the markup. What if we have a ton of content inside '.container'? We would have to repeat all that, only to have a different background image.
Another option would probably be passing the variables as data attributes and then with jQuery getting those variables and assigning the right background image in relation to the screen size. Something like this:
HTML
<div class="container" data-mobile="<?php echo $img_for_mobile; ?>" data-desktop="<?php echo $img_for_desktop; ?>"></div>
jQuery
// This is pseudo code, not tested
var imgForMobile = $('.container').data('mobile');
var imgForDesktop = $('.container').data('desktop');
$(window).on('resize', function() {
if ($(window).width() < 1024) {
$('.container').css('background-image', 'url(' + imgForMobile + ')');
}
else {
$('.container').css('background-image', 'url(' + imgForDesktop + ')');
}
});
How could we attack this situation in a more elegant and proper way? Any thoughts would be much appreciated. Thanks in advance!
The correct way:
This is what image srcset is for!
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
If I had to guess though, I think you would benefit from using this and object-fit together. Do you want the background image to be sized to cover?
If so, this is way the super responsive and efficient way to do this:
.container {
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="container">
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
</div>
The older server side way:
If you really wanted to do it in PHP like you have in the example, this is the pattern we use for things like this in WordPress.
$image = 'desktop.jpg';
switch (true) {
case wp_is_mobile() :
$image = 'mobile.jpg';
break;
}
<div class="container" style="background-image: url(<?php echo $image; ?>);"></div>
You can still use the CSS approach, by passing in a full URL or CDN.
If the rule inside of a media query that is false, that image won't be loaded by the browser.
.container {
background-image: url('https://www.example.com/image-for-mobile.jpg');
}
#media (min-width: 1024px) {
.container {
background-image: url('https://www.example.com/image-for-desktop.jpg');
}
}
There are alternatives which place this logic in either your HTML, JS, or even server code. HTML's answer is using a srcset attribute with an image, or using a <picture> element instead which was introduced in HTML5. srcset on an image is typically used to handle differences in pixel density, while the <picture> element is used to serve varying images using media queries. The first <source> whose media query matches the document is served, and you can include a general fallback, which allows backward compatibility for older browsers, however this approach loads at least 2 images - as the fallback will always be loaded.
<picture>
<source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg 3x" media="(min-width: 40em)" />
<source srcset="med.jpg 1x, med-2x.jpg 2x, med-3x.jpg 3x" />
<img src="fallback.jpg" alt="fancy pants" />
<!-- fallback.jpg is *always* downloaded -->
</picture>
The way I did it in my site was I used JQuery to check if its a mobile browser (quick google will find the if statement used, its rather long)
Edit:
Here: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('body').addClass('mobile');
}
I made it append the body tags with class='mobile'
and then in my CSS I have two sets:
body {
background:black;
}
.mobile body {
background: blue;
}
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.