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
Related
I use woocommerce.php in WordPress, it contains the woocommerce_content(); line to display WooCommerce informations (https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/). I like to add a custom header background image to this page. Basically I generate a Meta Box, which has an input field to upload the image. I retrieve the informations like:
echo get_post_meta( get_the_ID(), header_background_image', true );
and display it like so:
$headerBackground = get_post_meta( get_the_ID(), 'header_background_image', true );
<header class="header" style="background-image: url('<?php echo $headerBackground; ?>')">
This code works well all pages but WooCommerce and I can't figure out why. Do you have any idea?
In my Laravel 5.6/"vue": "^2.5.7/"vuetify": “^1.0.8” application I use carousel of
images ( https://vuetifyjs.com/en/components/carousels#introduction )
it works but if there are uploaded images of different size the images are partly cut and view is broken.
I tried to make like :
<v-carousel>
<v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id"
:alt="nextArtistImage.image_url" style="width: 200px;height:auto;">
<div class="carousel_image_title">{{ nl2br(concatStr(nextArtistImage.description, 100)) }}</div>
</v-carousel-item>
</v-carousel>
But my attempts to change style did not alter anything...
If there is a valid way ?
Thanks!
Try...
<v-carousel>
<v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :key="nextArtistImage.id">
<img :src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>
</v-carousel-item>
</v-carousel>
The above html takes advantage of the default slot for the v-carousel-item.
<v-carousel height="auto">
<v-carousel-item></v-carousel-item>
</v-carousel>
enter link description here
Based on Vuetify Documentation
As I saw images are set as background pictures, for <div class="v-image__image--cover"></div>. They are not rendering on DOM as images (for example: <img src="image_src" />). So if you want to change image view, you have to override css properties of that div, for example background properties (background-position, background-size ...).
I am not sure it is a valid way or not, but if you want to change item's height you have to override carousel's height (<v-carousel>), because the height of <v-carousel-item> determined by height of carousel itself, or you have to override whole structure of carousel (change positions and some other css properties).
But there is one issue, I guess you want to render pictures of different original heights at one height, so that it does not turn off the view. This is a common problem for front-end developers. By the way, one of the best way to solve this problem is the structure you are trying to override.
The code below, shows the entire image within the carousel. Set the height of the v-carousel (300 in this example) and set that same value for the v-img max-height. If there are images that that wide but short, then limits to the width should also be added.
<v-carousel cycle v-model="model" height="300">
<v-carousel-item
v-for="(item, i) in items"
:key="i"
>
<v-img :src="item.src" contain max-height="300"></v-img>
</v-carousel-item>
</v-carousel>
Where items is defined as:
<script>
export default {
data() {
return {
items: [
{ src: require('#/assets/photo1.jpg') },
{ src: require('#/assets/photo2.jpg') },
],
};
},
};
</script>
#peter.edwards just a tiny mistake on your code:
<img src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>
Source of image cannot be loaded because is a string so the correct form should be <img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/> so the final form will be
<v-carousel>
<v-carousel-item
v-for="(itemnextArtistImagei) in artistImagesList"
:key="i"
><img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/>
</v-carousel-item>
</v-carousel>
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().
I have created a custom image attribute and added it to default attribute set in Magento. My new attributes are img_support and img_upgrade. I've displayed both images on product view page using this piece of code:
<?php if ($_product->getimg_upgrade()):
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'img_upgrade')->resize(85).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" "/>';
echo $_helper->productAttribute($_product, $_img, 'img_upgrade');
endif;
?>
Same code with the second custom image attribute name will display img_support image. When I set images and select them for these two attributes they'll display fine but when there is no image uploaded and selected for these attributes and I try to show it on product view page then it generates an error. Something like this:
a:5:{i:0;s:25:"Image file was not found.";i:1;s:3911:"#0 C:\Program Files\EasyPHP- 5.3.8.0\www\mymagentoroot\app\code\core\Mage\Catalog\Helper\Image.php(163):
Mage_Catalog_Model_Product_Image->setBaseFile('no_selection').....
And a long trace after that. So basically it fetches the image even though there is no image selected. Can anyone tell me how can I display my custom images in product view page of selected products? I have, say 10 products with default attribute set. So all of these 10 products CAN be set with img_support and img_upgrade but I want to show the custom images only on 5 selected products. If the images are set display. Otherwise don't. How can i do this? If there is any other proper or better way to do this then help me out here.
Thanks!
When a product has no image for a given attribute, Magento uses a placeholder image instead.
Basically, each image attribute must have a placeholder image in the skin directory, named with the corresponding attribute code.
In your case, you should create two new placeholder images for your two new attributes img_support and img_upgrade, in this skin directory : images/catalog/product/placeholder/your_attribute_code.jpg (either with a new image, or with a copy of one of the base placeholders)
This problem also happens if you upload image for that attribute then suddenly remove image file via FTP. It is not good to show the site down. To summarize, there are 3 ways to fix this:
1) Answer of #blmage: use place holder
2) Use try catch:
<?php
try {
if ($_product->getimg_upgrade()):
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'img_upgrade')->resize(85).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" "/>';
echo $_helper->productAttribute($_product, $_img, 'img_upgrade');
endif;
}
catch (Exception $e) {
}
?>
Check if the file is existed
getBaseMediaPath();
$baseFile = $baseDir . $_product->getImgUpgrade();
if (file_exists($baseFile)) {
}
?>
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'.