I'm dynamically appending an html string to a container using jquery.
$('#container').append(str);
str = '<div class="images"><img src = "http://imgs.com/x></div>
<div class="images"><img src = "http://imgs.com/y></div>
<div class="images"><img src = "http://imgs.com/z></div>
<div class="images"><img src = "http://imgs.com/n></div>';
When this html string is appended it will make four requests to http://imgs.com/ for images x,y,z,b.
I'm trying to get all four images in one request. And I want to store all for images and use them later. Is this possible?
To download all of your image files in one request you would need to create a sprite. A sprite contains several images concatenated together into one larger image. When displaying an image the sprite is used as background of an element and then the background is positioned to the coordinates of the desired image within the sprite.
Aside from using the sprite tactic, a browser will always download these images via one request per image.
Further Reading:
http://css-tricks.com/css-sprites/
Related
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'm using php to display image(s) and accompanying text (This is done using a WHILE loop) See below:
While (true) {
echo "
<h2>$post_title</h2>
<img src ='new_images/$post_image' width='200' height='200'/> // Image
<div>$post_content</div> "; // Text
}
I have used CSS to float the image left. Therefore,the accompanying text appears to the right of the image.
However, the second image and accompanying text is NOT sitting below the first. It's trying to force itself into any space to the right of the first image
Can I use CSS to ensure the images are stacked??
I hope that above makes sense?
add clear:both to your images and it should work just fine
For a project I need to load a pdf file onto a div. On clicking a button a canvas will be opened where the user will draw his signature and then on clicking the add button present in the canvas, the user should be able to place the canvas signature as an image on to the pdf. At last on clicking the final button the image should get merged onto the pdf.
I did the above task in the following way:
Converted pdf into series of images using GhostScript.
Loaded the converted images onto a div.
On clicking the button a canvas will be opened and the user will sign in it and on clicking the add button present in the canvas, the user will be able to place the image onto the image of pages loaded in the div.
I obtain the page Id which is the page number and the signature image placed coordinate using e.clientX and e.clientY.
Then I pass all those 3 values to a php script which uses fpdf and fpdi to merge the image onto the pdf.
I'm not able to place the image properly because e.clientX and e.clientY makes use of pixel as units where as fpdf uses mm as units. I'm trying to sort out that.
Is there any other way to do this in a simpler way. i.e., directly loading the pdf onto the div and merging the signature instead of what I've explained above.
You may try Firefox's PDF.js, which you can make use of, in your project. A sample code would be:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
There are Javascript-Libraries like Mozillas pdf.js that render PDF-Files directly in the browser into a canvas. That might be a possibility to circumvent the image-rendering process. But as far as I know those libraries have problems with CMYK-PDFs. Therefore the safe way would be to do the image rendering.
As for embedding the signature into the pdf I can't see any other way then the one described by you. The aforementioned libraries all are only displaying the PDF-file so they can not write into the PDF.
Hope that helps
You can look at Applidok PDF service, which allow to have signature area, so that form user will have the chance to either upload signature image, or to draw it on a canvas, so that it get merged on his custom PDF document generated at end.
An example is online at http://pipnee.com/P398D433C .
i am displaying an image usign readfile() function of php
HMTL:
<img src='image.php?id=232'/>
PHP: image.php
<?php
$id=$_GET["id"];
if(image_view_allow($id)){
$path=get_image_path($id);
readfile($path);
}else{
readfile("images/not_allow.png");
}
image_view_allow and get_image_path is two that i have defined to check validation and get path
I am doing this because i want show image only to the allow person.
Does this affect speed of downloading an image ?
what is normal(means direct path in src attribute of img tag) or trick that is shown above?
Just loading an image probably same,but it is always better if you handle images with php, because when you resize image with php you load the needed size. But with html you load the bigger size than you need and resize.
first -> Does this affect speed of downloading an image ?
answer: no, because when the page is loaded, the php code is already translated to html before page is loaded in the borwser.
second -> what is normal(means direct path in src attribute of img tag) or trick that is shown above?
answer: both are same as both involve php code. When code executes in either way it will enter the source of the image in the image tag.
How can I convert images on my website into greyscale? I don't care if it's PHP or JS, but I think PHP is nicer.
In particular I have a blog with various posts containing images, and I want the thumbnail images that preview the blog post on the index page to be greyscale while the represented images in the blog post stay colored. These thumbnail images share a class called .post-thumbnail there the img tag is inside the element with that class.
All I want is something that would look like this in CSS is there would be that property:
.post-thumbnail img { image-transform: greyscale; }
In PHP or JS.
Quick search on StackOverflow finds this:
$im = imagecreatefrompng('dave.png');
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagepng($im, 'dave.png');
See Making an Image Greyscale with GD Library