I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.
Related
I am working on a Shopify website, I want to track how users interact with images on the product page. let's say a user sees the first image (a tag should fire), then he scrolls on the second product image (another tag should fire), and so on.
So I can know how many images on average the user sees on a PDP, what is the conversion rate of users who see 2 images vs 3 images, etc. (On GA)
This would require a custom javascript event which has to be passed on GTM, I looked at different resources available but could not find the right way.
Any help with how to proceed with this, or resources I can refer to would help.
I think you can try the element visibility trigger.
Here is the setting detail
Add a good name about it.
Choose the CSS Selector since you have multiple images.
Set the right CSS Selector. If you don't know how to set it. You might need to give us the URL of your website and we can provide you the selector.
Choose Once Per Element
You can decide when the image shows more than x%. Fire the trigger.
Since you need the order of the image. You can refer about this
#GTMTIPS: GET POSITION INDEX OF VISIBLE ELEMENT
If you have further question. Feel free to leave comment and I'll update accordingly
I am trying to copy paste some stuff from some website which I want to automate. Here is my manual workflow:
There is a master webpage which contains set of links.
When I click on one of those links it opens another (say topic page) page with set of tabs.
I click on one specific of those tabs which loads a page containing several buttons with same html-css applied to them.
On click events of those botton calls a javascript function passing four integer parameters.
The function results in generating a separate popup window with some small content which I then print as pdf.
The issue is that the website blocks right click and text selection. And the popup window contains a image which I print as pdf by right clicking on titlebar and selecting print as pdf. When I checked the source of popup, I found that it uses
"data:image/png;base64,<source for image>"
as value for src of <image>.
Now the big question can I write some script which can run when either master page or topic page to automatically click on buttons on them and get those images saved either directly as png or pdfs? I am good at programming languages java, groovy, python, C#... Also explored javascript a lot. But that's many years ago and really lost in touch with JS. Can I do this with say greasemonkey or any other way. Any pointers (possibly detailed) will be helpful...Or even some small pseudocode which I can paste in console of topic page which will do all clicking of buttons and saving image from the popup, so that I don't have to do button-clicking-&-saving-image manually. This will also serve a lot since there are more buttons per topic page instead of number of topic pages themselves.
Update
Well I know this question is not at all specific, so here is my initial hurdles, since I have started to try it out:
given that I am programmatically call all those function on onclick events, how can I get hold of popups in source? That is, how can I reference the popup that is opened by function call in js?
Hellow everyone,
I'm having a problem on the site where my images' widths are not being calculated properly (they're not showing either on first load as well) inside jCarouselLite plugin.
I wonder if this has something to do with the fact that they're loaded from the CDN and don't have a proper content-type set (or something similar). (Example apartment)
If you check the List of apartments, you can go inside each one by clicking on the name or on the picture. It's INSIDE that pictures do not show up for me in any browser I've tried. If, however, I refresh the page, they show up fine.
Can anyone suggest what may be happening here?
Consider an example page like this
Now, it displays all the image thumbnails. I click on the thumbnail and then I right click on larger version of image and copy the image location. Is there any way to do it programmatically. I have tried to use goutte to extract links after scraping webpage but it does not extract any link may be because the page is generated dynamically.
Is there some other way to do it?
$crawler = $client->request('GET', 'https://www.facebook.com/TedTheStoner2/photos_stream');
$crawler->filter('.uiMediaThumb')->each(function ($node)
{
echo $node->attr('href').'<br>';
});
You really should use the facebook graph api for reading those pictures.
That way you will be able to get a complete list of images and then read every single image for more details.
You will not be able to crawl the picture gallery the way you've tried without using a javascript-enabled solution as the pages are rendered by JS on pageload.
I'm attempting to implement an image upload tool on my website, similar to how Google has done their image upload search. This would need to be able to have images dropped into it; have urls pasted into it; or have a user upload it from their own computer.
Another related question, how does Google have the selection method change when you click 'Paste URL' or 'Upload file'?
images.google.com for idea source.
Thanks in advance.
I believe Google spent several years developing the algorithms behind searching for images with other images, so if this a website you are developing for yourself, I'd explore other options. Otherwise, tell your boss it's impractical.
As for the method change, I imagine (without looking too closely) that they overlay the camera icon on the input, and on click, displays a <div> or other container element over the input field, which can then contain alternative input methods.
When the user clicks on Paste or Upload, it replaces the content of a sub container with the relevant HTML using jQuery or whichever JavaScript library it is that they use.