I've stored all my images in database (Mysql), but when I whant to see that image with Fancybox, it display only the binary data, not the image.
My code:
<a href="/controller/action/id" class="group" rel="fancy">
<img src="/controller/action/id/thumb" />
</a>
For url "/controller/action/id" I use this code to return the image:
header("Content-type: {$image['Image']['image_type']}");
echo $image['Image'][ $size ];
I use CakePHP.
Thanks.
$.fancybox({
'type':'image'
});
This solved my problem.
Nedd to specify 'type': 'image'.
Related
I am saving an uploaded image like this:
$profile_picture = $request->file('profile_picture');
$user->profile_picture = $profile_picture->getClientOriginalName();
Storage::disk('public')->put( $user->profile_picture, $request->file('profile_picture') );
and then I am trying to display that image in HTML with:
<img class="img-fluid" src="{{ asset('storage/'. Auth::user()->profile_picture) }}">
the image is being saved in storage/app/public, but the image is not showing in html, how do i go about this?
thank you
You may use response method on a Laravel filesystem
return Storage::disk('public')->response($user->profile_picture);
N.B: In order to do that, you need a Laravel route. The above code should be located in a controller method
I'm using OctoberCMS with Laravel.
I use File Upload / Media Finder to attach an image. I'm trying to add thumbnails to the Backend Model columns.
I tried following these guides:
https://octobercms.com/forum/post/how-to-display-pictures-in-backend-lists
https://octobercms.com/docs/database/attachments
File Upload
Columns Thumbnail
Model
I have in my Model Catalog.php
public $attachOne = [
'photo' => 'System\Models\File'
];
In columns.yamal
Field photo set to partial and added path.
In the partial _photo.htm I have
<?php echo $this->photo->getThumb(100, 100, ['mode' => 'crop']); ?>
Error
I get Error: Call to a member function getThumb() on null.
If I use <img src="" /> in the partial it will display an empty image in the columns, but I don't know what php to put as the src.
According to column widget when you are using partial it will pass $record variable corresponding to that row, [ do not use $this there ]
means for that row $record will point to current record so you can use $record
your _photo.htm should be like this
<img src="<?php echo $record->photo->getThumb(100, 100, ['mode' => 'crop']); ?>" />
<!-- OR -->
<img src="<?= $record->photo->getThumb(100, 100, ['mode' => 'crop']) ?>" />
update
If you are using media finder then you can not use getThumb on the file as it will be just path for that file so its not possible to resize that image using getThumb [ Its only possible with relational attachments (attachMany, attachone etc...) ]
Although you can use this to show small image
<img height="64" width="64" src="<?= 'https://october-plaza.com/storage/app/media/'
. $model->photo ?>"` />
you can add this height="64" width="64" to show image as thumbnail (but it will be full image just scale down using attributes).
if any doubts please comment
You can do this with OCTOBER IMAGE RESIZER plugin in your columns.yaml file
Usage in Backend List
The image resizer can also be used on backend lists with the type of thumb, e.g.
image:
label: Image
type: thumb
sortable: false
This works with:
AttachMany (uses first image) Docs
AttachOne Docs
Mediafinder Docs
You can also optionally pass width (default 50), height (default 50) and options as follows:
image:
label: Image
type: thumb
sortable: false
width: 75
height: 100
options:
mode: crop
i want to make qrcode, in there i can make it but i have something trouble when i want to change the format of qrcode to png file. but its only show symbol
here my view :
<?php echo QrCode::size(265)->generate($row->id) ?>
this qrcode i use :
"simplesoftwareio/simple-qrcode": "~1"
here my referance : https://www.simplesoftware.io/docs/simple-qrcode
can anyone help me ? or can someone give me solution ?
before i change format to png :
and this after i change it :
There are more simple example available as well.
<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(100)->generate('QrCode as PNG image!')) !!} ">
If you are formatting it as png file format, you need to include it with a <img> tag.
Taken from the documentation
//Inside of a blade template.
<img src="{!!$message->embedData(QrCode::format('png')->generate('Embed me into an e-mail!'), 'QrCode.png', 'image/png')!!}">
You can also do this:
$png = QrCode::format('png')->size(512)->generate(1);
$png = base64_encode($png);
echo "<img src='data:image/png;base64," . $png . "'>";
In controller
$path = getenv('IMAGE_URL')."/img/logo.png";
$png = QrCode::format('png')->merge($path, .17, true)->size(300)->errorCorrection('H')->generate($data);
$png = base64_encode($png);
In blade file
<img src='data:image/png;base64,{{$png}}'>
I came to this page because I needed to create a PNG file to send inline in an email in laravel8.
I used the examples above in order to create the QR code as a png which worked brilliantly. I used the following code:
<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(100)->generate('QrCode as PNG image!')) !!}" />
However a number of email services (including Gmail) do not display images that use inlined base64 as above. Instead, they require you to add the base64 image as an attachment to the email and then reference that attachment in the img src.
Thankfully laravel (I'm using laravel8) has a really cool function that does this for you, so my code ended up looking like this (which worked):
<?php
$qrCodeAsPng = QrCode::format('png')->size(500)->generate("my text for the QR code");
?>
<img src="{{ $message->embedData($qrCodeAsPng, 'nameForAttachment.png') }}" />
The $message variable is one that is in every blade that is being sent as an email in laravel. In my case I did not want to create an actual image on the server, but if you wanted to use an image that you had stored you would use $message->embed().
All i want to do is display an image if the image exist if not display blank but i cant seem to figue it out.
Im storing my image path file in my database, in the column called, file and path is stored like this:
/images/file_name
now if there isnt an image being posted it stores /images/
if ($news_item['file'] = '/images/11.jpg') { ?>
<img src="<?php echo base_url(); echo $news_item['file'] ?>">
} else {
echo '';
}
?>
If you need anything more of me let me know but just to give you an idea of what I'm achieving.
its a news post, if you create a post you have a title and description and you have the choice of entering in a file/image.. if you leave it blank it will enter in /images/ and if you enter an image in it will be: /images/file_name (this is inserted into a db)
Check like this:
if (file_exists($news_item['file'])) {
I would simply use the alt property of the image to show an alternative text:
<img src="<?php echo base_url(); echo $news_item['file'] ?>" alt="no image">
or, if you want it to be completely blank:
<img src="<?php echo base_url(); echo $news_item['file'] ?>" alt="">
EDIT:
To completely remove the image, you can conditionally generate the image or an alternative text:
if (file_exists($news_item['file'])) {
echo '<img src="'.base_url().$news_item['file'].'">';
} else {
echo "No image";
}
I suggest you to store the default.jpg in DB ( You can set this default in DB ). And store the default.jpg image in image folder. So that you don't need to change anything in coding.
I am trying to replace the default lightbox 'modal' to 'slimbox', because 'modal' doesn't have the navigation arrows.
Demo of slimbox with navigations
Demo of modal without navigations
I am using these paths to modify the calling of slimbox
[templatename]/html/com_virtuemart/productdetails/default.php
components/com_virtuemart/productdetails/default.php
Joomla v2.5
Virtuemart 2.0.6
Slimbox2
The following is my attempt:
//Enable Slimbox2 plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/slimbox/slimbox.css');
$document->addScript($front.'js/slimbox/slimbox2.js');
$js = 'jQuery(document).ready(function($) { $("a.lightbox").slimbox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="lightbox" rel="lightbox"'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
?>
But its still not working I wondered what's wrong?
[Reference][3]
You aren't applying the slimbox class to the image reference, your applying it to the container of the image aren't you? You need to deal with the image file url directly in my opinion.
// get the file_url of the first image
$imgPath = $this->product->images[0]->file_url;
// output the image
<a class="slimbox" href="<?php echo $imgPath; ?>">
<img src="<?php echo $imgPath; ?>" alt="" />
</a>