I'm currently working on a wordpress blog using the standard Twenty Seventeen theme. When setting a custom header image, the maximum width of the uploaded header image that is shown on any display is 2000px (larger images are resized). This, however, looks quite ugly on a 4k screen. Is there a possibility to allow for larger images when the browser width is larger than the 2000 pixels? My source image has a size of 6000 x 4000 pixels.
I appreciate your help.
You could use jQuery conditions mixed with url and if statements to achieve this you could use $(window) functions like below then you could store the image location to a variable and pass it in is the property value to change the background depending on the screen size eg:
var width = $(window).width();
var height = $(window).height();
if ((width >= 1024 ) && (height>=768)) {
$url = 'http://mywebsite.com/files/myfile.jpg'
}
else {
$url = 'http://mywebsite.com/files/default.jpg'
}
Then use the jQuery .css method to change the background image of the body or div you want to change for the screen size eg:
$('#myDivId').css('background-image', url);
Related
I am trying to embed a pdf within an iframe but when I set height to 100% it is really small.
Is there a way to make the height exactly one page?
my code
<iframe src="/wp-content/uploads/test.pdf#view=FitH" width="100%" height="100%"></iframe>
Try to add some CSS into your code as below:
<iframe src="/wp-content/uploads/test.pdf#view=FitH" style="width: 100%; height: 100vh"></iframe>
There are two parts to the question
Part 1
"when I set height="100%" the frame is too small
it will be 150px on whatever device since you cannot use % for frame height. The correct way is to set a frame to 100vh (viewport height as suggested by Baris Taskiran in their answer) but there are frame imbedding values that suggest say style as width: calc(100vw - 18px)!important; min-height: calc(100vh - 18px)!important ; can be preferable to avoid drag resizing issues.
see https://stackoverflow.com/a/74354395/10802527
Part 2
You cannot force a browser internal PDF view (it is after PDF download, or not, or download and view. Embed, iFrame or Object it makes no difference the PDF is out of your control and in the application/PDF) but you may suggest it attempt to FitV (fit the vertical) in the viewers downloaded frame.
However that can be meaningless for some PDF viewing plugins, if they are not Acrobat since those are Adobe Acrobat "fragments" and do not need to be supported by plugin extensions such as Chromes Foxit/Skia or Firefoxs PDF.js etc.
For more on the topic see https://stackoverflow.com/a/72265519/10802527 and https://stackoverflow.com/a/72106063/10802527
The question asked is why the middle FitV appears not to be working and since both the HTML and the PDF now belong to the user, they may edit or control view as they wish. This allows users to change font if they wish to inverted W&B Comic Sans or allow for different screen sizes/dpi etc. Both the files are 100% theirs.
The following answer does NOT work:
=====
This may not be practical for you, but this is how I guarantee that only one page of a pdf is displayed in an .
Give your a class--I use "x85x110" for 8.5" x 11" paper and use the following CSS:
iframe.x85x110 { height:calc(103% * (8.5 / 11)); }
The "103%" is a fudge factor that you can change to get exactly the height you want, i.e., to get just a hair of the blank space between one page and the next. The white-space on either side of the "*" and "/" is critical--calc won't work without it.
=====
This answer, however, DOES work:
=====
First the CSS:
iframe.x85x110 { width:80%; }
Second, the HTML:
<iframe class="x85x110" src="A Boy And His Dog/docs/Downunder Expansion - 8.5 x 11 - 10pt.pdf"></iframe>
Third, the javascript:
<script type="text/javascript" >
x85x110();
window.addEventListener('resize', x85x110);
function x85x110()
{
array_x85x110 = document.getElementsByClassName("x85x110");
for (count=0; count<array_x85x110.length; count++)
{
array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";
} // for (count=0; count<array_x85x110.length; count++)
} // function x85x110()
Fourth, the explanation:
Give your <iframe> a class name, I used x85x110 because my documents are 8.5" x 11".
I use width:80% because I want the frame to be 80% of the width of the column width in which the .pdf and its containing <iframe> lives--this is NOT necessary.
The x85x110(); calls the function x85x110() when the page loads.
The window.addEventListener('resize', x85x110); calls the x85x110() function whenever the page is resized.
The array_x85x110 = document.getElementsByClassName("x85x110"); collects all of the <iframe> elements of the class x85x110 in an array named array_x85x110.
Then, for each element of array_x85x110, i.e., for each <iframe> of the class x85x110, we loop using the for (count=0; count<array_x85x110.length; count++) {} and set the height of the <iframe> to (11.0 /8.5) times the offsetWidth of the <iframe> with the the:
array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";
Math.round() rounds the resizing of the <iframe>'s height to the nearest pixel.
The (11.0 / 8.5) divides the <iframe>'s .offsetWidth by 8.5 (the width of my pdf page in inches), which changes as the browser window is resized, and multiplies by 11 (the height of my pdf page in inches), to maintain the pdf's natural aspect ratio.
If for some bizarre reason you're using A4 paper, you European wierdo :-), the (11.0 / 8.5) would be (11.69 / 8.27), i.e., the height of a piece of A4 paper divided by its width.)
=====
You can see this CSS at work, for real now at my board game design page.
Sorry for the confusion.
You need to set the following settings in CSS (suitable for PDF page size):
width="594px"
height="580px"
I created a slider in WordPress using CSS background image URL dynamically inserted by php.
foreach ($slides as $key => $value){
array_push($output,'<div class="slider-slide" style="background-image:url(' . wp_get_attachment_image_src($value['image'], 'full')[0] . ');">');
array_push($output,'</div>');
}
I did this because it works better responsively, I.e. it scales down nicely by just setting the background size to cover and giving a max height.
background-size:cover;
My problem is that because I have used the full size image url, although it still scales nicely it will always load in the full image rather than the srcset image that would have been loaded if I was using the standard WordPress attachment function (link for info on srcset update).
Any suggestions would be appreciated.
I am working on a wordpress theme and WP now uses oEmbed to automatically turn known links into widgets. The problem here is that the widgets are not responsive (they do not keep the same aspect ratio and adjust to the screen size).
The site is http://testsite1.seyoum.net/
Note that the theme I am using is a child theme of twentyfifteen. You can download the theme files here:
https://onedrive.live.com/redir?resid=B9CDD4D34FF06A75!97938&authkey=!AEj9VpYkCRL0SEE&ithint=file%2crar
I have done some research and found this video: https://youtu.be/Dm0YnuQeROI
In the video he removes the with and height properties of the iframe. The problem for me is that these tags are added automatically by oEmbedd so I need some kind of filter that removes/ignores the height and width tags in the iframe.
I am trying to alter an iframe. More spesifically I want to remove the height and width tags of the iframe by using (what I believe to be) filters.
Example:
I want to change this
<iframe width="660" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&color=000000&download=false&show_user=false&sharing=false&show_comments=false&show_playcount=false&hide_related=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F192992432&show_artwork=false&&"></iframe>
To this:
(The width="660" height="400" is gone)
<iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&color=000000&download=false&show_user=false&sharing=false&show_comments=false&show_playcount=false&hide_related=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F192992432&show_artwork=false&&"></iframe>
I am not familiar with php and it is hard to find articles I can understand so please help me out if you can.
Try to use
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
/*$embed_size['width'] = 827;*/ // Adjust the width of the player
// $embed_size['height'] = 120; // Adjust the height of the player
unset($embed_size['width']);
unset($embed_size['height']);
return $embed_size; // Return new size
}
or
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
$embed_size['width'] = "auto"; // Adjust the width of the player
$embed_size['height'] = "auto"; // Adjust the height of the player
return $embed_size; // Return new size
}
or
function mycustom_embed_defaults($embed_size){
// Applies for all embedded media
$embed_size['width'] = "100%"; // Adjust the width of the player
$embed_size['height'] = "100%"; // Adjust the height of the player
return $embed_size; // Return new size
}
The problem is that your plugin seems to need the width property... All you have to do is to know what you want it to be... It doesn't have to be a pixel value...
I am using Lightview 3 to display an image within an iframe. This has a form that allows the user to zoom in and out of the image and submit the form to generate a thumbnail based on the image in view when the form has been submitted.
The issue I have is that we have to use massive images (width 1100px+) etc.. so having this open in a lightview doesn't really look great as you have scrolling bars within the iframe.
What is the best way to have the image displayed at half of its size and using some form of scaling when it does create the thumbnail of the fullsize image correctly. Can anyone suggest some methods to do this?
I have done this type of thing many times. My environment is ASP.NET using Visual Basic and the technologies I used to achieve my desired result where FancyBox, JCrop, and Uploadify.
First I set up FancyBox (haven't used FancyBox2 yet) to open a modal popup window with a iframe with a page that has a preview area (344x270 in my case) and a place to upload an image using uploadify.
Once an image is uploaded, validated, and thumbnail created I create an object that holds information about this image. This includes file name, extension, original width and height, and a new width and height to scale the image to fit my 344x270 preview (cropbox) area.
To find this new width and height I use the following code written in VB.NET:
Dim objImage As System.Drawing.Image = System.Drawing.Image.FromFile(path)
Dim orig_h = objImage.Height
Dim orig_w = objImage.Width
Dim cropbox_width, cropbox_height As Integer
If objImage.Width > objImage.Height Then
cropbox_width = 344
cropbox_height = (344 / objImage.Width) * objImage.Height
If cropbox_height > 270 Then
Do Until cropbox_height <= 270
cropbox_width = cropbox_width - 1
cropbox_height = (cropbox_width / objImage.Width) * objImage.Height
Loop
End If
Else
cropbox_height = 270
cropbox_width = (270 / objImage.Height) * objImage.Width
If cropbox_width > 344 Then
Do Until cropbox_width <= 344
cropbox_height = cropbox_height - 1
cropbox_width = (cropbox_height / objImage.Height) * objImage.Width
Loop
End If
End If
Basically, I'm trying to determine if its portrait or landscape then find the aspect ratio to scale it down to fit my preview (cropbox) area.
Once this is determined I add them to my object, serialize it and send it back to the upload page (FancyBox iframe), set the image path of the preview (cropbox) area, set it's height and width from the returned object, store the original height and width, and then initiate JCrop.
From here they can crop the image for which I have code to crop the original based on how they have cropped the preview image. I won't go over this code and technique because you didn't ask about cropping.
I know this isn't exactly what you asked for since it sounds like there will be no uploading or cropping going on, but I thought my code for scaling the image down might point you in the right direction.
Fancybox - my favourite (supports many things, not just images)
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/ This is a fine compiled list of alternatives
I'm working on project where we are trying to adopt and resize template images to the various resolutions. For example if the website is viewed in 800px width (800x600) and 1024px width or larger the image size should be viewed in same quality.
I've had in mind to use sprite with 3 types of images for each range of this template , but I'm looking for other ideas , php gd maybe ? Any python solution ?
Well, for resizing it would of course be better to use GD... But indexed, I think. So that you have an upload script that automatically generates the images' in other sizes, and saves them somewhere.
However, it matters whether you have more disk space, or performance... Performance would get worse IF you have many people viewing these images. Disk space would get worse IF you have A LOT of these images.
Python Imaging Library will give you dynamic resizing, processing, etc.
If you are resizing to a known set of resolutions, you can just resize your images once and store them.
If you need to resize for any possible resolution, you will need a library to do that for you. In PHP, GD or ImageMagik are both good.
If you do this, you may want to add caching for the most common resolutions. This will take up more disc space, but will save you the cost of recalculating all the images every time.
Note that it can be difficult to detect the true resolution though. If the browser window is resized, the resolution you think the screen is may not be the actual resolution the user can see. The same can happen if they have toolbars or sidebars opened.
Why not resize the image on the client using JavaScript?
<head>
<script>
function resize() {
ww = window.innerWidth
wh = window.innerHeight
photo = document.getElementById("photo")
// You probably wouldn't actually make the image fill the window, you'd pick
// some appropriate size.
photo.setAttribute("width", ww)
photo.setAttribute("height", wh)
}
</head>
<body onload="resize()" onresize="resize()">
<img id="photo" src="photo.jpg">
Getting the inner window width is quite hard, as different browsers use different variables. However, this is what I use on my website. It gets the inner window width rather reliably, and then sets the image width/height. It shouldn't be too hard to modify this code to set the src of the image desired.
function set_image_sizes(){
if (window.innerHeight != undefined) {
height = window.innerHeight;
width = window.innerWidth;
} else if (document.documentElement.clientHeight > 0) {
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
} else {
height = document.body.clientHeight;
width = document.body.clientWidth;
}
$('#image').css('height', height);
$('#image').css('width', width);
}