I'm using a Bootstrap template, but cannot get the slideshow working properly as demonstrated here - http://getbootstrap.com/2.3.2/examples/carousel.html
My code looks like this:
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2></h2>
</div>
</div>
I want to add my own image instead of the URL image that is already there.
If you're working locally you can change that URL to wherever you are saving your image. For example, I like to put my images in a folder called "img", so my code might look like this:
<div class="fill" style="background-image:url('img/my-image-here.jpg');"></div>
Related
<div class="image1">
<img src="../images/Igbo Calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy quiz .png">
</div>
I uploaded my html, css and image files on Github. When I view the website on my Github page, the images do not show as they do locally, only as icons
I removed the dots and the forward slash before the 'images' to see if it helped, it did not. I searched similar questions here on Stackoverflow but the suggestions I applied did not solve the problem.
github page: https://ijeoma7.github.io/website-two/
Thanks for your time.
First, I would avoid using spaces in file names when it comes to the web--use dash (-) or underscores (_) if you want to separate words in file names. For example, try changing your html code and file names to the following:
<div class="image1">
<img src="../images/Igbo-calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG-directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy-quiz.png">
</div>
Second, I would double check that the image relative paths and filenames you have specified is correct in the uploaded site. (Single ./ (or no prefix) represents the directory you are in, ../ represents the parent directory, ../../ represents the gradparent directory, and so on.)
you upload images directly you not upload images
so this "../images/Igbo Calendar.png" to "Igbo Calendar.png"
View
<div class="image1">
<img src="Igbo-calendar.png">
</div>
<div class="image2">
<img src="RCCG-directory.png">
</div>
<div class="image3">
<img src="Igbostudy-quiz.png">
</div>
Trying to add the 4 dry out logo to this html template. Can anyone correct what I did wrong? It shows this on the site:
This is a very small section of the code where I have the image placed in the body.
<body>
<!-- Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Page Content -->
<div class="container-fluid tm-main">
<div class="row tm-main-row">
<!-- Sidebar -->
<div id="tmSideBar" class="col-xl-3 col-lg-4 col-md-12 col-sm-12 sidebar">
<button id="tmMainNavToggle" class="menu-icon">☰</button>
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<!--ERROR IMG --> <img data-image="4 Dry Out Logo.jpg" alt="4 Dry Out Logo">
<li>
Unless there is other code acting on your img tag, you need to use the src attribute to specify an image URL. Spaces in the image name could also be causing an issue.
You'll want to open up your web browser's developer tools and see if you can see where the image is requested in the network tab. If the URL is returning a 404 error, you know that there is an issue with your image's path. If the request for the image isn't being made at all, then there is an issue with your img tag or the code that is supposed to cause the request for the image to be sent.
<img data-image="4DryOutLogo.jpg" alt="4 Dry Out Logo">
First you need to consider renaming the image and remove white space from the name.
Second , you have to use the code as below
<img src = "../yourimagename.jpg">
Finally ,
You have to make sure that your image exist with in the server path.
I suggest you to first open the image via url link , once its open copy paste that url into the src code .
Good luck
I am trying to link an image to a website i'm building but i am having trouble linking the img. It's on my desktop and i believe i've taken the right steps, but i keep getting a "broken image symbol". Please take a look at the code and let me know if anything is wrong.
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
</div>
<div class="container">
<div class="navbar-header">
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')">
</div>
<div class="row">
<!-- insert rows here -->
</div>
</div>
</div> <!-- End of Container -->
</nav> <!-- End Nav Bar here -->
Ok first moan - indent your code (unless its just from copying and pasting into SO and it messed the format, in which case - sorry for the moan xD)
I have a feeling, the image isn't showing because it's 404'ing - if you open up the browser console / firebug it should show you if it's 404'ing
secondly, you're using images src correctly but is the file structure? Should be something like:
html
index.php
somepage.php
img
img1.jpg
img2.jpg
this means that if you called img in index.php like:
<img src="img/img1.jpg" class="some-class" id="some-id" />
it should show - let me know if it works :)
(notes)
don't have to be a .php file - tis just what I'm used to
You are not closing your tag properly! Do this:
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')"/>
Also, make sure that your path is correct, you are using a relative path for your project. Can you post your project structure?
I have a template where the images are full width & the post content is wrapped in a container. The container sets the width of the content but the image is full width and in a separate container. I was hoping that in Ghost I could wrap the markdown image with some sort of code to end a wrapper and what not. Heres the code output i'm trying to achieve:
<div class="container">
<p>Something</p>
</div>
<div class="blog-post-image">
<img src="image" />
</div>
<div class="container">
<p>Something</p>
</div>
I was hoping I could add some code so that Ghost would add output the image markdown code something like this:
</div>
<div class="blog-post-image">
<img src="image" />
</div>
<div class="container">
Is this possible? I would add the code into the posts manually but I don't then want to in 6 months change the template and have to edit a load of posts.
you can include parts of HTML in your MD, so just create some in your article where you need to special format anything
I am new to Tumblr. I have such problem:
I am using Indy theme. When I post several photos, by clicking it acts like slideshow, I mean it's posted as {block:Photoset}. But when I post one photo, after clicking, it redirects me to another page.
All I want is to make even one photo act as photoset and after clicking be displayed on the same page.
Thans in advance.
Here is part of the html of the theme:
{block:Photo}
<article class="post-photo" id="{PostID}">
<div class="post-content">
{block:IndexPage}<img src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" alt="{PhotoAlt}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}{/block:PermalinkPage}
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photo}
{block:Photoset}>
<article class="post-photoset" id="{PostID}">
<div class="post-content">
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
{block:Photos}
<div class="photo-data">
<a rel="post-{PostID}" href="{PhotoURL-HighRes}" {block:Caption}title="{Caption}"{/block:Caption}>
<div class="pxu-photo">
<img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
</div>
</a>
</div>
{/block:Photos}
</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photoset}
It looks like you might be able to use the already existing Tumblr lightbox by wrapping your image in the same div -
<div class="photo-slideshow">
If that doesn't work then you could use a third party library to make it happen, for instance, here's a pretty simple lightbox -
http://lokeshdhakar.com/projects/lightbox2/
After you get that linked into your code, then just use their docs to make your images load into the lightbox!