3/8 images for my projects on my github portfolio arent showing up on github pages but do work when I open a local browser.
div class="cbp-item development">
<!-- data-title attribute will be use to populate lightbox caption -->
<img src="assets/img/streak.png" alt="custom alt 1" class="img-fluid"></a>
<div class="cbp-hover">
<h4><a class="cbp-lightbox" data-title="Portfolio One"
>Streaking</a></h4>
<p><a target="_blank" href="https://github.com/dodgen92/Streaking">React JS memory game</a></p>
</div>
</div>
This is a snippet of a broken image (the indentation is cleaner in the actual code), I'm quite baffled as they're all essentially a boiler plate of each other. Any help would be greatly appreciated
Make sure to capitalize the image's file extensions.
Related
Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
I should note that the website I'm working on is meant to be pretty simple.
The way I have my website files organized is that under one folder containing the entire website, I have the .html file for the home page, which contains links to different pages inside it for photos, videos, etc. Each of these pages have their own folders.
Attached here is the code I have for one of these pages, meant for my photos. I learned from this thread (Link not going back to home page) that if you just have:
Home
That the link will take you back to the index/root directory.
(Is this different from the home page? Sorry, I'm a noob.)
Although, when I originally had it has just the code above, the link takes me to this weird gray page that just shows all of the files of my website (is that root place or whatever it's called?).
Although, I see that I'm able to from there just simply add the .html file for my home page in that link directory, so the code I have now seems to work.
Is this an okay way to have a link to go back to the home page? Thank you for your time.
<!DOCTYPE html>
<html>
<style>
div.img {
display: inline;
max-width: 650px;
}
</style>
<body>
<div> <!--Home Button-->
<a href="/homepage.html" style="float: right; margin-right: 100px;">
Home
</a>
</div>
<div class="img">
<img src="1.jpg" width="384px;" height="384px;">
<img src="2.png" width="384px;" height="384px;">
<img src="3.png" width="384px;" height="384px;">
<img src="4.JPG" width="384px;" height="384px;">
<img src="5.png" width="384px;" height="384px;">
</div>
</body>
</html>
If it works and you are okay with having the path /homepage.html as your home page, then it is a perfectly good and logical way of linking back to the home page.
As Kei mentioned in the comment, it is highly advisable to rename this file to index.html as most web servers and browsers will default to this file name as the root. For a lot of people, it's more desirable to just go to a domain (ie: mydomain.com) as the home page, rather than having to type in mydomain.com/homepage.html.
All this to say, if you rename your home page file to index.html and serve this website through a web server of some sort (Apache for example), then you can simply use / as a path and it will bring you directly to the home page. I know that you mentioned that you are a beginner, so this may be slightly outside of the scope of what you are asking, but just letting you know for the future. Good luck!
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
I have searched a lot, but I cannot find a similar problem on the net. Or probably, I have my keywords wrong, but here's the problem:
I created a website which has a twitter twit button, and it works in all browsers, in all languages (that we've checked). So here's the predicament, we have foreign bought laptops and when they click on this button, instead of the usual twitter pop-up window allowing you to twit the page content, it gives a "Page not found" text on the pop-up.
I have declared UTF-8, i have set the html lang document to that specific language, but it's not working.
Here's the code for the button:
https://twitter.com/share?url=google.com&text=【CNE1%20５周年記念】特別サイトをシェアして超豪華特典付きの１週間留学を当てよう！%20詳細はコチラ:http://www.cne1jp.com/campaign/%20＠CNE1Japan%20#cne1'>
<div class="twit">
<div class="twitlogo">
<img src="images/twitterLogo.png" />
</div>
<div class="twitcon">
<!-- <p>Twit the love on Twitter!</p> -->
<!-- <p>Twitterでつぶやく！</p> -->
<div class="twc-t">
<div class="twc-tt">
Twitterで<br>
ツイート！
</div>
</div>
</div>
</div>
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Would greatly appreciate any insight on this. Thank you in advance!
I have this htmls on a page which renders a photo album.
As you can see that there are 3 <img> tags.
The first two is under <li> which has display:none. But the last image is visible as it has style=''.
My question is: during page load will the first 2 images be loaded with the last image even if their container has display:none?
<div class="gallery">
<ul id="PhotoContainer">
<li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
<img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
<li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
<img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>
<li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
<img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
</ul>
</div>
If by "loaded" you mean downloaded, then yes. Resources with display: none styling are still fetched, just not rendered. In fact, this is a valid image pre-loading technique, as discussed in this article.
To verify, you can load your page and look at the downloaded resources tab in Chrome Developer Tools or Firebug.
It depends on which browser is loading the web page, I know google chrome loads all images, I expect most other browser are doing the same...
All images will get loaded into the cache, and technically the webpage. However, the css hides the 2 images before they come in contact with the human eye.