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/
Related
I am using UIKIT Lightbox to display post images like Facebook as below:
Controller
$postImages = postsImages::where('postId', $post->postId)->limit(3)->get();
Blade
<div class="uk-child-width-1-3#m" uk-grid uk-lightbox="animation: slide">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href="{{$postImage->imageLink}}">
<img src="{{$postImage->imageLink}}">
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</a>
</div>
#endforeach
</div>
I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook.
The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited.
I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below:
$postImages = postsImages::where('postId', $post->postId)->get();
to get all images there and showing it in the lightbox.
P.S. I am not sure, that is item option for that purpose or not. )
This is a practical solution.
1- Make another query without limit.
$postImagesAll = postsImages::where('postId', $post->postId)->get();
2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine:
<div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}">
<img src="{{$postImage->imageLink}}"/>
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</div>
</a>
</div>
#endforeach
#foreach ($postImagesAll as $postImage)
<a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a>
#endforeach
</div>
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.
I am using Knockoutjs to render a user profile page. For which I am calling a Web API service which returns User details with its Profile Picture.
var MessageFrom = {
FromUserProfileId: self.FromUserProfileId,
FromUserName: self.FromUserName,
FromUserPictURL: self.FromUserPictURL
}
<div id="comments" class="comments" data-bind="with: viewModel">
<div class="comment clearfix" data-bind="foreach: Messages">
<div class="comment-avatar">
<img class="img-circle" data-bind="attr:{'src': FromUserPictURL}" alt="avatar">
</div>
<header>
<h3 data-bind="text: FromUserName"></h3>
<div class="comment-meta"><p data-bind="text: moment(DatePosted).format('LLL')"></p> </div>
</header>
<div class="comment-content">
<div class="comment-body clearfix">
<p data-bind="text: MessageBody"></p>
</div>
</div>
</div>
</div>
The URL of the Image returned from WebAPI is Relative URL like ~/Content/Member/Image1.jpg. While its bind with Image URL shows like "http://sitename.com/profile/~/Content/Member/Image1.jpg".
Everything works great accept Profile Picture
I need to work something on binding as as I cannot change the Path coming from Database.
Appreciate your suggestions.
Regards,
Your binding looks okay. For starters I would use your IE or Chrome developer tools ( F12 ) and change the src manually of the image to find out what exactly works for you.
You say you recieve this: ~/Content/Member/Image1.jpg
Setting the src to this should work: /Content/Member/Image1.jpg
You can change your message object client-side like this, once you're sure what is needed, but I think this should suffice:
var MessageFrom = {
FromUserProfileId: self.FromUserProfileId,
FromUserName: self.FromUserName,
FromUserPictURL: self.FromUserPictURL.replace('~','')
}
I have this view which can rotate a div element. Something like
<div class="rotatable">
<div class="front">
{{outlet front}}
</div>
<div class="back">
{{outlet back}}
<div>
</div>
Now I have this index template which contains two of these rotatable elements. Each rotatable elements has a different front and back. So it could look like this
<div id="index">
{{#rotatable}}
{{outlet front App.FrontView1}}
{{outlet back App.BackView1}}
{{/rotatable}}
{{#rotatable}}
<div>This should show up inside {{outlet front}}</div>
{{outlet back App.BackView2}}
{{/rotatable}}
</div>
This doesn't work of course, but how should this be done ?
Cheers
I guess this question was a little bit unclear. Anyway, the answer is given in this post
EmberJs: how to use connectOutlet
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>