In yii2 I am displaying images from the daabase and for the same images I have comments in the database table. I want the image description to be below the image, which i am not able to achieve.
My code.
<div class="margin-top-20">
<h5> <p class="details-edit"> <i class="fa fa-picture-o"></i> GHS Pictograms </p> </h5>
<div class="panel panel-default panel-edit">
<div class="panel-body">
<?php
$images = '';
$a = '';
// append all images
// var_dump($data->getPictogramPath()); exit();
foreach($model->getPictogramPath() as $name)
$images =$images.' '.Html::img(\Yii::$app->request->BaseUrl.'/web'.$name->pictogram_filepath,['alt'=>'','width'=>'100','height'=>'100', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name->pictogram_comment ,'style'=>'cursor:default;']).Html::label($name->pictogram_comment,['class' => 'pictogram-label']);
$a = $a.Html::label($name->pictogram_comment);
echo ($images);
?>
</div>
</div>
</div>
My output is :
I am not able to get the label below the image.. Can anyone sugggest me what is the issue here?
Thank you..
You need to have a little change on your html structure. First of all need wrap each image and label in block, also need make a couple changes in your css files.
You code will look like this:
$images = '';
$a = '';
// Append all images
foreach($model->getPictogramPath() as $name) {
$images .= Html::beginTag('div', ['class' => 'img-and-label-wrapper']);
$images .= Html::img(\Yii::$app->request->BaseUrl. '/web' . $name->pictogram_filepath, ['alt' => '', 'width' => '100', 'height' => '100', 'data-toggle' => 'tooltip', 'data-placement' => 'left', 'title' => $name->pictogram_comment ,'style'=>'cursor:default;']);
$images .= Html::label($name->pictogram_comment,['class' => 'pictogram-label']);
$images .= Html::endTag('div');
}
echo $images;
Here styles that you need to add:
.img-and-label-wrapper {
display : inline-block;
}
.img-and-label-wrapper label{
display: block;
text-align: center;
}
Guess this will helpful for you
Related
Controller code:
public $paginate = [
'Employers' => ['scope' => 'employer'],
'Stories' => ['scope' => 'story',
'page' => 1,
'limit' => 1]
];
public function index()
{
//load model
$this->loadModel('Stories');
// Paginate property
$this->loadComponent('Paginator');
// In a controller action
$stories = $this->paginate($this->Stories, ['scope' => 'story']);
$employers = $this->paginate($this->Employers, ['scope' => 'employer']);
//pr($stories);
$this->set(compact('employers', 'stories'));
}
From that code must understand that the code looks as that is required but at same time i can't navigate further i also require code to run so i keep that clear code also put together code that would work according to single page but code require that code must put together a cycle that goes to next story entry without changing page that i display ie index.php.
View Code:
<div class="row">
<div class="large-8 columns" style="border-right: 1px solid #E3E5E8;">
<article>
<?php
foreach($stories as $story){
echo '<hr><div class="row">
<div class="large-6 columns">
<p>'.$this->Html->image($story['image'].'.jpg', ['alt'=>'image for article']).'</p>
</div>
<div class="large-6 columns">
<h5>'.$story['title'].'</h5>
<p>
<span><i class="fi-torso"> By '.$story['creator'].' </i></span>
<span><i class="fi-calendar"> '.$story['created'].' </i></span>
</p>
<p>'.$story['story'].'</p>
</div>
</div><hr>';
}
?>
<ul class="pagination" role="navigation" aria-label="Pagination">
<li class="disabled"><?php echo $this->Paginator->prev(' ' . __('previous')); ?></li>
<!--<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>-->
<li><?php echo $this->Paginator->prev(' >> ' . __('next')); ?></li>
</ul>
</article>
</div>
Code written makes pagination appear on the view but doesn't work when i click paginator.
That is possible follow code below to make that work.
public $paginate = [
'Stories' => ['scope' => 'story',
'limit' => 1,
]
];
public function initialize(): void
{
parent::initialize();
$this->loadComponent('Paginator');
}
public function index()
{
//load model
$this->loadModel('Stories');
$this->loadModel('Sectors');
// Paginate property
$this->loadComponent('Paginator');
// In a controller action
$employers = $this->Employers->find('all');
$sectors = $this->Sectors->find('all');
$stories = $this->paginate($this->Stories->find('all', ['scope' => 'story']));
//pr($sectorsandcourses);
$this->set(compact('employers', 'stories', 'sectors'));
}
Important factor that shows up is that we put limit to number of result to show up each instance.
I have successfully saved the image that is upload from the user, into a field called 'image' in my 'advertisement' table. But I am having a problem displaying the image on my view (blade.php) file.
I tried searching for solutions online but none of which worked for mine...
Below is the store method for my AdvertisementsController:-
public function store(Request $request)
{
// $media = Media::all();
request()->validate([
'image' => 'required',
'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
//find current admin's id
$admin_user = auth()->id();
if ($request->hasFile('image')) {
$image = $request->file('image');
$image_name = str_slug($request->title).'.'.$image->getClientOriginalExtension();
$folderPath = public_path('/uploads/images');
$imagePath = $folderPath. "/". $image_name;
$image->move($folderPath, $image_name);
}
$title = request('title');
$description = request('description');
$sort_num = request('sort_num');
$media = Media::create([
'title' => $title,
'description' => $description,
'sort' => $sort_num,
'created_by' => $admin_user,
]);
Advertisement::create([
'image' => $imagePath,
'expired_at' => Carbon::now()->format('Y-m-d H:i:s'),
'media_id' => $media->id,
]);
// return back()->with('success', 'Your advertisement has been successfully created!');
return redirect('/advertisements');
}
I can save the path successfully but the path that is saved is quite long, e.g. : "/Users/hannzern/Desktop/numericledger-backend/public/uploads/images/klang-river.jpeg" and thought the path would be saved as "/public/uploads/images/klang-river.jpeg". Could this be the problem?
Below is the code for my view (blade.php):-
<h1>Advertisements</h1>
<ul>
#foreach ($advertisements as $advertisement)
<a href="/advertisements/{{$advertisement->id}}">
{{ $advertisement->media->title }}
</a>
<br>
//Three methods of retrieving the image from the path but all three not working
<img src="{{ $advertisement->image }}" height="300" width="200">
<img src="/Users/hannzern/Desktop/numericledger-backend/public/uploads/images/klang-river.jpeg" height="300" width="200">
<img src="/public/uploads/images/klang-river.jpeg" height="300" width="200">
<br>
<br>
<br>
<br>
#endforeach
</ul>
Add new advertisement
Also, from the file directories, I can see the "klang-river.jpeg" image in my /public/uploads/images folder... Anyone have any idea why? :(
/public will be resolved by using / within links in the browser, so your link should be saved into the database as:
/Users/hannzern/Desktop/numericledger-backend/uploads/images/klang-river.jpeg
However, to make sure that this works whereever you have host your application, you should not save the absolute path. Only save the following into the database:
klang-river.jpeg
Then, using the asset() helper, you can call the correct url in your template:
<img src="{{ asset('uploads/images/' . $advertisement->image) }}" height="300" width="200">
This will resolve to the expected url. I hope this helps.
I am creating some bread crumbs for my folders. When I click on the 2nd bread crumb link it does not go to the correct URL
The previous URL shows "test"
http://localhost/project/admin/common/test?directory=test/sub
It should show
http://localhost/project/admin/common/test?directory=test
Inspector Output
<ul class="breadcrumb">
<li>Catalog</li>
<li>test</li>
<li>sub</li>
</ul>
On view
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ul>
Question: How can I make sure the previous URL to shows the before folder correct URL.
I generate my breadcrumbs on my controller
$data['breadcrumbs'] = array();
$data['breadcrumbs'][] = array(
'text' => 'Catalog',
'href' => base_url('admin/common/test')
);
$directory_names = explode('/', $this->input->get('directory'));
foreach ($directory_names as $directory_name) {
$data['breadcrumbs'][] = array(
'text' => $directory_name,
'href' => base_url('admin/common/test?directory=' . $this->input->get('directory'))
);
}
Thanks to a solution now I found on another forum I will post on here to share
https://forum.codeigniter.com/thread-68653-post-346110.html#pid346110
$directory_names = explode('/', $this->input->get('directory'));
$directory_done = '';
foreach ($directory_names as $directory_name) {
$directory_done .= ($directory_done <> ''? '/':'').$directory_name;
$data['breadcrumbs'][] = array(
'text' => $directory_name,
'href' => base_url('admin/common/test?directory=' . $directory_done)
);
}
I created a menu page where it has a drop down menu with a list of menus from the database and it also has a textbox to enter new menus.
The problem I'm having is that I can't seem to figure out how to save my dropdown. So for example I have a menu called "About Us" in the drop down list and I want to create a new menu called "Team", and "Team" is a child of "About Us"
So in my table I would have something like this
id | parent | title
------------------------
1 | NULL | About Us
2 | 1 | Team
Menu Controller
function get_data_from_post()
{
$data['title'] = $this->input->post('title', TRUE);
$data['parent'] = $this->input->post('parent', TRUE);
if(!isset($data)){
$data = '';
}
return $data;
}
function get_data_from_db($update_id)
{
$query = $this->get_where($update_id);
foreach($query->result() as $row){
$data['title'] = $row->title;
$data['parent'] = $row->parent;
}
return $data;
}
function create()
{
$update_id = $this->uri->segment(3);
$submit = $this->input->post('submit', TRUE);
if($submit == "Submit"){
//person has submitted the form
$data = $this->get_data_from_post();
}else{
if(is_numeric($update_id)){
$data = $this->get_data_from_db($update_id);
}
}
if(!isset($data)){
$data = $this->get_data_from_post();
}
//$titles = array();
$query = $this->get('title');
foreach($query->result() as $row){
$titles[] = $row->title;
}
$data['titles'] = $titles;
$data['update_id'] = $update_id;
$data['view_file'] = "create";
$this->load->module('templates');
$this->templates->admin_template($data);
}
function submit()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('title', 'Title', 'required|xss_clean');
if($this->form_validation->run($this) == FALSE){
$this->create();
}else{
$data = $this->get_data_from_post();
$update_id = $this->uri->segment(3);
if(is_numeric($update_id)){
$this->_update($update_id, $data);
}else{
$this->_insert($data);
}
redirect('menus/manage');
}
}
create.php view
<div class="row">
<div class="col-md-12">
<h2>Create Menus</h2>
<h5>Welcome Jhon Deo , Need to make dynamic. </h5>
</div>
</div>
<hr />
<?php
echo validation_errors("<p style='color: red;'>", "</p>");
echo form_open('menus/submit/'.$update_id);
?>
<div class="row">
<div class="col-md-12">
<form role="form">
<div class="form-group">
<select name="menus">
<?php
foreach($titles as $title){
echo "<option value=".$title.">".$title."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Title</label>
<!-- <input class="form-control" /> -->
<?php
$data = array(
'name' => 'title',
'id' => 'title',
'value' => $title,
'class' => 'form-control',
);
echo form_input($data);
?>
</div>
<?php
$data = array(
'name' => 'submit',
'id' => 'submit',
'value' => 'Submit',
'class' => 'btn btn-success',
'style' => 'width: 100%',
);
echo form_submit($data);
?>
</form>
</div>
</div>
<?php
echo form_close();
?>
UPDATE:
this is what I have when I print_r($titles)
Array
(
[0] => About Us
[1] => Home
)
If there is anything you don't understand or if you need me to give more information please let me know.
You should have declared a model. From there, you can create a function that will save the values in the database that you initialize via controller. You should utilize the MVC pattern of it. CodeIgniter has a great documentation to read about what I am pointing out.. https://codeigniter.com/user_guide/overview/mvc.html?highlight=model
My code right now:
<?php echo anchor('admin/delete_msg/'.$obj->id, 'DELETE MESSAGE', array('onclick' => 'return confirm(\'Are you sure?\');', 'class' => 'delete-button')); ?>
But Iwould liek to use something like:
<?php echo anchor('admin/delete_msg/'.$obj->id, '', array('onclick' => 'return confirm(\'Are you sure?\');', 'class' => 'delete-button')); ?>
So there is no "DELETE MESSAGE" text and I can use image instead.
But if I leave the single quotes empty the link will show up e.g. http://localhost/project
Any advice how to solve that within anchor function and not going via <a href="...?
You could use CSS to hide the text and pull in a background image:
.delete-button{
display: inline-block;
width: 80px; /* fits background-img width */
height: 40px; /* fits background-img height */
text-indent: -9999px;
background: url('path/to/image') top left no-repeat;
}
I have solved it using space like:
<?php echo anchor('admin/delete_msg/'.$obj->id, ' ', array('onclick' => 'return confirm(\'Are you sure?\');', 'class' => 'delete-button')); ?>
Don't use the anchor helper. Just pass $obj to the view(html.php)
<a rel="nofollow" onclick="return confirm()" class="btn btn-delete-icon" href="<?php echo site_url('admin/delete_msg/'.$obj->id.'')?>"> </a>