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);
}
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 would like to set the gif file in the featured image. I would like it to run when I hover over it with the mouse.
I know I should set this in functions.php file
Together with the code:
add_theme_support ('post-thumbnails');
Unfortunately, I have no idea how to do it. I create my blog and I have never done such things. Could someone help me how to do it?
Thank you for your help!
When you upload an animated GIF to WordPress, it does all of it’s resizing magic to make the various thumbnail sizes (defaults are thumbnail, medium and large, in addition to the original full). When it does this, the resized versions lose their animation.
If your theme displays featured images at any size other than full, you’ll thusly lose your GIF’s animation.
If you definitely know that you want to display the animated version, though, there’s a little trick you can use.
<?php $thumb_url = get_the_post_thumbnail_url();
$thumb_low = strtolower($thumb_url);
if (strpos($thumb_low, '.gif') === false) {
$thumb_size = 'large';
} else {
$thumb_size = 'full';
}
?>
What am I doing here is getting the URL of our featured image, then I make sure it’s all lower case letters (WordPress may do this anyway, but just to be safe), then I check to see if .gif is present in the thumbnail’s URL, and finally, if it is, I set the thumbnail size I use to ‘large’. Doing so will allow me to use the original image, which retains it’s animation.
Then, I just need to tell our call to the_post_thumbnail() to use the variable thumbnail size we set, like this:
the_post_thumbnail($thumb_size)
If you’ve ever tried to set an animated gif as a featured image in WordPress, you’ve probably discovered that you can’t.
The reason why is pretty simple. Your theme grabs a resized version of the featured image you upload. And in the case of an animated gif, that means it’s not grabbing the original gif image, and so you end up with a static image.
The way around this is pretty simple, however. You can just install a plugin that automatically sets the featured image from the first image in a post. Of course that means you will need to make the animated image the first image, but at least it’s a workaround.
There are a number of plugins that will let you automatically set your first image as the featured image. I tried two and the both worked: Autoset Featured Image and Automatic Featured Image Posts.
Something else I found was that I didn’t even need to download the gif. I could just insert it with the URL.
Background
Hi there, I have been recently working on a project of mine which allows users to login and signup to the system. This has been done in PHP. Once the user logs in to the system I have allowed them to upload a profile picture. The upload works and the profile picture displays.
What I would like to happen
I want to allow the user to crop the image they have uploaded to a 150x150 image so that it fits nicely when shown on the page.
What have I already tried
I have uploaded the image as normal and used GD from PHP to crop the image. When this happened, the image didn't crop to where I think the user would have wanted to crop it. The subject of the image was on the right like this example: https://i.pinimg.com/originals/29/a1/9b/29a19bb78244f8a7229fa13c21dbcd50.jpg
In this example I think the user would have chosen the tree as the subject. (I know I can select a crop area but I will not know where the subject of the image is hence my question)
What I have achieved so far
Here is an image of what I have created so far:
The slightly opaque overlay over the image is what I want the cropped area to be. This area is draggable using js. I have managed to choose the direction of the image using JS.
Here is the function that moves the overlay when a user clicks and drags it:
function elementDrag(e)
{
e = e || window.event;
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
// decides which direction is allowed for dragging
if(width > height)
{
//landscape
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
//elmnt.style.left = (l+p_dims.left) + "px";
}
else
{
//portrait or sqaure
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
//elmnt.style.top = (elmnt.offsetTop - (t+p_dims.top)) + "px";
}
}
This is the area where I would potentially like to change it so that overlay doesn't go past the image dimensions on screen
What I have failed to do
I wanted to make the draggable overlay only over the area of the image and not the whole page. Once the overlay has been placed the user should be allowed to click the crop button to crop the image. I know how to crop the image using a crop area in PHP and upload it afterwards.
I did find this js library but not keen on using it, I will though if it is a last resort. https://github.com/Foliotek/Croppie
So how do I do this without using any PHP libraries if possible? Thanks in advance.
I've been dealing with something like this. Croppie seamed like a very viable option. I tried it out and it works wonders. Have been using it every since. Great little tool. Highly recommend you use it.
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
Simple question with yes/no answer and if yes...then how?
Suppose you have an HTML page with an image on it without any sort of watermark.
Is it possible to place a watermark on that image if a user saves it to their computer?
I need a simple function that watermarks an image upon download or save...
I do understand that once the image loads in the browser, it is technically downloaded, so is there a way to display the image without a watermark on screen, and if the user opens browser cache, he/she finds a watermarked copy?
If anybody has done this using any platform (PHP, GD, jQuery, etc.), your contribution would be appreciated.
One trick might be to combine 2 images, so they become one.
I have image A:
Then I add image B (watermark version)
So when you display the image for the user you use one as background and the other one as image, so when user tries to download, they will get only one part. Of course as already mentioned, the user will be able to get all they can see on the screen, but most users won't be able to combine the images properly.
Please note that the image on top must be transparent.
I would recommend doing this server side and cache the modified images when you have cut out the watermark
Here you can read how to do it with PHP: http://www.sitepoint.com/watermark-images-php/
I personally don't think that it is possible with javascript, because as you already have said yourself, it is already downloaded.
But don't nail me on that.
On the server side it is for sure possible, as you can see in the above link.
A possible alternate solution is to contain the image inside an element with a hidden overflow.
For example:
Your image has a height of 200px, you add an extra 20px watermark (when uploading) at the bottom of the image (so it isn't actually on top of the image). So the total image now has a height of 220px; but you place it inside an element give that element a 200px height and a hidden overflow.
You can change the source of the image when a user right-clicks it. This way you can change the source to the watermarked version when the user tries to save the image.
Yes, the user will already have the non-watermarked version in their cache, but only advanced users are going to know how to get to those images.
$('img').on('mousedown', function (event) {
//check which mouse button was clicked, 1 == left, 2 == middle, 3 == right
if (event.which == 3) {
//update the source of this image
this.src = this.src.replace('.jpg', '_watermarked.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
Anything that the user can see they can take. There is no way to watermark ONLY if downloaded. When an image is displayed in the browser it has already downloaded.
There are several approaches you could take. I would recommend you use PHP to add the watermark to the image before it is displayed. This means that all protected images on the site will display a visible watermark. A second approach I have seen used is to display a low quality version that is not watermarked, but restrict the full quality version to only those who are supposed to see it.
Yes it is possible. All you have to do is,
Call the download function, in which we can implement the downloading of watermarked images.
I have used AngularJS, HTML, JQuery and watermarkJS which you find here(http://brianium.github.io/watermarkjs/)
HTML:
Download Sample
Javascript:
$scope.selectedWatermarkType = 'Text';
$scope.selectedPosition = 'Bottom-left';
$scope.text = 'Sample Watermark';
$scope.size = '45';
$scope.selectedFont = 'Arial';
$scope.ColorCodeGlobalObj.colorcode = 'ffff';
$scope.DownloadSample = function () {
if ($scope.selectedWatermarkType == 'Text') {
if ($scope.selectedPosition == 'Bottom-left') {
watermark(['/assets/js/node_modules/watermarkjs/examples/img/shepherd.jpg'])
.image(watermark.text.lowerRight($scope.text, $scope.size + 'px ' + $scope.selectedFont, '#' + $scope.ColorCodeGlobalObj.colorcode, 0.5))
.then(function (img) {
saveImageAs(img);
});
}
}
'img' is the watermarked image object which can be used to download the image.
function saveImageAs(imgOrURL) {
imgOrURL.src.replace('image/png', 'image/octet-stream');
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
var link = document.createElement("a");
link.setAttribute("href", imgOrURL);
link.setAttribute("download", 'watermarkSample.png');
link.click();
}
This code performs download of watermarked image. Still the unwatermarked image is available in the mentioned srcpath which can be appended to an 'img' tag and can be viewed.
Hope this helps !