This question already has answers here:
How to concatenate strings in twig
(11 answers)
Closed 5 years ago.
I've got a project written in PHP in which I am using Symfony framework. This piece of code from Twig template doesn't work.
{% for restaurant in restaurants %}
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail restaurant-thumbnail">
<img src="{{ asset('build/images/'.'image1.8e9b4ad0.jpg') }}" alt="cannot load image" class="restaurant-image">
<div class="caption">
<h3>{{ restaurant.getName() }}</h3>
<p>{{ restaurant.getShortDescription() }}</p>
<p>
Buy Now! Więcej informacji
</p>
</div>
</div>
</div>
{% endfor %}
When I change this
<img src="{{ asset('build/images/'.'image1.8e9b4ad0.jpg') }}"
to that:
<img src="{{ asset('build/images/image1.8e9b4ad0.jpg') }}"
code works. I don't know why.
plz try it
<img src="{{ asset('build/images/') }}{{'image1.8e9b4ad0.jpg'}}" alt="cannot load image" class="restaurant-image">
if you want to use Variable
<img src="{{ asset('build/images/') }}{{variable}}" alt="cannot load image" class="restaurant-image">
Related
This question already has answers here:
Laravel Displaying image from database
(7 answers)
Closed 3 years ago.
I want to retrieve images from database an display them in webpage directly, how can I make a path?
Here's my view
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
{{-- {{$ad->image}} --}}
<img class="img-fluid" src="{{($ad->image)}}" alt="">
<div class="product-details">
<h5>{{$ad->jobC}}</h5>
<div class="price">
<h6>{{$ad->jobtype}}</h6>
<p>{{$ad->details}}</p>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
Controller Method
public function jaa(Request $request)
{
$de = diligent::all();
$de->image = $request->image;
return view('jobs')->with('dw', $de);
}
How can I display the image? I tried this and it only shows the file name
asset() - Generate a URL to an application asset.
<img class="img-fluid" src="{{ asset('images/' . $ad->image) }}" />
Try this
{{-- {{$ad->image}} --}}
<img class="img-fluid" src="{{ asset('storage/' . $ad->image) }}" alt="">
Make sure to symlink your storage folder as well
php artisan storage:link
I have been trying to figure out how to filter my foreach loop and only display an image if my post has one. So far I have been trying different functions and #ifs but to no avail.
Here is my controller code:
<div class="container">
<div class="row">
<div class="col-sm-6">
#foreach($posts as $post)
<div>
<h1>{{$post->title}}</h1>
<p>{{$post->body}}</p>
<img src="{{url('img', $post->image)}}">
</div>
<hr>
#endforeach
</div>
</div>
</div>
You can use a simple #if:
#if ($post->image)
<img src="{{ url('img/' . $post->image) }}">
#endif
Or #isset:
#isset ($post->image)
<img src="{{ url('img/' . $post->image) }}">
#endisset
https://laravel.com/docs/5.5/blade#control-structures
You can use a simple #if statement to see if the image property of the current $post is set. This could look a little something like this:
#foreach($posts as $post)
<div>
<h1>{{$post->title}}</h1>
<p>{{$post->body}}</p>
#if(!empty($post->image))
<img src="{{url('img', $post->image)}}">
#endif
</div>
<hr>
#endforeach
By including this, the <img> element will only be displayed if the property is not empty.
As also mentioned in another answer, you can replace the #if(!empty(...)) by #isset(...) to achieve the same result.
So I'm building my first blog, and I'd like to dynamically show to posts on my landing page. I want the layout to become like this (might be a little weird):
post-image - post-preview
post-preview - post-image
post-image - post-preview
This is what I have right now to show to blog posts:
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
</a>
</div>
#endforeach
web.php (route):
$posts = App\Post::take(3)->orderBy('created_at')->get();
return view('welcome', compact('posts'));
Now as I'd like to make the layout dynamically. I think I can do this by checking if the ID even or odd. However I have no idea on how to do this even when I've searched 50% of the web already :) .
If there is a better way on doing this just let me know! Greatly appreciated guys!
Yes you can do it by checking if current post or loop iteration is odd or even. (https://laravel.com/docs/5.5/blade#the-loop-variable) For Odd loop iteration, you can write image code first and in even loop iteration you can write preview code first to achieve your desired layout. You can check the following code:
#foreach($posts as $post)
<div class="row">
#if( $loop->iteration % 2 == 0 )
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
#else
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
#endif
</div>
#endforeach
Ok I guess I got your question. so there is no direct solution but you can measure inside your for loop by adding extra variable such as:
<?php $inc = 0;?>
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
#if($inc%2 == 0)
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
#else
<span>{{ $post->title }}</span>
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
#endif
<?php $inc++;?>
</a>
</div>
#endforeach
Or you can use for loop instead of foreach of loop and inside for loop you can check variable i.e. i is odd or even.
I need your help. Here is my template file. How can I make to work that template? Main problem is that I don't know how to change div class values. Now I can make working only <div class="thumb-left"> but I also need <div class="thumb-middle"> and <div class="thumb-right">.
Thank you.
#extends('_layouts.main')
#section('content')
<div id="content-section">
#foreach ($uploads as $upload)
<div class="thumb-left">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
<div class="thumb-middle">
<img alt="sunset" title="Sunset HDR" src="img/thumb.jpg" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
<div class="thumb-right">
<img alt="sunset" title="Sunset HDR" src="img/thumb.jpg">
<div class="thumb-info">
City Sunset HDR
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
</div>
#stop
You could do:
#foreach ($uploads as $upload)
<div class="thumb-{{ array('left', 'middle', 'right')[($loop->iteration-1)%3] }}">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
The $loop variable is a build in blades variable - check the docs:
When looping, a $loop variable will be available inside of your loop.
This variable provides access to some useful bits of information such
as the current loop index and whether this is the first or last
iteration through the loop. For instance: $loop->iteration - the current loop
iteration (it starts at 1).
You probably want to change your foreach to also use a key, so you can know at which index in your array you are:
<div id="content-section">
#foreach ($uploads as $index => $upload)
<div class="thumb-left">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
</div>
Now, if I understand properly, what you're looking for is to switch from thumb-left, to thumb-middle and then finally thumb-right, and then loop again. You could use modulo to assign your class name based on the current index. This is untested code but you could probably use something along the lines of:
<div id="content-section">
{{ $classnames = array("thumb-left", "thumb-middle", "thumb-right"); }}
#foreach ($uploads as $index => $upload)
<div class="{{ $classnames[$index % count($classnames)] }}">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
</div>
im frecuent user of this forum and always find answers from other users, but this time i need to ask my own question.
At this moment im editing a wp template based on twig that i bought, right now im facing a fancybox gallery which just call the first image, and i need to add the gallery rel to the other images included in the post. i already found the missing code which call the rest of images from the post ID, but i dont know how to express it by the twig structure and incorporate it to the original code of the page
this is the code which display the gallery:
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a href="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" class="fancybox">
<img src=" {{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" alt="">
</a>
// the php code expressed on twig goes here //
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endif %}
This is the php code i need to implement on twig
add_filter(‘wp_get_attachment_link’,'add_gallery_id_rel’);
function add_gallery_id_rel($link){
global $post;
return str_replace(‘<a href’, ‘<a rel=”galeria’. $post->ID .’” href’, $link);
}
I really appreciate if you can help me with this (sorry about my weird english)
That code is a filter applied to the regular Wordpress functions, you are using a Twig Wrapper so that code won't work for you.
Try modifying the twig loop.
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
#... rest of the code
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
#... rest of the code
{% endfor %}
Skip the first slide using slice:
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE)|slice(1) %}
#... rest of the code same as above