showing each single image of products in laravel - php

I have double tables one for products and one for files, files table have multi images related to the one product.
I want to show only one image for each product not all of them.
I make this code but it's back with the for example 3 times with the first image!
#foreach($lastProducts as $key => $lastProduct)
#if($key == 1)
<div class="bl-thumb">
<img src="{{url('website/'.$lastProduct->path.$lastProduct->->file}}">
</div>
#endif
#endforeach
I need to show the first image at my page and other pages show the second and third image for the product.
And here's my view which want to show all images on it :
<div class="slim-scroll">
<div class="item active">
<img src="/website/images/{{$product->image_1}}" alt="" class="img-responsive" />
</div>
<div class="item">
<img src="/website/images/{{$product->image_2}}" alt="" class="img-responsive" />
</div>
<div class="item">
<img src="/website/images/{{$product->image_3}}" alt="" class="img-responsive" />
</div>
<div class="item">
<img src="/website/images/{{$product->image_4}}" alt="" class="img-responsive" />
</div>
</div>
It's showing me something like that without the foreach

If I understand correctly, you have multiple products and each product has multiple images. If on page 1 you want to display product 1 image 1, product 2 image 1, product 3 image 1...then on page 2 you want to display product 1 image 2, product 2 image 2, product 3 image 2 you could try something like this:
Page 1:
#foreach($products as $product)
<div class="bl-thumb">
<img src="{{url('website/' . $product->images->pull('1')->path . $product->images->pull('1')->file}}">
</div>
#endforeach
Page 2:
#foreach($products as $product)
<div class="bl-thumb">
<img src="{{url('website/' . $product->images->pull('2')->path . $product->images->pull('2')->file}}">
</div>
#endforeach
Really this logic should be in the controller though. You could use a get variable to define what page you are on and filter for the proper image before you render the page.

Related

How can I delete particular image in the database and folder inside one action in PHP?

I have a table in the database called products. The table contains id which is the primary key A_I property, name, and price.
The table contents are displayed on the home page of my site. The same site has an admin panel that manages the stock, one of them being deleting particular products from the table as well as from the home page.
The problem is when the product is deleted its image still remains in the folder I don't want that to happen.
I have made research and found about the unlink function that deletes a $file but I can't figure out how to use it in my case. How can I relate/link a particular image to its id so that the unlink method will know which image to delete from the folder? Somebody help, please.
Here is my code that displays the products to home page:
<div class="container">
<div class="row text-center">
<?php while($product=$result->fetch_assoc()){ ?>
<div class="col-lg-3 col-md-4 col-sm-6 col-11 mx-auto my-3">
<h4><?= $product['product_name']; ?></h4>
<a class="test-popup-link" href="<?= $product['product_image']; ?>">
<img src="<?= $product['product_image']; ?>" class="img-fluid rounded mx-auto d-block" alt="Hp 840" id="images">
</a>
<p class="list-price text-danger">List Price <s>Ksh. <?= $product['list_price']; ?></s></p>
<p class="price">Our Price: Ksh. <?= $product['our_price']; ?></p>
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#<?= $id; ?>">Details</button>
</div>
<?php } ?>
</div>
</div>
How can I relate/link a particular image to its id so that unlink method will know which image to delete from the folder?
Exactly the same way you already know how to display the image:
<img src="<?= $product['product_image']; ?>"
The row in the database must already contain the file name for that to work, so before deleting the row, you would write something like this to find the image to delete:
Select product_image From products Where id = ?
If the name contains the file extension...
<?php unlink("images/{$product['product_image_name']}"); ?>
if the name does not contain the file extension, then add it..
<?php unlink("images/{$product['product_image_name']}.jpg"); ?>
or if the file extension is in another field
<?php unlink("images/{$product['product_image_name'] . $product['product_image_extension']}"); ?>

How to display sub field (image) with shortcode in Wordpress?

These are the custom fields composition:
1 Group Footer
1.1 Group Col2
1.1.1 bbcimg (this is the image ID)
1.1.2 bbc-rss (this is the RSS feed ID)
I have the following code displaying the bbc-rss:
<div class="col-md-3">
<?php
$footer = get_field('footer'); // 'footer' is your parent group
$col2 = $footer['col2']; // 'col2' is your child group
?>
<div class="widget_item widget_latest sm-m-top-50">
<h4 id="white" class="text-white">Latest News</h4>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/bbc_rss.png" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['bbc-rss'];?></p>
</div>
</div>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/reuters_rss.png" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['reuters-rss'];?></p>
</div>
</div>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/cnbc.jpg" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['cnbc-rss'];?></p>
</div>
</div>
</div><!-- End off widget item -->
</div><!-- End off col-md-3 -->
I have created the image field bbcimg with the following properties:
Field label: bbcimg
Field Name: bbcimg
Field Type: image
Instructions: -
Required: No
Return Format: Image Array
Preview Size: Medium(300x300)
Library: All
Minimum: Width 40px, Height px 40 File size - MB
Minimum: Width - px, Height px - File size - MB
Allowed file types: -
Conditional Logic: -
Wrapper Attributes: -
And the image is already uploaded in the custom field. See picture:
Question:
How to write the logic to display the picture on the website?
Thank you very much in advance!
been trying to use
First you need to find out what is getting returned inside the custom field.
Add a good old print_r to your code somewhere:
<?php print_r($col2['bbcimg']) ?>
That will print out an array of values like Array( 'url' => 'http....something.jpg', 'size'=>'full', ..etc)
Then you can identify which array value gives you the full URL to the image. Say in this case it would be a field called url, then you can use that value as follows:
<div id="gris" class="widget_latst_item_text">
<img src="<?php echo $col2['bbcimg']['url']; ?>" alt=""/>
<p><?php echo $col2['bbc-rss'];?></p>
</div>

How to make bootstrap card body paragraph on the same position regardless of card title

I'm pulling a list of news articles from the database and I'm putting them in a bootstrap card. My problem is when the news title is longer obviously the paragraph will be in a different position, look at the picture to better understand the problem
I have tried to set different margins and padding styles but I know it needs to be dynamic depending on the title size but what's the best possible way to do that? Here is my code.
<div class="item card ">
<img src="public/img/news/<?= $singleNews['news_image']; ?>" class="card-img-top" alt="blog">
<div class="card-body">
<a href="passion.html">
<h5 class="card-title ">
<?= $singleNews['news_title']; ?>
</h5>
</a>
<div class="card-paragraph ">
<p>
<?php
// $shortDetail = strlen($singleNews['news_short_detail']) > 70 ? substr($singleNews['news_short_detail'],0,70):$singleNews['news_short_detail'];
echo $singleNews['news_short_detail']; ?>
</p>
</div>
read more
</div>
</div>
There are two options
OPTION1: set min-height of title tag and align it to center via line-height or flex.
OPTION2: set specific height and then font-size to vw unit so that it adjust it self with overflow:hidden

Add a unique style class to each mySQL entry on page?

I have a php function to retrieve the three most recent entries to a table that holds news highlights. Here is my function:
function getHighlights(){
return $this->query("
SELECT *
FROM `highlights`
ORDER BY `inserted` DESC
LIMIT 3
");
}
These highlights are then placed on my homepage via a foreach loop. Here is my code:
<?php foreach($highlights as $a){ ?>
<div class="col-md-6 highlight">
<div class="highlightItem">
<img class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
<?php } ?>
I'd like for my homepage to ALWAYS be in this format:
News Highlight Format. However, the only reason it's in that format right now is because the images have predefined sizes that fit nicely together.
I want to be able to reference the most recent news highlight and set that image to always display as 300 x 210. I also want to reference the next two highlights and set them to always display as 300 x 100.
What's the best course of action for this?
<?php foreach($highlights as $index => $a){ ?>
if($index == 0){
<div class="col-md-6 highlight">
<div class="highlightItem">
<img width="300" height="210" class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
}else{
<div class="col-md-6 highlight">
<div class="highlightItem">
<img width="300" height="100" class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
}
<?php } ?>
try to use that code

How to manage page--front.tpl.php images from back-end/admin-panel in drupal 7

I am working on a website in drupal 7, I have created a Home page in page--front.tpl.php with Static Html like the code below,
<div class="col-sm-8 col-xs-24 botmboxes">
<div class="row">
<div class="boxbotmimg">
<img class="img-responsive" src="./sites/all/themes/korhanifashion/images/PlasticRug-Boat.png">
<span class="hovblck"></span>
</div>
<div class="botboxhov">
<a href="<?php print $front_page; ?>limited_offers">
<img class="bbres" src="./sites/all/themes/korhanifashion/images/limroffer.png"></a>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-24 botmboxes botboxthree">
<div class="row">
<div class="boxbotmimg">
<img class="img-responsive" src="./sites/all/themes/korhanifashion/images/AnchorLine_BLCR_HI.png">
<span class="hovblck"></span>
</div>
<div class="botboxhov">
<a href="https://www.facebook.com/KORHANIhome">
<img class="bbres" src="./sites/all/themes/korhanifashion/images/fusonfbok.png"></a>
</div>
</div>
</div>
I want to manage these Images from back-end i.e from Admin-panel. So that Admin can change the images from Admin-panel, And also how Admin can put links to that images from back-end.
How I can do that?
Thanks in Advance
I usually solve similar issues(customizing the dynamic home page contents) by creating a custom content type(https://www.drupal.org/node/306792).
And then you can hard-code to read nodes of a specific type in your template file or use Views (https://www.drupal.org/project/views).
Added sample code:
$query = new EntityFieldQuery();
$query->entityCondition('entity_type', 'node')
->entityCondition('bundle', 'home_image')
->entityCondition('status', 1);
$result = $query->execute();
if (isset($result['node'])) {
$nodes = node_load_multiple(array_keys($result['node']));
foreach ($nodes as $node) {
$img_url = file_create_url($node->field_image['und'][0]['uri']);
}
}
In the above code, 'home_image' is the name of content type you have created and 'field_image' is the name of image field. You can add and edit the name of image field when editing fields of content type. Please be sure to set the field type to 'Image'.

Categories