I'm creating a mobile-first website that makes use of full-width background images which are uploaded to the page as featured images.
The problem I'm having is that the background images are styled inline because PHP is needed to get the actual background image. Now because they're being fetched inline, the images are going to be downloaded no matter what platform you're on. I only want the images to be available/downloaded if you're on a desktop/tablet device. NEVER on a mobile device. So I need a way that will stop the images from being downloaded if you're on a mobile device - has anyone any experience of achieving this before?
The code I currently have:
<?php $background_image = wp_get_attachment_image_src(get_post_thumbnail_id($page -> ID), 'full'); ?>
<div class="page-background-image" style="background-image: url(background_image);"></div>
You can use a library such as Mobile-Detect, which has WordPress support. Or you can use media queries in CSS:
#media (max-width: 600px) {
.page-background-image {
display: none;
}
}
Related
<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 would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
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
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.
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!!!!