I'm trying to build a Drupal 8 Open Social site, but I'm currently stuck on the following:
Whenever I want to upload a JPG or JPEG file I get the AjaxError below. PNG and GIF work perfectly fine.
AjaxError:
Er is een AJAX HTTP fout opgetreden.
HTTP-resultaatcode: 200
Debug informatie volgt.
Pad: /stream?element_parents=field_post_image/widget/0&ajax_form=1&_wrapper_format=html
Statustekst: OK
Antwoordtekst:
And following the content in the path:
[{"command":"insert","method":"prepend","selector":null,"data":"\u003Cdiv class=\u0022alert alert-danger alert-dismissible card-radius\u0022 role=\u0022alert\u0022\u003E\n \u003Ca href=\u0022#\u0022 role=\u0022button\u0022 class=\u0022close\u0022 data-dismiss=\u0022alert\u0022 aria-label=\u0022Sluiten\u0022\u003E\u003Cspan aria-hidden=\u0022true\u0022\u003E\u0026times;\u003C\/span\u003E\u003C\/a\u003E\n \u003Ch4 class=\u0022sr-only\u0022\u003EFoutmelding\u003C\/h4\u003E\n Er is een fout opgetreden. Het bestand dat werd ge\u00fcpload is waarschijnlijk groter dan de maximum toegestane bestandsgrootte (64 MB).\n \u003C\/div\u003E\n","settings":null}]
Just to clarify, my minimum upload size is currently 64MB and the JPG/JPEG files I've tried to upload are below 1MB.
Could anyone point me to the right direction to be able to upload JPG/JPEG files?
Thanks to EricLauvault's hint I've managed to find my issue.
I had to use the composer command:
Composer Require lsolesen/pel
because my install was apparently missing its installment.
Related
Before posting this question of mine I checked the similar problems but it doesn't solved my problem.
On my form I have the encrypt type
<form action="{{ route('user.update_avatar') }}" method="post" enctype="multipart/form-data">
...
</form>
Here's my validator
$request->validate([
'avatar' => 'required|image|mimes:jpeg,png,jpg,gif,svg'
]);
Here's the properties of the image which my form is accepting
Here's the image that gives the error
it puzzles me because they're both PNG but the other has an issues even though the PNG is included in my validator. The Error says,
Please help me solve this puzzle. Thank you so much in advance!
You should check your php.ini settings. Default is that uploads can only be 2M max
You need to check upload_max_filesize and post_max_size and make sure they are large enough to accommodate your uploads
Note that in php.ini, sizes are expressed as 4M, 5M etc (don't add the B)
So, I have an challenge with webp images on my site. As you can see below it doesn't show the image but instead renders the image code.
When I use a jpg file it's works like a charm. My code is below. The image should be shown as 'cover' on a div. The framework I use is Foundation 5. I know it is outdated but I'm working on a new site and for now don't want to upgrade but thought serve webp images instead of jpg's could be a quick fix to limit the bandwith on Cloudinary, where the images are hosted.
<div class="small-6 medium-4 large-4 columns" style="background-size: cover;" data-interchange="[/-/media/Global/NoImage.jpg, (default)], [https://res.cloudinary.com/Company/image/upload/w_195%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (small)], [https://res.cloudinary.com/woningnet/image/upload/w_300%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (medium)], [https://res.cloudinary.com/woningnet/image/upload/if_ar_lt_1%3A1/h_600/if_else%2Cw_800/if_end/c_fill/f_auto/v1625496788/WRB/T/3554/t2scdia2gtw8vswjh575.webp, (large)]" data-uuid="interchange-qqqAg0">
I've been searching online but so far no solution, most things I've found where explanations why you should webp. Any idea's?
I happen to be using Foundation 6.7.4 and found the solution by making a change to the foundation.js or min.js file depending on which one you are calling and adding |webp to the end of the path match.
(path.match(/\.(gif|jpe?g|png|svg|tiff)
to
(path.match(/\.(gif|jpe?g|png|svg|tiff|webp)
Edit/Update: I Found a copy 5.5.1 on an older site the foundation.js or min.js
if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
Should be able to add |webp
if (/\.(gif|jpg|jpeg|tiff|png|webp)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
I am trying to give a given size to an image so that it is displayed with that size in an email but it does not work.
Here is the image I am trying to resize
Does anyone have any idea how to fix it?
This is the code I am using.
I use this code on my blade to send mails.
<img style="width:570px !important;" src="{{asset('images/aspecto-proyecto/imagen_horizontal/'.$proyecto.'/'.$nombre_banner)}}" id="banner">
I am using Carrierwave to upload images in rails4.
In the html view page the image is showing. But, when generating the pdf, from this view, the image is not showing.Instead , a blank box is showing.
From the view, while inspecting the path is showing as below:
<img alt="Small images" src=" http://127.0.0.1:3000/upload_
files/6/student/image/1/small_images.jpg">
The code i used is:
<%=image_tag Student.find(id).image_url(:small) %>
If the image is stored in app/assets/images, then the images will appear.But, i need to upload the image in this location only.
Can u pls help...
Thanks in advance.
I could do it with php Laravel this way >>
<img alt="Small images" src="{{base_path().'path/to'image.jpg'}}">
I have no experiences with Ruby , but try to find something similar.
i create a Document(PDF) and get the Content from the Umbraco nodes.
But there's a problem by displaying the images. How can i display or get the images from the Media libary of Umbraco? Is there a way, offered from Umbraco to get the Image(s)?
Thanks a lot.
If I understand your query correctly, you a pretty much there.
You should simply be able to get the umbracoFile path (just like you are for the PDF file) and simply declare it as the img src!
With Razor...
<umbraco:Macro runat="server" language="cshtml">
<img src='#Model.MediaById(#Model.imgProperty).umbracoFile' alt="" />
</umbraco:Macro>