Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Say, instead of saving Boolean in database, i'll just make client side of webapp check if image exists and if so, then display it, otherwise - default image.
Are there any negative consequences? For SEO?
What if i'll not even bother about "check if exists requests"? I'll just put default image beneath the desired one and if image is not exists, then client-side js will remove the remains of the image tag.
Default image behind broken image linke: I can't find a reference but I suspect Google might give a tiny penalty for broken image links.
A good way to do your "show default image if ideal image doesn't exist" is lazy-loading, and there are libraries to do it: you set all your images to start out as your default image, and then tell the library to go and fetch the real image. So just pick a library that fails gracefully and does nothing if the real image doesn't exist. Here's one that looks promising:
http://dinbror.dk/blog/blazy/
(Don't be put off by all the bells and whistles - for your case, implementation will be very simple. There's bound to be other simpler libraries out there.)
As to SEO penalties/benifits of lazy-loading, see: https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo However note that the answer is outdated. These days google runs scripts, so should be able to index the images.
Lazy loading and SEO: see also: http://dinbror.dk/blog/lazy-load-images-seo-problem/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
Improve this question
I would like direction on how to display the content of a PDF in the web browser and allow the user to annotate the content and save the position(coordinates) of the annotation in a database so it can be re-used when the page is reloaded.
Display the PDF is not an issue. However how do I go about drawing a circle or any other shape and save these annotations into a database?
I found some licensed products such as PDFTron but its very expensive.
I've been doing some research on this topic but it doesn't seems to be a very straight forward thing to do. Maybe I am missing something here.
Not concerned about the tech-stack here, javascript, node, ruby or python it doesn't matter. Even if the pdf will have to be converted to HTML or something else that is fine too. The end goal is to allow the user to annotate the content and save.
Can someone point me on the right direction to achieve this?
Thanks
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Suppose that I have a blob of HTML, CSS and JS that I wish to repeat on a page. Logically this blob of HTML/CSS/JS is a "control" and I wish to repeat this control on the page. Inside this HTML/CSS/JS blob are some IDs, such as tab1, tab2, and tab3 and the JS refers to tab1, tab2 and tab3 using jQuery.
Now of course this works fine when it is repeated only once. But in order to repeat it more than once and have it not break, I need to change the IDs to something like instance1_tab1, instance2_tab1, instance3_tab1 and so on and also change the Javascript as well.
Now of course I can do this but it feels painful.
So the question is - is there a modern way to simply isolate each of these repeats without using an iFrame?
Right now I am using iFrame to separate them and it is kind of gross so would like to make it better. Any help would be greatly appreciated.
Update: Edited to remove the word "best". It is not very helpful how the moderators are closing the question as "opinion based" when it is clearly not. This question does not have a good answer currently on Stackoverflow and is a valuable addition to SO
I think, you could look into Web Components. In particular Lit Element library. Web Components encapsulates HTML, CSS and JS into single custom element. As example, you can have <tab-group> and <tab-group-tab> HTML elements. You can pass objects as attributes as well.
If you don't want to use any library, it is still possible, but requires bit more boilerplate.
Browser support is pretty good already and many large companies are adopting web components at scale.
There are link to some examples - https://stackblitz.com/edit/open-wc-lit-demos
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I have a requirement to build a website where the user can choose a design from a standard template and a number of optional parts. So for example, it could be selecting an outfit, where there is a fixed template image of a person, and the user selects different colour trousers, shirts, socks etc from a scrolling list of images. When the user selects a particular item from the list, the image appears on the template giving an indication of the overall look.
It doesn't have to be too fancy with any moving images or transitions, but just the ability to overlay fixed images onto the template.
What would be my best choice of technology and way of going about it? Standard HTML? Css? Javascript? Something more server orientated such as JSP? Would appreciate any input.
You can solve it in many ways, it mostly depends on your requirements and what you're comfortable with doing.
Personally I would have done it with plain javascript based on the description you gave.
Requirements:
Change images during runtime.
JavaScript does a good job with this.
Predefined coordinates for where the overlay needs to be positioned.
Some type of storage for the coordinates, simplest possible would be hardcoded values in your script.
Ability to position the image as an overlay at said coordinates.
CSS with position: absolute; can be used for this.
Image stacking and index logic.
Can be done with JavaScript.
This is the simplest solution to the problem given. If you have more complex needs like zooming or resizing, you may want to check out <canvas>.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm a web designer and i'm currently designing a website that includes images. I was wonder if anyone can tell me what it is called or if you can guide me the right way so i can do some research on my own and learn it.
Basically what i need to know is how can you lets say if the user click on the image it will bring them to another html with that image plus that image information
A current example... wallhaven.cc if you go there and if you click a wall paper.. every wallpaper has a specific link. is that generated or does that mean that literally EVERY image on that website has a web page of its own?
Yes it is possible to do it both ways you can use what is called dynamically generated web pages or you can create each page manually.
So if you were to go with the dynamically generated web pages you would probably want to consider looking around a JavaScript Template Engine. I currently am using this one while I build my own. http://idangero.us/template7/. That is the best JavaScript Template Engine you can get. Plus it is free and Open-Source. But if you go with creating each page manually you will have a lot of work on you hand! So personally I would choose using the JavaScript Template Engine!
Have a great day.
Joseph Shenton
http://timedevs.net/
There is one page for image details, the number at the end of the link is the image id, which tells the server which data to output.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm inspired by app.thefacesoffacebook.com and would like to build similar thing with Yammer (kind of social network) profiles for my organization.
I have already scraped the data I required like profile id, image URL and others in stored in the data base. But how to display the images in the webpage like app.thefacesoffacebook.com? Is it normally getting the URLs from DB and displaying images with IMG tag or any other trick they are using. I'm expecting to see the similar behaviour when you click on one image it should zoomin. I'm not really sure about to go about this, any ideas would be helpful. I hope information is enough to guide me, let me know if this makes sense.
Thanks
This is a question whose answer would really be immense, but from a bird's eye view, the most common way to implement this would be to employ pagination.
Pagination is a "lazy loading" scheme in which groups of images are loaded in predefined amounts. For instance, you may see a group of 20 images onscreen, but when you scroll to the bottom of those 20 images, an event is fired and the next 20 images are loaded and appended to the window.
If you can imagine in the olden days, before dynamic html, you would have had separate "pages" for each "chunk" of images. To see the next 20 images, you would click "next". Modern implementations are not much different in practice, only that they use JavaScript to asynchronously load each chunk automatically, and append it to the current page.
A small, abstract example might be as follows:
window.addEventListener("scroll", function() {
var i = 0;
if ( scrolledToBottom() ) {
i++;
loadNextImageGroup(i);
}
})
For more information on pagination and pagination techniques, check your favorite search engine for "pagination tutorials".