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.
Related
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
Needing to building a HTML form in the format of a 1099-MISC document. I would need to know how to format all the specific boxes that are on the 1099 form itself and have text boxes that would allow for data entry. Given the possible complexity of this task, where do I start?
This is for our enterprise content management (ECM) system. Our ECM would place the data into the respective boxes and and then overlay a 1099 form image on top of the entered data, thus filling out the form.
I think we need more information about what systems you are using to make this. Is it pure HTML with nothing else? Any frameworks for the data/model management?
If it's pure HTML and you literally want to "overlay" the boxes on a 1099-MISC image, something like a .png, you could start with a that has the background-image set to the 1099-MISC document image. From there, you would be adding 's inside this parent div with their positioning set to the appropriate place to position them correctly over their respective fields in the 1099.
Each of those 's would likely contain something like an with the background/borders set to transparent to make them seem like part of the 1099 image.
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>
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
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.