how to change the images link dynamically in responsive mode.
i am working on the wordpress and showing the thumbnails having fixed size 280*200 but in the resolution between 480px to 600px i am wanted to change the thumbnail size to medium(which i have set to 480*200) how i can achieve this?
any script to detect the device resolution and change the img src automatically to medium size thumbnails???
like this
(in desktop versions)
<img class="attachment-thumb-small wp-post-image" src="280x200.jpg">
(in mobile versions)
<img class="attachment-thumb-medium wp-post-image" src="480x200.jpg">
try adding media query to your css
#media screen and (min-width: 480px) and (max-width: 600px) {
.attachment-thumb-medium, .wp-post-image{
width: 480px;
height: 200px;
}
}
You have two options.
A. You can set images in CSS as background for empty <div> elements. Then you can use a media query in CSS to change the image source.
.thumbnail {background-image:url("280x200.png")};
#media screen and (min-width: 480px) {
.thumbnail {background-image:url("480x200.png")};
}
B. You can detect the screen size using JavaScript, and then change the image tags in your PHP code - or using JavaScript again. It's more work, though. See PHP - Detect the display resolution for details.
Related
The challenge is that from my CMS (let's say WordPress for arguments sake) I can get different crop sizes of a background image for the banner on my page. These crop sizes are generated for different screen sizes (based on mobile, tablet, laptop, etc).
I would like to be able to render all of the different crop size image URLs as attributes onto the banner DOM element and then in an external CSS document use media queries to pick the correct one to display. The reason I want to do this is that I can write the PHP to dynamically provide the cropped images on different pages.
Something like, HTML:
<div style="background-image:url('/img/sm-background-image.jpg')"
md-background-image="url('/img/md-background-image.jpg')"> ...
CSS:
#media (min-width: 768px) {
.background-image-style {
background-image: attr('md-background-image')!important; /* All screen sizes above the smallest and default size */
}
}
So, all screen width of 768px or bigger would display the image provided in md-background-image attribute and anything below this size would show the default background-image defined in the style attribute.
I can see that attr() is not supported for background-image currently and although there is some future scope for this, I can't use it now.
I achieved the desired affect by using a combination of the CSS var() method and style attribute.
My PHP code looks something like this:
<div class="banner-image" style="
--xl-background-image:url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>');
--lg-background-image:url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>');
--md-background-image:url('<?php echo $image['sizes']['md_header_banner_wide']; ?>');
background-image:url('<?php echo $image['sizes']['sm_header_banner_wide']; ?>')">
Which renders the HTML:
<div class="banner-image" style="
--xl-background-image:url('/wp-content/uploads/2019/02/Products-Header-1489x600.jpg');
--lg-background-image:url('/wp-content/uploads/2019/02/Products-Header-1400x564.jpg');
--md-background-image:url('/wp-content/uploads/2019/02/Products-Header-1024x413.jpg');
background-image:url('/wp-content/uploads/2019/02/Products-Header-768x309.jpg')">
I can therefore use the following CSS and media query combination to show the different images based on the client's screen size in my external style.css file:
#media (min-width: 768px){
.banner-image {
background-image: var(--md-background-image)!important;
}
}
#media (min-width: 992px){
.banner-image {
background-image: var(--lg-background-image)!important;
}
}
#media (min-width: 1200px){
.banner-image {
background-image: var(--xl-background-image)!important;
}
}
I've checked this on Chrome & FireFox (on Windows) and Safari (on Mac) with developer tools and I haven't noticed any comparability issue.
Alternative approach:
Alternatively, I realised as I was writing my above solution, that a less risky approach might be to render my styles directly into the page. I guess it's just a questions of compatibility and/or coding standards that separate the two possibilities.
<style type="text/css">
#media (min-width: 768px){
.banner-image {
background-image: '<?php echo $image['sizes']['md_header_banner_wide']; ?>'!important;
}
}
#media (min-width: 992px){
.banner-image {
background-image: url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>')!important;
}
}
#media (min-width: 1200px){
.banner-image {
background-image: url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>')!important;
}
}
</style>
<div class="container" style="text-align: center"><iframe width="100%" height="450" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" frameborder="0" allowfullscreen></iframe></div>
I inserted the above code into frontpage.php on wordpress to add an embedded youtube video. However I want to edit the height of the video player when the website is viewed from mobile mode. I tried adding .container {height: 250px !important;} in the media query but that doesn't change anything. I want to know how to either change the container size so that I can set the height to auto or add code to the media query to change the video player size. This website can be viewed at beautyinstitute.us
I also tried
#media screen and (max-width: 799px) {
.container .iframe{height:250px !important;}}
in the responsive.css
The iframe is an html element, not a class. So targeting it like
.iframe
won't work. Try this:
.container iframe {height: 250px;}
WordPress can retrieve width/height of your video and generate iframe code.
<?php
echo apply_filter('the_content', 'https://www.youtube.com/watch?v=6c7Fx2PR9Dk');
?>
If you want responsive video, try Fitvids.js, a jQuery plugin.
I am trying to figure out a way to do this using both server and client (or maybe just client?) side code based on the browser width. What I want to do is take a carousel from bootstrap and populate the slide portion with images from the server.
This is easy to do when the browser is of one size, its a simple sql query and a loop.
But now imagine you can have an image for 1024+, and image for 768, an image for 480px and finally an image for 320px (these are all the same image, just at different widths). How would I use php and css to create a carouse that loads one image for 1024+, then once you get down to 768px it swaps that image out for one of an appropriate size, same for 480 and 320.
I haven't tried anything other then storing the images, because to be honest I am not even sure how to approach this.
How would you accomplish this?
Would it be an option to use media queries in CSS? Although content: url(...) for dynamic images aren't supported in all browsers you can play with background url() property of a div.
To give you an impression:
#media (max-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/512/256");
}
}
#media (min-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1024/750");
}
}
#media (min-width: 1024px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1920/1025");
}
}
See this fiddle in action with a fullscreen bootstrap carousell
I have a banner slider that I am forcing 100% width. The problem is that when it loads, the first slide does not show (on chrome at least), I have to wait for the second slide to 'slide' in..then everything pushes down and looks as it should. If I set a fixed height it works fine, but my resolution is 1900 and different resolution screens would look bad with one locked in height.
I was wondering if there is a way I could calculate the visitors resolution and the banner dimensions to figure out the appropriate height based on the 100% width on load.
The beta url is http://www.can-do.org/beta/
(again, I think it works ok with IE, I only see it in Chrome/firefox)
Change your banner size using CSS code:
#media only screen and (max-width: 480px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 480px) and (max-width: 768px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 959px) {
#your_baner_image_id {width:000px;height:000px;}
}
It might be possible to do this with CSS alone. The problem with #media rules is that you'd need one for each pixel width, which isn't viable. So you could try this instead:
Firstly, change the wrapper div here:
<div align="center">
to this
<div class="pluswrap">
Then, add these styles to your CSS file:
.pluswrap {
text-align: center;
padding-bottom: 30%;
height: 0;
position: relative;
}
The slideshow height is always 30% of the width, so the 30% bottom padding is set to keep the container div open to that dimension at any screen size.
(I can't really text this properly remotely, but it's worth a try. It did seem to work, but I can't refresh the page and see what happen on page load, because the temporary styles get wiped. Would be keen to know if it worked, though.)
Since you are using Jquery, you can get user Resolution by:
$(window).width();
$(window).height();
example:
$(function(){
var w = $(window).width();
$('your-banner').css('height',w*30%);//<--this will set banner height 30% of screen width
});
I am using a responsive Slideshow module - Lof ArticlesSlideShow (DEMO) .
How can I hide the "Navigator" part (the scrolling rows of articles with thumbnails) when I resize the window to a smaller size.
Right now, if I re-size the browser window to my mobile's display's size (Motorola Defy+), the navigator part will come over the image,title and introtext . Opened the demo link on the mobile browser and same effect.
Since the link to the article is on the title, which becomes hidden under the navigator, the article page cannot be accessed.
Any idea?
Try adding this to a custom CSS file or current one:
#media screen and (max-width: 480px) {
.lof-buttons-control {
display: none;
}
}
This means that the maximum width of the screen, till this code starts to kick in is 480px. From then on, it hides the Navigator part.
Hope this helps
#Lodder - AMAZING!!!!!!!! :D
I replaced .lof-buttons-control with .lof-ass .lof-navigator and it worked :D
#media screen and (max-width: 480px) {
.lof-ass .lof-navigator {
display: none;
}
}
It means a lot!!!!