How do we concatenate using blade template engine Laravel - laravel-5

I am new to Laravel and don't know if it is possible at all to concatenate a string to a blade variable.
I want to display the name of the author with the ~ sign concatenated to the author's name from the left. Here is my code.
<div class="author">~{{ $quote->author or '' }}</div>
What I want is if the author is set, it should be displayed with the ~.
How do I concatenate this?
Thanks for any help

This would be better
<div class="author">~{{ isset($quote->author) ? $quote->author : '' }}</div>
UPDATE:
<div class="author">{{ isset($quote->author) ? '~'.$quote->author : '' }}</div>

<div class="author">
#if (isset($quote->author))
~ {{ $quote->author }}
#else
#endif
</div>
https://laravel.com/docs/5.3/blade#control-structures

Related

How does Laravel turn this code into a link?

Consider this block of code from a Laravel blade file:
<div class="result-content">
<h6>{{ $item->name }}</h6>
<div>{!! Str::limit($item->desccription, 120) !!}</div>
#if($item->type == 'lot')
<div>{{ $item->info ? "Current Bid: $".number_format($item->info, 2) : 'No bids yet' }}</div>
<div>{{ \Carbon\Carbon::parse($item->start)->setTimezone($_COOKIE['timezone'])->format('n/j/y g:ia T') }} - {{ \Carbon\Carbon::parse($item->end)->setTimezone($_COOKIE['timezone'])->format('n/j/y g:ia T') }}</div>
#else
<div>{{ $item->info }} Lot{{ $item->info > 1 ? "s" : '' }}</div>
<div>{{ \Carbon\Carbon::parse($item->start)->setTimezone($_COOKIE['timezone'])->format('n/j/y T') }} - {{ \Carbon\Carbon::parse($item->end)->setTimezone($_COOKIE['timezone'])->format('n/j/y T') }}</div>
#endif
<a href="{{ $item->search_url }}" title="">
View: {{ $item->search_title }}
</a>
</div>
Somehow or other, this renders in a browser as a block of text that is all included in a link tag, and "$item->search_url" becomes the link url. But the link is wrong - it just points back to the page this text is appearing on. I need to figure out where "search-url" is assigned its value, so I can fix it. But I am entirely new to Laravel, and I can't figure out where or how "search-url" is getting assigned a value. I've searched the entire system with Visual Code, and that name doesn't appear anywhere else. It's not a variable, it's not a property name, it's not a database field name.
Where is that variable getting assigned?

How can I make condition for class of x-jet-dialog-modal?

With laravel 8.68 and livewire 2.7 opening modal dialog (which can be used in many cases) I want
to change background color/color depending on parameter.
I try to change class in <x-jet-dialog-modal definition like :
<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
class=" z-50 bg-opacity-100 #if($confirm_action_profile_modal_color === 'danger') personal_danger_text #else personal_text #endif">
But That does not work, and in browser's inspection I see that class in <x-jet-dialog-modal is not rendered,
I try to use alpinejs :
<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
:class=" 'z-50 bg-opacity-100 ' + ( '{{$confirm_action_profile_modal_color }}' == 'danger' ? 'personal_danger_text' : 'personal_text' ) ">
But error was raised :
A non-numeric value encountered (View: my-template.blade.php)
Can I make condition for class of <x-jet-dialog-modal ?
UPDATED # 1:
Yes, I have jetstream views published , and I have file resources/views/vendor/jetstream/components/dialog-modal.blade.php,
which have default content :
#props(['id' => null, 'maxWidth' => null, 'class' => null])
<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }} class="{{ !empty($class) ? $class : ''}}">
<div class="px-6 py-4 {{ !empty($class) ? $class : ''}}">
<div class="text-lg">
{{ $title }}
</div>
<div class="mt-4">
{{ $content }}
</div>
</div>
<div class="px-6 py-4 text-right {{ !empty($class) ? $class : ' bg-gray-100'}}">
{{ $footer }}
</div>
</x-jet-modal>
As I inheret my modal file from it I wonder in which way have I to edit definition of <x-jet-dialog-modal to pass
conditional class ?
Thanks in advance!
you have to publish jetstream views, then edit the file dialog-modal.blade.php and use the slot attributes.
Laravel Blade #Slot Attributes
If you want to change something from the modal itself, you would have to edit modal.blade.php
Edit the following line:
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto">
And do attribute merge Laravel Blade #Deafault/Merged Attributes
another way will be to edit published JetStream modal window view (resources/views/vendor/jetstream/componets/modal.blade.php) and add {{$attributes['class']}} in class values. After that you can add any custom class or condition when including jetstream modal:
<x-jet-dialog-modal wire:model="myCustomModal" maxWidth="md" class="flex items-center my-custom-class">
and this will be applied on your modal. And now you should be able to use your conditions as well:
<x-jet-dialog-modal wire:model="myCustomModal" maxWidth="md" class="flex items-center my-custom-class #if($confirm_action_profile_modal_color === 'danger') personal_danger_text #else personal_text #endif">
nice example can be seen here:
https://floyk.com/en/post/how-to-use-laravel-jetstream-livewire-modal
or here:
https://floyk.com/en/post/livewire-5-ways-to-call-and-update-value-on-click

AlpineJS inline function and Laravel #json

I have a problem passing a PHP variable to a variable inside an alpine variable or function. Here is a simple example.
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: #json($test)
}">
<span x-text="message"></span>
</div>
The problem comes from the fact that x-data is using the double-quote to wrap the encoded data. I know I could "externalize" the x-data, but I really need it to be inline.
I have a basic workaround (using backticks) for example, but I wanted to know if there is a better way to do this.
EDIT
The example is using a string... but the PHP variable can be a boolean or even an array. That's why I'm using #json.
I' d use Template Strings.. Easy to read, no need to escape multiple quotes.
<div>
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: `{{ $test }}`
}">
<span x-text="message"></span>
</div>
</div>
Will this not work?:
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: {{ json_encode($test) }}
}">
<span x-text="message"></span>
</div>

Laravel Components: default content in {{ slots }}

In old-style Laravel blade templated we used to use #section('section-name') in the following way:
{{-- h1para.blade.php --}}
<h1>
#section('heading')
Heading from Template
#endsection
</h1>
<p>
#yield('details')
</p>
And then extend that template with:
{{-- content.blade.php --}}
#extends('h1para')
#section('details')
Content from content page
#endsection
In the above, my rendered HTML output would look like the following, because the "missing" 'heading' section in the extending file means that we default back to the content in the template:
<h1>Heading from Template</h1>
<p>Content from content page</p>
But in the new components way of doing things, I do:
{{-- .../components/h1para.blade.php --}}
<h1>{{ $heading }}</h1>
<p>{{ $slot }}</p>
In case you haven't gathered, the question is: how do I set a default value for a slot's contents, such that if it isn't supplied in the extending component/template, it falls back to that default?
(I've done my searches, but haven't been able to find the same question asked before)
EDIT:
I should add that I've seen the solution (in the Laravel documentation):
<h1>{{ $heading ?? 'Default Heading Here' }}</h1>
But this seems only to be appropriate if the default value is a short easy to manage string. If the default is a long stream of HTML, then it wouldn't work for my needs.
EDIT 2:
Just to reiterate: the whole point of the question is that the default content could be a long stream of HTML. Solving the problem by passing in a string (be that formatted as HTML or not) wouldn't work for my real-world needs.
I think the solution is this:
{{-- .../component/template.blade.php --}}
<div>
#if (isset($heading))
{{ $heading }}
#else
<h1>Default Heading<span class="subhead">default subheadin and lots of other html content</span></h1>
#endif
<p>{{ $slot }}</p>
</div>
It's not super elegant, but I think it's the only solution. Anyone else have a better answer, I'd love to hear it.
If you pass data like:
<x-h1para header="<span>Header content</span>">
<div>Default slot content here</div>
</x-h1para>
You can display in your component like:
<div>
<h1>{!! $heading ?? 'Default Heading Here' !!}</h1>
{{ $slot }}
</div>

Hugo definition of non-site level variables/parameters query

I am using Hugo Universal Theme. I am new to static site generators. This question is for someone who is familiar with hugo templates.
In layouts/partials/features.html we can see where $element.name and $element.name.description are rendered:
{{ if isset .Site.Params "features" }}
{{ if .Site.Params.features.enable }}
{{ if gt (len .Site.Data.features) 0 }}
<section class="bar background-white">
<div class="container">
{{ range $index, $element := sort .Site.Data.features "weight" }}
{{ if eq (mod $index 3) 0 }}
<div class="col-md-12">
<div class="row">
{{ end }}
<div class="col-md-4">
<div class="box-simple">
<div class="icon">
<i class="{{ .icon }}"></i>
</div>
<h3>{{ $element.name }}</h3>
<p>{{ $element.description | markdownify }}</p>
</div>
</div>
{{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }}
</div>
</div>
{{ end }}
{{ end }}
</div>
</section>
{{ end }}
{{ end }}
{{ end }}
The data to be rendered in this case are defined in data/features/consulting.yaml as follows:
weight: 4
name: "Consulting"
icon: "fa fa-lightbulb-o"
description: "Fifth abundantly made Give sixth hath..."
What should I do to add new variable to the yaml file that can later then be rendered through the html file when hugo is compiling the site. I tried to simply add another parameter param1 and then insert a corresponding line in the html file as <p>{{ $element.param1 | markdownify }}</p> just below description paragraph but got error
ERROR 2018/08/23 10:42:42 Error while rendering "home" in "":
template: index.html:22:11: executing "index.html" at <partial
"features.ht...>: error calling partial: template:
partials/features.html:18:56: executing "partials/features.html" at
: wrong number of args for markdownify: want 1 got 0
Clearly it seems I have not been able to define the variable properly, but where should I do that? I can add another site variable to config.toml, but I want to learn how to make page specific variables that can be defined in yaml/frontmatter type entries. I tried reading about hugo variables but got bogged down in what is a variable and what is a shortcode. Many thanks for your help with this example.
Well, I found a working answer, but I still do not fully understand how it fits with Hugo variable system, so a better answer and or comments are highly welcome.
It appears quite simple. I had to define url variable in the yaml file:
name: "History"
position: "Hx"
url: "/blog/2018/08/23/01-history/"
and then use in the html file like this:
{{ if .url }}
<a href="{{ .url }}">
<h5>{{ .name }}</h5>
</a>
{{ else }}
<h5>{{ .name }}</h5>
{{ end }}
What it does is puts the .name in link tag, if .url is defined in .yaml. This works also if an absolute URL is given. So it appears that a page variable is referred to as .myVariable. the template authors used $element.name in another place as above, which confused me.
I also can refer to the parameter defined in the frontmatter as .Params.name
I found pointers at https://github.com/devcows/hugo-universal-theme/pull/166 and tested in adjusting the template; it works well.

Resources