I am trying to create a portfolio by combining two themes.
The first theme and basis for the project is this one. I like the whole moving stars effect so that is why I decided for this one.
The second theme is this one. From this theme I want to take the grid system with the cards and implement it into the first one. .
To do this, I have copied all the files from the second project that I think are relevant into the first one and I kind of got what I want. But, somehow the full effects are not implemented. My project can be accessed from this repository.
To show an example:
One post looks like this. Ideally it should be only one picture which when opened should show the full version of the post. I tried to copy the css variable into the html file in a <style> COPIED HERE </style>.
I am an absolute beginner and my goal is just to get a working webpage. Could someone hint me why I am not getting the expected effects?
Just a guess because your post does not include your HTML and CSS and your page isn't showing the non-working sample site from your screenshot.
The grid with the images uses the Bootstrap grid system as you can see on the col-sm-4 below.
Here's the file that includes bootstrap, _includes/js.html:
<!-- jQuery Version 1.11.0 -->
<script src="{{ " js/jquery-1.11.0.js" }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ " js/bootstrap.min.js" }}"></script>
...
You may need to inspect the grid part even more:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal-1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/cabin.png" class="img-responsive" alt="image-alt">
</a>
</div>
...
Related
I've been trying to work out the widget feature, however I'm unable to get this working as expected. This is my header as of now:
<div class="col-xs-6 col-md-6">
<div class="widget-header">
<span class="widget-caption header-title"> User Groups </span>
</div>
</div>
It's actually been irritating since I'm unsure what I've been doing wrong, all I want is the default widget shown here:
http://beyondadmin-v1.6.0.s3-website-us-east-1.amazonaws.com/widgets.html
Please make sure that you've referred the stylesheets of Beyond template.
<!-- Beyond styles -->
<link href="assets/css/beyond.min.css" rel="stylesheet" />
The location of href may vary according to your folder structure.
Ref URL: http://apps-empresariales.com/conta/dev/docs/
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
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.
Hello I'm new to web design,
I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.
I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?
I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images.
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
</div>
</div> <!-- End of row -->
jQuery on the page
$(".img-responsive").lazyload();
Thanks in advance
The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.
For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)
The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.
I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.
You can use justlazy as follows:
1. Define a placeholder:
<span data-src="path/to/image" data-alt="some alt text"
class="justlazy-placeholder">
</span>
Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.
2. Register lazy loading via javascript
Justlazy.registerLazyLoadByClass("css-class");
I'm trying to make responsible grid with thumbnails using bootstrap and knockout. Currently i have the next html:
<div class="row">
<!-- ko if: toys().length == 0 -->
<div>No toys in category</div>
<!-- /ko -->
<!-- ko foreach: toys-->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
<a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
<img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
<span data-bind="text: name"></span>
</a>
</div>
<!-- /ko -->
</div>
Sometimes i'm getting correct grid. But in most cases (ofcourse depending on size of images and length of item's names) i've got something like this:
.
How to properly align items? The most simple answer is to set height of images to constant, but then the proportions of images are ruined. More over, i want images resizing including height. Text are limited by 2 lines per image.
Live demo: JSFiddle
I suggest you to take a look at Gridalicious plugin - it's created exactly for this type of situations. It's also pretty fast, and can be easly adjusted for your needs with built in configurable parameters as well as simply editing uncompressed version of plugin accordingly to your needs.
http://suprb.com/apps/gridalicious/
For now, i solved problem using jQuery plugin mentioned in comment by Artanis. I've also have to use plugin imagesLoaded because i have ajax call which loading images. In result i've written next code:
window.imagesLoaded(".previewGridItem", function(instance) {
$(".previewGridItem").matchHeight();
});
I do not think that it's the best solution, because now i have 40kb (12Kb minimized) libraries only to align images. But for now i can't find a solution only with css.