I stumbled upon a German ecommerce site that seems to manipulate via filter all product images' background on the fly and I need to know how that works.
Original URL with exmaplary product image:
https://toom.de/p/kapp-gehrungssaege-hm80l/1500896
If I inspect it this url with some variables is given and obviously the "more or less" white background of product image is changed to a consistent #f5f5f5 gray tone.
https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg
I need to know how this is working.
I always have problems to make nice product photography with consistent white background (255 255 255 / #fff). So, I think this way of manipulating background via filter could be very handy.
I asked the good programmers I know about this and showed them the toom.de website but no could tell me how they made that....
You can use css filter property if you are not going with service what they using , but you need to manually set the percent to fit in to your background.
img{
filter: invert(4%);
}
if you want to know just inspect their content where they use image and use following code.
HTML
<img class="a-picture__image" data-js-picture-image="" src="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" srcset="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" alt="hauptbild">
Css
.a-picture__image {
width: 100%;
height: auto;
filter: invert(4%);
}
They have written an service to change image based on query string what you provide with image source based on that they return back the image as response .
For example check i have changed the query string for width you will get to see the differences.
Original what you given : https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg
and i changed query string width:160: https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=160&grey=1&format=jpg
check the differences
Related
Is there any way to resize the image and reduce it's weight in Angular/TS or in CSS? I mean something like 'picture' tag in HTML 5.1.
Resizing the image on the frontend won't change it's weight, as the full image has to be retrieved from the server anyways. The 'picture' tag isn't able to do this either.
The only thing coming close to what I believe you want to achieve is this Angular directive I found online:
https://github.com/oukan/angular-image-compress
This also only compresses on the client side and won't change the weight of the image retrieved in the first place.
I am sure you guys must have seen that font resizing option on some website where they display alphabet "A" in small, medium and large sizes clicking on which changes the font size of website. I have two questions:
What is that thing called actually? Like if there is a term to describe it?
What arguments can I give against using this on website? One of the client has asked to incorporate it in website and I don't see any real benefit in using it so what arguments can I give to client against using it?
It is called "font size change options", or "font resizer".
Here is a simple and minimal 5 lines of code jQuery tutorial: http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html
A bit of the code that enlarges the font size:
newFontSize= parseInt($('#content').css('font-size')) + 2;
$('#content').css('font-size', newFontSize);
The user could just use CTRL+ in browser. The problem is that the final user doesn't know this trick.
This is a fast and simple implementation, no need to convince the client against it. I find myself getting hard to see clear small text after 10 hours of programming. Maybe the client has sight problems and needs to address others like him.
"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."
Reference
So to do that you can use a function callback which will return the actual value, then you return the new value.
Like the following.
$("#fontPlusBtn").click(function (){
$("#textDiv > *").css("font-size", function(i, value) {
return parseInt(value) * 1.1;
});
});
Working Demo for Increasing Font Size on Button Click:
I hope this helps you as you described font size change on Button Click.
What is the target group of your client? Adding such feature is generally considered good practice of web accessibility. It doesn't really take up too much space on the screen and doesn't mess with the design but gives users the options to enlarge the text in case they are having troubles reading the text.
I wouldn't try to argue against it but instead find a neat way to implement the functionality.
BBC's accessibility policy is a good read: http://www.bbc.co.uk/accessibility/best_practice/policy.shtml
I'd like to place an icon in the right part of the text input. I'd use a background image with the following CSS setting:
input[type=text].dropdown {
bachground-image: /images/down.png
background-repeat: no-repeat;
background-position: right center;
}
I foresee the following problems:
the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size (if the size is not predictable it will a real headache!)
if the input size will change - I will have to scale the image by my self
if I will need to place one more image on the left I will not be able to do it
Is there any better practices to do such a thing?
the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size
It is common to simply apply padding-right to the element in this case in order to "clear" the background-image. But you do obviously need to know the approximate size of the image....
However, you seem to have a lot of "what-ifs", which makes me think you are over engineering (or over thinking) the problem? Unless perhaps you are wanting to allow users to customise the interface? But even then I think these could be solved in different ways.
if the size is not predictable it will a real headache!
Why is it not predictable? Something like this would normally be solved at the design stage and is very predictable. If you are allowing users to submit images, then you should perhaps resize the image when submitted.
if the input size will change - I will have to scale the image by my self
That will really depend on how the input size changes. If the element simply grows longer then you may not need to change anything. But again, this would normally be something which is solved at the design stage.
if I will need to place one more image on the left I will not be able to do it
Why would you need to place an image on the left and the right - at the same time? I can imagine if you needed to account for right-to-left text then you might need to swap the image placement, but not normally both at the same time?
However, you can actually use multiple background images with CSS3, as long as you don't need to support IE8 and earlier. Ref: http://caniuse.com/multibackgrounds
But if you did have multiple background images, how would you deal with assigning event handlers (which seems to be what you are doing with the "dropdown")? You'll need a separate element.
w3d raises very good concerns. A lot of the "if's" you are thinking about don't seem too common. And if they do happen because you are setting up an environment that will allow it or need it (hard to say until I see the actual environment) then what you should do is use dynamic code to make the adjustments.
Here is an example I made with the most basic way to do what you're doing
JSFiddle Demo
Now, as far, as covering your 6 on the possibility that another image would be inserted, etc. You will need the following logic:
Assuming the user is the one inputting the images you want to stack next to each other. Have the image post to the database
Dynamically echo it with a conditional statement that says if image != 0 then echo as many as you want
Each instance of a below would be dynamically done as I explained above
HTML
<div class="form-group">
<label for="txtDate">LABEL</label>
<input type="text" class="txtcalendar" id="txtDate" placeholder="E.g. mm/dd/yyyy" />
<span>
<img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
<img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
</span>
</div>
I am looking for a way to resize a tables contents using CSS to make sure the contents all show up when printing but yet still keep the text from wrapping for any individual cell. In this example,
<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>
The last td is mostly cut off when printing but all these display as I intended on one line. For example purposes I put the style inline but would be using style sheets. My ideal solution would automatically resize the font to fit still on one line per row without wrapping. Any thoughts would be appreciated.
Controlling the output of printing is a nearly impossible task. You never know the variables of what printer the user is using, what fonts are available, what settings are set, etc.
I've had this issue before, and the most clean solution for the user was to convert the table to a .pdf, which will render nearly identical across machines and printers. While it may not seem so easy to do from a technical standpoint, there is a pretty straightforward solution: datatables.
Using the "table tools" plugin, you can create a .pdf formatted version of any table with just a few lines of code and the addition of a few extra files. Here's a working demo In a nutshell, provided your table is correctly formatted and not insanely large (make sure to use <thead> tags) then you should just be able to upload the required files, apply the demo code with a change in the selector to match your table, reference the swf file that facilitates creation of the .pdf, and it should work smoothly. Most issues I've seen in setup have to do with incorrect reference to the swf path.
Voila, printable, simple code.
Maybe you can try with
#media print
{
table.datatables {font-size:10px} /*Type the value that you want*/
}
You can check a print settings in your Chrome Browser by using "Find the Scale Fields" in "Print Options" and adjust the page size on your requirements.
This is not a full-proof solution, you need to check it which values will works for you.
Use CSS transform scale property.
In my case my table width was more hence I did this using javascript.
Since my width was too much, I scaled it lower and adjusted the margin and after javascriptwindow.print() I bring it back to the original state.
document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");
You can also do it using same property in CSS.
#table {
transform: scale(0.8); //Adjust this accrding to your need by printing
margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}
Since now, in the design of one of the websites I work, I've been using a graphic to decorate the header section that consists in a diagonal division white in the lower side and transparent in the upper side. The result is this:
If I change upper color, as the image is transparent in its upper area the effect seems perfect:
Now, I need to allow users to change page background and that's the problem:
Background changes to red, but the image I used to decorate the header doesn't change.
Is there any way to allow users to change the background without ruin the header decoration?
Note that store a copies of the decoration imagen in different colors is not an option due I allow users to choose any 24-bit color. Also, to change the image in real time like explained here isn't an option due multiple users may access the same file.
You could try changing the image in realtime using data URIs: https://developer.mozilla.org/en/data_URIs
With a data URI, you can do something like the following: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. The image can be changed dynamically in JS by generating a new image and setting the src attribute to the new data URI.
You will need to find a suitable format for generating images in JS though. I have used pnglib.js before, and it works, but it might be slower than you'd prefer. You might need to test some different libraries and image formats to see which can be generated quickly. Also, make the image as small as possible - should be only the area with the diagonal split, the area to the right can be done with a div instead.
Alternatively, you could generate a unique image server-side via a script. Make a script that takes a GET parameter for the background color and generates the appropriate image (for PHP, you can use GD or IMagick). Advantage is that the server may generate the image and send it to the client quicker than the client could generate it in JS.
Add the following to the div with the background image:
position: absolute;
top: 0px;
right: 0px;
The problem currently is that the background cannot overlap your div with the background image. Adding the position: absolute gives your div some kind of "ghost box" model, thus allowing the background of the body to overlap it.
P.S.: you can also play with z-index if you want to.