I am working on a website with golang as my back end.
I would like to load webpages with a particular background image inside of a div depending on the full URL. I have gotten HTML templates to work well and I am able to dynamically change text and a few other things based on this.
However in HTML5, as you cannot define the background image of a div in anything but CSS, I would like to know how I might have this image change dynamically as well. I do not know how to dynamically change CSS with go(using net/http and html/template), or even if this is possible. Thank you
Related
What ways are there to prioritize an <img> to load as soon as possible, with highest priority.
I am using the image in the middle of a quite large html document and im trying to get it loaded asap and also prevent layout shifting.
i have added the attribute and value loading="eager"
i have compressed the image as much as possible
i have added fetchpriority="high"
i have set the height and width
brotli enabled on server
Would i be able to load it first in the <head> tag some how? i know it will not be used there obviously, but it is higher up in the code? would it be downloaded and parsed before say, all external css, js and font files?
would loading it somehow via javascript be quicker?
is any of the ways above wrong? any other tricks?
When developing a website I often use background images for banners. When this website is in a CMS, the images paths come from the database (user uploaded). So I ended up using a style="background-image:url(myImageFromDB.jpg)"
However, this becomes an issue when I want to replace this image with smaller versions of the same image.
A lot of tutorials/guides out there, assume that you already know the path to this image, so you can just use #media queries to easily replace them. But if the path is dynamic, then I can't use media queries (unless they are dynamically written in the head of the document).
So how are people dealing with this issue?
Not using background-images? (using instead?)
Dynamically writing media queries at the head of the document?
Using JS to dynamically load the correct images?
Resizing images dynamically on the server?
My downsides of each method:
1. Downside, can't use some good options such as background-size:cover
2. Need to write server side script figure out what image to load
3. Probably the best option, but need to wait for the JS to load first
4. I have tried this, but without much success.
one thing you can do..
You can assign its width using view port width like width:90vw;.
1 vw=1/100 of total view.
so you need not change the image for small screen.
you can just simply add this in your media query and default css also.
width:90vw;..
you can change width as your requirement.
so it will act dynamically.
not need to change the image.
hope it works.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
I am building a website but since I'm more of a programmer, I don't know too well how to decide between using an HTML <img> tag or using CSS (background-image) to do the following:
The user needs to be able to switch languages. To do that, language flags with appropriate links are put into the footer of the website (the footer will always be visible since the pages are so small, and there isn't really a good place to put them somewhere in the top).
The links actually refer to other pages on the server, it's not some kind of session variable that changes because I'm working with a simple CMS.
I found an excellent question here that describes most of the scenarios, but I'm not sure about this one.
A much more experienced web designer even changed my logo to a CSS image because it contains an anchor to the home page and also a H1 element that should not be visible, but "findable" by screen readers (I cannot set display:none but he used text-indent and a high value). I doubt about his solution but I guess I might change it back to how I did it.
If it is a clickable link, keep it as an <img> with a proper alt text. If it is an icon beside some text, set the flag as the background-image of that link with no-repeat and a proper left-padding.
The benefit to using the css | background-image: /image/path.png; | method, is that if in the future you need to change the image, specifically the image path. You will only need to make the change in the CSS style sheet. This saves a substantial amount of time.
If you choose to use the HTML | | method, and later need to change the image(*) or image path you will need to make the change to every page. Unless you are using a CMS or similar platform that uses the same instance everywhere. Alternatively you need to make a blanket change you can overwrite the image with the new image as long as it keeps the same image path and image name. However if you need to change the path or image name you will need to change it everywhere.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/