I'm working on a carousel webpart with a text/xml transformation.
Simply trying to create a unique ID for each instance on the page.
Next I'd like to have the first item set to active with a CSS class.
For the section Webpart container:
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
<div id="{%uniqueId%}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
□
</div>
<a class="carousel-control-prev" href="#{%uniqueId%}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{%uniqueId%}" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This seems to work at first but for some reason it generates a text-node in HTML.
How can we do this without generating the variable output?
For a single carousel item in the Transformations section:
{% CssActive = IsFirst() ? "active" : string.Empty %}
<div class="carousel-item {%CssActive%}">
<img src="{%Image%}" alt="" class="w-100 d-block" />
<div class="carousel-caption d-none d-md-block">
<h3>{%Title%}</h3>
<div>{%Body%}</div>
</div>
</div>
This doesn't output anything? Is this even possible to use IsFirst() in a repeater?
Any help is much appreciated!
For the transformation you can use the following code:
<div class="carousel-item{% if (DataItemIndex == 0) { " active" } #%}">
<div class="card">
<img src="{%Image%}" alt="" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">{%Title%}</h3>
<div class="card-text">{%Body%}</div>
</div>
</div>
</div>
Doc
For the Webpart container I can do a workaround with HTML/CSS:
<div class="d-none">
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
</div>
Far from ideal so if anybody else has a better idea ...?
Related
I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection
MY SLIDER OF CATEGORY TEST IS DISPLAYED THIS WAY IN THE PICTURE i.e images appear below each other
enter image description here...I have tried change the category test with another category but i could not fix it.. i guess the issue mighty be how to display the active image slide first then the rest come after-wards
My view blade is
#foreach ($data['testSlider'] as $slide )
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class=""></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
#endforeach
MY SLIDER CONTROLLER HAS
use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;
public function test()
{
$data['slider'] = Slider::all();
$data['slidercategory'] = SliderCategory::all();
$data['testSlider'] = Slider::with([
'SliderCategory' => function ($attachmentQuery) {
$attachmentQuery->where('title', 'test Slider');
}
])->get();
return view('testboot', compact('data'));
}
Your images are repeating because you are making an entire carousel for each image instead of adding the images to the first carousel.
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
#foreach ($data['testSlider'] as $slide )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
#endforeach
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
#foreach ($data['testSlider'] as $slide )
<li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
#endforeach
</ol>
</div>
I'm new so I hope you can bare with me and help a newbie out.
I'm trying to apply the lightbox2 in a carousel. I want to be able to click on an image in my carousel and have that popping up in large in a lightbox. I followed all the steps (https://lokeshdhakar.com/projects/lightbox2/) but to apply the lightbox, it gives the example of using it in a a tag, but my images are inside a img tag.
I don't understand how I'm going to make it work, I've tried for hours now and I'm starting to give up. I think I'm confusing myself more than necessary.. Heres my carousel code:
<section class="page-section" id="portfolio">
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-md-8">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="First slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Second slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Third slide"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Thanks for your help,
Cris
I was able to get a kinda hacky solution.
You could do it like this. Replace "Image" in quotations with your image, and replace "data-lightbox" in quotations with what you want
<img id="minecraft" src="Image">
I don't think this is a good way but it works perfectly on my site. Also, I don't know if it will work on a carousel because I am also new but you can try.
Im newbie in Laravel and Bootstrap also.
I am trying to display data from database in carousel.
In database I have filled few rows with text and I would like to display each row on each slide. When I click on arrow, one row/slide hide and the other row/slide will show.
Now, I get all slide with text under each other... I cannot find some javascript which I can do this:
#foreach($cards as $card)
<div id="myCarousel" class="carousel slide" data-toggle="collapse" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption">
<h3>...</h3>
<p class="carousel_text">{{ $card->text }}</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
#endforeach
Can you please somebody help me with this?
Try this:
<div id="myCarousel" class="carousel slide" data-toggle="collapse" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<?php $index = 0; ?>
#foreach($cards as $card)
<div class="carousel-item {{ $index == 0 ? "active" : "" }}">
<div class="carousel-caption">
<h3>...</h3>
<p class="carousel_text">{{ $card->text }}</p>
</div>
</div>
<?php $index++; ?>
#endforeach
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Let me know if this works!
Thank you.
i have the below code that everything runs fine except the check to see if the value is null. I know the value being returned is null, yet it still doesn't work. I've tried having == null both within and outside the {} to no avail.
Maybe it has something to do with how hibernate is returning the value? When i print out the object returned from the db it says null.
<div th:each="timecardLast: ${timecardLast}">
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status == null}" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status} == 1" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecradin}">
<div th:if="${timecardLast.status} == 2" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardout}">
<div th:if="${timecardLast.status} == 0" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer_off</i>
<h5 class="white-text">SIGN OUT OF WORK</h5>
</div>
</div>
</a>
</div>
The syntax for lists in Thymeleaf is naming the element and naming the list. You have both names for the same thing. So you may want instead:
<div th:each="timecard: ${timecardList}">
...
<div th:if="${timecard.status == null}"...>
...
After adding a list of objects called timecardList to the model.
Took a step back and looked at how i was creating the object. I was not initializing the object first i.e.
Timecard timecardLast = timecardService.getLastTimecardByIdusers(staff);
So, a simple initialization of the object properly did the job followed by the db request i.e.
timecardLast = new Timecard();
timecardLast = timecardService.getLastTimecardByIdusers(staff);