I want to know how I can change these static image in a clikable image to one of my web page. Thanks
<div class="section">
<div id="home-section">
<div class="home-box">
<img class="background-view" alt="École et boutique de danse orientale" src="upload/background.jpg">
<div class="slider-caption">
<div class="container">
<div class="flexslider">
<ul class="slides">
<li>
<p class="flex-caption">École / Boutique</p>
</li>
<li>
<p class="flex-caption"><span>de</span> Danse Orientale</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
What do you want to achieve? Like when you click on the picture you will get to another site/address?
If so, just wrap your .. with like for example in your code:
<a href="your address">
<img class="background-view" alt="École et boutique de danse orientale" src="upload/background.jpg">
</a>
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
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
So I'm having a little problem with using contact form 7 in a foundation reveal modal and was wondering if someone can help me a little with the following.
On a project I'm working on I have a product overview with lots of products. On every product there's a link that opens a contact form in a modal (reveal from foundation). In this modal I'm loading the contact form with get_template_part. This is working nicely but when I click on "send" the modal closes without sending the form and without a feedback message.
I would like to keep the modal open and include the "thank you" message or error message in this modal. I read something about using ajax but I'm not sure how to load the template part with ajax and not sure if thats the way to go.
I hope someone can help me in the right direction with this.
I added some code to make this a little bit more clear.
<div class="<?php echo $termsString; ?> item columns small-12 medium-6 large-3">
<div class="product-item">
<img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt="">
<div class="item-content">
<h5 class="item-title"><?php the_title(); ?></h5>
<div class="origin">
<span class="muted">Origin:</span> <br>
<span><?php the_field('origin'); ?></span>
</div>
<div class="availability">
<span class="muted">Availability:</span> <br>
<span><?php get_template_part('template-parts/content','availability'); ?></span>
</div>
Product Details
<hr>
<div class="more-info text-center">
<span class="hide">More info</span>
</div>
</div>
</div>
</div>
<div class="reveal full" id="itemContactModal-<?php the_ID(); ?>" data-reveal>
<?php get_template_part('template-parts/content','itemcontact'); ?>
</div>
And in content-item-contact i have the following:
<div class="contactdetails">
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<div class="column small-12 medium-4 large-3 white">
<div class="product-item">
<button class="close-button show-for-small-only" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
<img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt="">
<div class="item-content">
<h5 class="item-title"><?php the_title(); ?></h5>
<div class="origin">
<span class="muted">Origin:</span> <br>
<span><?php the_field('origin'); ?></span>
</div>
<div class="despription">
<p>Here you find productdetails and availability. Please contact us for more specific information.</p>
</div>
Product Details
</div>
</div>
</div>
<div class="column small-12 medium-8 large-9">
<div class="contact-wrapper">
<header >
<h4 class="contrast">Request more information</h4>
<button class="close-button show-for-medium" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</header>
<div class="contact-content clearfix">
<div class="">
<div class="column small-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. +31 (0) 76 522 1155</p>
</div>
<div class="column small-12">
<form>
<?php echo do_shortcode('[contact-form-7 id="138" title="Product Info"]'); ?>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.