Ok, so here is what I am trying to do:
- I am building a portfolio slider that shows images for all of my projects.
- Each project has multiple images that I would like to show on its own slide.
- For example, after you slide through project 1's images (each on their own slide), the next slide will start with project 2's first image and so on.
- I can do this the long way, but I am trying to group my projects into their own objects, including their name, the client it was for and the images associated to that project.
- My end goal is to have an organized object, but all the images are gathered and shown in the slider one after the other. When a new project's image is shown, I also would like to know which project object I am on so I can get the project name, index and client it was for, so that I can change info on the page.
- I hope this is not too confusing.
Here is what I have right now for the object
JS:
mainApp.controller("mainController", function($scope) {
$scope.portfolio = [
{name:'Portfolio 1', image:['images/test_1a.png','images/test_1b.png','images/test_1c.png'], client:'Client 1'},
{name:'Portfolio 2', image:['images/test_2a.png','images/test_2b.png'], client:'Client 2'},
{name:'Portfolio 3', image:['images/test_3a.png','images/test_3b.png','images/test_3c.png'], client:'Client 3'}
];
});
This is what I was starting to try when I got stuck. Obviously, this is not what I need, but it let's you see where I am trying to go.
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
Any and all help it super appreciated!
You're nearly there.. Your issue is using src instead of ng-src.
Try:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" ng-src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
Related
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images.
The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one.
Here is the code of the component ProductCardComponete.vue that is where I develop the code itself.
<template lang="html">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card">
<header class="bg-dark padding">
</header>
<div class="justify-content-center">
<!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension">
-->
<img :src="'/productos/images/34.jpeg'" class="card-img-top">
</div>
<div class="card-body padding">
<h2 class="card-title">
<a :href="'/productos/'+product.id">
{{product.title}}
</a>
</h2>
<h4 class="card-subtitle">{{product.humanPrice}}</h4>
<p class="card-text">{{product.description}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
product: {
type: Object
}
}
}
</script>
Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one.
Finally here is a link to the github Repo of the project just in case.
Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
We are attempting to move sites to Jekyll, and have a BS4 theme. In order to make it user friendly to the content managers, I've placed the following in my page layout:
<div class="container">
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
</div>
However, I'd like to create a liquid tag or filter to allow for full-width images to be injected into the middle of the page. This would close the three container divs above the image, write out the image, and the create new divs below, and continue to write the markdown file. i.e.
{% fullwidth xenia-map.png %}
would produce something like this in the middle of the page:
</div>
</div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
I have been able to create a filter and a tag (class) that will do 80%, however neither will write out closing tags at the beginning of the output. I just get the <img> tag.
Here's my class:
class FullWidth < Liquid::Tag
def initialize(tag_name, image, tokens)
super
#image = image.strip
end
def render(context)
"</div></div></div><img src='uploads/#{#image}' class='img-responsive'>"
end
end
Liquid::Template.register_tag('fw', FullWidth)
Your problem looks like an escaping issue.
Although I like the simplicity of your solution, I would consider two alternatives. The first ('include' solution) because it is easier to implement (anyone can make that one work). The second one ('javascript' solution) because it will allow your content editors to use a regular/graphical markdown editor and it will keep your markdown clean and reusable for other purposes.
'Include' solution
Just put an include in your markdown/html:
{% include fullwidth.html image="/uploads/xenia-map.png" %}
... and use this 'fullwidth.html':
</div>
</div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
'Javascript' solution
Use this markdown (or let a regular/graphical markdown editor generate this):
{: .fullwidth}
... and use this jQuery:
$(document).ready(function(){
$('img.fullwidth').each(function() {
var img = $(this).parent().html();
$(this).unwrap();
document.body.innerHTML = document.body.innerHTML.replace(img,
'</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
});
});
Is it possible to use viewPorts with the same component, without it being instantiated twice. E.g.
config.map([
{
route: 'route1',
name: 'route1',
viewPorts: {
default: {moduleId: './route1-module'},
heading: {moduleId: './route1-module', view: './route1-module-heading.html'}
},
nav: true,
title: 'Route1'
}]);
route1-module is been instantiated and attached twice. I need to avoid it.
It sounds like you want to use the layouts feature that will be present in a later release (I'm not sure when but the PR has been merged recently).
The PR is here: https://github.com/aurelia/templating-router/pull/25
Essentially it gives you a chance to specify a view/viewmodel pair (a layout) that will sit in place of the original module when routed to. Instead the original content will be projected into the layout using slots.
Example:
route-config
config.map([
{ layoutView: "layout.html", moduleId: 'page1' }
]);
page1.html
<template>
<div slot="slot1">some content</div>
<div slot="slot2">some other content</div>
</template>
layout.html
<template>
<div class="some-fancy-container">
<p>This is slot 2</p>
<!-- slot2 content will be projected here -->
<slot name="slot2">some fallback content</slot>
</div>
<div class="sidebar">
<p>This is slot 1</p>
<!-- slot1 content will be projected here -->
<slot name="slot1">some fallback content</slot>
</div>
</template>
Resulting HTML output:
<template>
<div class="some-fancy-container">
<p>This is slot 2</p>
some other content
</div>
<div class="sidebar">
<p>This is slot 1</p>
some content
</div>
</template>
This is similar to MVC partials or ASP.NET master pages and allows you to specify an alternative layout for certain pages (without needing child routes).
It's very distinct from viewports (it also works with viewports in that you can specify a layout for a viewport too)
I'm working on a school project where I can post images online using meteor.
I was able to post image and display the datas, but it's keep stacking to the other images. Is there any wasy to fix this? Here's the picture:
And here's my code that displays the datas:
<template name="posts">
{{#if currentUser}}
<div class="grid">
<div class="grid-sizer"></div>
{{#each postList}}
<div class="grid-item">
{{updateMasonry}}
<img src="{{this.url}}">
{{#each postData}}
{{this.username}}
<br>
{{this.message}}
<br>
{{this.createdAt}}
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
I think you'd want to bust it up into another template. You'd have your larger posts templates that would hold the images+comments and then you'd make a new template for each images.
So having a separate template for each of your image posts
<template name="images">
<div>
<img src="{{url}}"/>
{{#each postData}}
{username}}
<br/>
{{message}}
<br/>
{{createdAt}}
{{/each}}
</div>
</template>
You can pass data into your template and you can only pull postData that is already meant for that image, instead of having everything jumbled into 1 template.
It's probably best practice to split up your templates in the above fashion and properly pass data to each image post instead of grouping everything into 1 template.
https://www.discovermeteor.com/blog/a-guide-to-meteor-templates-data-contexts/
I want to count the images displayed in a page using capybara.The html code displayed below.for that i use following code to return the total count but the count returns 0.In my page i have 100 more images.
c= page.all('.thumbnail_select').count
puts c(returns 0)
HTML
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon_img"></span></span>
</a>
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test1.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon1_img"></span></span>
</a>
.........
.........
How can i count the total images?
You have a few options.
Either find all div's with class thumbnail_select by using all("div[class='thumbnail_select']").count
But this is an awkward way of doing it since it looks for the div and not the images.
A better way would to be to look for all images using all("img").count as long as no other image is present on the page.
If neither of these works either the problem might be that your page is not loaded when you start looking for the images. Then just simply put a page.should have_content check before the image count to make sure that the page is loaded.