The project is developed using CakePHP.
The page is of a news feed article.
Pagination is simple when you want to return (x) number of records per page, or (x) number of images per page, or even limit the number of words/paragraphs/characters but what if you want to paginate by the visual length of the page?
The issue came up because some articles contain a large amount of text and a large amount of images. I would like to know how you would go about developing pagination when the content is completely dynamic. By this I mean, it could be 100% text, text and 3 pictures, 10 pictures, etc.
Code is appreciated but even a concept would be beneficial, thanks!
I don't know cakephp, but, how about counting the number of characters?
Let's say you have 10.000 characters in the article and you decide that each page should have not much more than 500 words. Given an average word lenght of 5 characters, you go to the character 500*5=2500, look for the next closing paragraph, and take this point as next-page mark.
You could use the same concept with images but considering the height of the images...
Sounds good?
Because we know the width of the page and the height of the image and we were able to approximate the pixel height of the text.
We then took the height of the images, spaces, and text, and subtracted that from the total allowable height within a certain percentage of error, this is so that it doesn't push an image onto the wrong page just because the last 10px go over the limit.
We also have a way to force items onto the previous page in the event that an image, or sentence gets pushed to the next page which does not give the proper look.
Related
My site has a php while-loop-generated table with about 2000 rows. Each rows renders from a variety of HTML elements including a user profile pic. The profile pic image size has smaller dimensions than the profile pic user uploads (on another page), so I was using css background-size to reduce the image size.
However, I just learned IE8 does not support background-size, so on first thought I figured I would use an php-coded image resizing function I developed. Problem is that the function (per image) generates a base64-encoded data uri that on average adds 3850 characters per table row.
Doing the math, this would add 2000 rows x 3850 ~ 7.7 million characters to the table, which is about 6 times the character count of the current table. Since this content is non-cached (a php script loads this content on page load and every 2 minutes thereafter), I don't see this as a viable option.
One option I could try is found at here (Merging two images with PHP). In my case, I would merge 2000 images into a "sprite" which I then slice up using php, then take each slice and insert into the correct row using a while loop. This sounds like it could get messy (not sure yet though, haven't tried this).
Is there any way to resize an image without generating a ~4kB data URI? Any possibilities besides an image merge?
EDIT:
Is there a way to jumble arround the pixelated elements? If I have a grid of lets say 100x100 - then the pixels get very small and you can see the image sort of. So I'd like to jumble the pixelated parts. Any idea?
I'm trying to use PHP to divide an image into an equal grid, so that I could pixelate it into even parts.
It has to do with a sort of game. There is an image uploaded by some user, and I want it to be divided into x blocks (the user selects how many blocks there should be), each of the blocks would then be pixelated. When other users complete some task - one part of the pixelated block is revealed, until all pixelated parts are gone and you're left with the original image. I really don't care if the grid elements are squares, or rectangles - I just want them to be even.
As my starting points, I'm using the answer on this question PHP image pixelate?
To determine the x and y pixel size, I'm using this formula:
$gridElements = 9;
$pixelate_x = $width/sqrt($gridElements);
$pixelate_y = $height/sqrt($gridElements);
I've noticed that when using a number, whose square root is an integer - I get a more even grid.. But it's not perfect.
When trying out with a 9 block grid, and using a 1160x680 image, I get the following:
It may appear to look even, but the last row is bigger than the top 2 rows.
When I scale it to 16, the difference is quite obvious
And when trying out a 400 element grid (20x20) the 21th row appears.
So .. It's not working very well, I do want the grid to be even. Does anyone have any idea of how this could be done?
This is because 1160 doesn't really divides itself very well, even by 3 (yes, it is not equal when using 3x3 grid either). Your greatest enemy here are integers
My website has a picture generator. It allows visitors to write a custom text on an image.
I handle the situation by displaying the picture and using Javascript, so they can write on the picture (to preview how the picture will look like). After they press submit I get x&y coordinates, text and font size.
(I also support multiply font sizes)
For writing the text on the image I use the ImageTTFText function.
Ok, so far everything was good. Now the problem I have is how to know when the sentence is too long to fit in one line. I came across the wordwrap function, but it's not reliable. It splits the sentence depending on the number of chars. But, for example, if you type 'I' ten times and 'D' ten times you will see there is a difference in width.
Ok, then I came across ImageTTFBBox which will calculate the size of the box so I will know when it's too long. Well this is fine but how could I split the sentence then? (by words).
I would be very grateful if anyone could give me an answer.
my logic would be to add as many words to each line as possible without having to cut a word. So, I would add a word to a line, check its rendered size with ImageTTFBBox(), and repeat until the line overflows(and then obvious remove the word that caused the overflow). If you come across the situation where the line overflows and there's only one word on the line, then you must cut the word. you will be calling ImageTTFBBox() many many times.
If you are using HTML5, you could ask Javascript to give you some help, before sending over. Assuming you have a canvas (even created in code) and a context ctxt you could do:
ctxt.font = "14pt Arial";
ctxt.textAlign = "left";
ctxt.fillStyle = "#000";
ctxt.fillText(text, x, y);
var metrics = ctxt.measureText(text);
var width = metrics.width;
Now you know how wide your text is, and can do some basic word wrapping. Say your effective width (image width minus inside margin) is 180 px, and your text width is 679 px. That's a +/- 25% ratio (26.05%). Use that ratio to extract the first 25% of the sentence, see if it fits in the width, draw, and move down a line.
I'm trying to find some way to convert a number 1 - 5 into a star rating, which can also accomodate decimals, like 4.3 or 3.34, and be very precise (like on Amazon.com). The rating doesn't have to be usable, it just has to be a static image. Any help?
I'm fine with using PHP or jQuery, whichever it needs to be.
You could create an image that is white with transparent star cutouts. Then place that over the top of a yellow div of a given length. Lets say your image was 100px wide. If you had a 3 star rating you would make the yellow div 100*(3/5) and 3 of the stars would be filled in.
EDIT:
A similar idea. You could have an image with all 5 stars on it. Place this image within a div with overflow:hidden. Then you set the width of the div the same way as above. The smaller the div the less stars you'll see.
EDIT2:
Fiddle just for fun. All the granularity you could ask for.
http://jsfiddle.net/qFMyC/
This must be sufficient for your purpose:
http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I wrote this ages ago. I was obsessed with not using JS. It needs some work, but I think it's exactly what you're looking for.
http://yefomit.com/internet/simple_css_rater
I'm hoping you mean turning the 1 -5 value into an actual star representation.
It depends how granular you want to be, I think Amazon's is accurate to tenth's (0.1), this is probably achieved server side to save on client load and take advantage of caching the images; but it could be done client side.
#kingjiv posted a good client side solution but for server side:
If you're not too worried about granularity you could create 11 images 0, 0.5, 1, 1.5 etc. etc. and pass the value into the image src attribute. This would serve the right image and they'd be nicely cached for re-use over and over on your pages.
If you want to be really granular though you could create them in code server side, cache them on creation each time ready for quickly serving afterwards. With this method you could go to whatever degree of accuracy took your fancy.
For PHP I'd recommend looking at Imagik
What I have done in the past is to create 2 divs and put them on top of each other.
On the bottom div you set the width equal to the width of 5 stars. So, if your star is 50px wide, your bottom div is 250px wide.
On the top div you use the same star with a different color. Then you set the width of that div in php or javascript to 50 * $decimalStarRating.
I want to pull a dynamic content, which consists of a long text input with some images, into a div with a fixed width (300px) and height (1000px), the challenge is I cannot use overflow: auto in css when the content's length is exceeding the div's height (1000px), instead, I am asked to split the long content into pages with a pagination.
Is it possible to achieve with PHP or do I have to use javascript (jquery)?
I was thinking to count the number of characters and splitting them, but it doesn't seem correct when the content comes with different sizes of images...
Any ideas??
This might be very complicated(I'd like to say "impossible") to do it on the serverside, because there are too many clientside effects that can't be calculated(browser-default-settings for margins, paddings, line-height, font-size and user-setting for zooming), I would prefer to do this on clientside.
I made a little example using jQuery: http://jsfiddle.net/doktormolle/XwUuA/
It takes the childnodes of the target-element, and wraps them into new elements which have the same dimensions like the target-element(as long as the height of the wrapper does'nt exceed the height of the target-element).
Maybe it's useful to you(It's a draft, of course there still has to be worked on it to match your needs)
You could use PHP. Find out how many characters you can get per line, and how many lines of characters will fit in your div. Then, with PHP, count characters, divide by characters/line, then you'll have how many lines your text will take up. Then you can use getimagesize() to get an images dimensions, and go from there.
See the PHP function for more info.
I wanted to do something similar with HTML but in a C# Windows Forms application.
What I wanted to do was to generate some contents based on some database tables and send them out to the printer. The contents had to fit into A4 papers.
After lots of trial and error I measured the maximum size of the contents based on their size, place etc. and wrote the numbers in the CSS portion of my HTML.
With that I could get a nice result. Still some slight errors on some inputs, but that worked for me!