I have a requirement where I want to restrict a user to upload profile picture of specific aspect ratio only say square image.
I thought of using module available such as:
1) Manual crop
2) Javascript image crop
but no luck, none working fine.
Then I thought of adding custom validation of forms using hook_form_alter(), adding custom validator name to validate property of form, but I'm stuck how to fetch the uploaded file dimensions so I can check if it meet the requirement of aspect ratio.
Any suggestion of module by which I can achieve this of a feature where user can crop image while uploading or any help in how to move forward to write custom validation, would be really appreciated.
I'm new to Drupal. :S
In Configuration » Media » Image styles you can add a new Image Style and crop the images to your specific aspect ratio.
In Structure » Content types » "Your Content Type" » Manage Display you can set this Style to your Image Field. That way all Images will be croped.
Related
I'm trying to extract cropped portion in pdf in PDFTron. The crop feature creates a new page instead I want to get the cropped image and make send it in a API call in ReactJs.
Can anyone help me in extracting the cropped area.
EDIT
I'm trying to get cropped portion of the page, in PDFTron by default it crops the page and creates a new page with the cropped part. I want to get the cropped part of the page in form of an image without creating a new page and make an API call.
OS: Windows
Framework: ReactJS
We do not have that functionality supported out of the box, but what you could do is build custom button to do something similar. We have an example you might be interested here - https://groups.google.com/g/pdfnet-webviewer/c/kpW94WwAfaA/m/-UAavgReDAAJ. Note that this example is a bit old, so there might have been some API changes since.
Thanks.
I am working on a react project in which we generate new images by fitting uploaded image in a tv screen, or laptop screen or mobile screen. So what I want is a way in which I can place the uploaded image into this below image
In the black tv screen I want the uploaded image to fit and below there will be download option to download the uploaded image.
I searched for that and came across cloudinary react library. So I wrote this code to somehow fit an image inside this image but I can't seem to find any way to download that image.
If you have any idea of doing this please share with me.
Thank You in advance
You can overlay images on other images without having to use a particular Cloudinary SDK, as outlined here: https://cloudinary.com/documentation/image_transformations#adding_image_overlays
You can then place them more specifically using x and y coordinates in the URL as outlined here: https://cloudinary.com/documentation/image_transformations#placing_overlays
Once you have generated an image with the overlay positioned correctly (and with any other transformations you may wish to process), you can download the generated image as normal.
I have a question related to React Native.
I have existing application that should be themed and theming should be part of the configurable settings. There should be 3 aspects of such theming: changing colors/theme, changing logo and add custom fonts
I see this is a way that there will be settings view where:
there will be possibility to upload image, image will be stored in filesystem in ios and android and then used as a brand logo
there will be multiple settings regarding some primary, secondary, buttons colors as hash values, or maybe some color picker component
The most complicated stuff is having custom fonts that can be configured by user in setting view of application. Anybody have experience with doing such a thing?
Any thought/suggestions in above points will be helpful. Like links to native libraries for both platform or any tips from more experiences React Native developers
The best ways I see to achieve what you want are :
Use https://github.com/itinance/react-native-fs to access file system so you can easily store and access the logo that the user want. If the image has some size restrictions you could as well store your image Base64 string in AsyncStorage but this is not recommended.
You can have a kind of theming system by using a global style file that your screens use, the values requested (for example "dark", "light" etc...) can be store in AsyncStorage.
Do you want the user to be able to use his own personal font ? I don't think this is possible. If you want to have multiple fonts and the user can choose which font will be used in a list for example you can follow this tutorial to install custom fonts : https://medium.com/#kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78. Then all you want to do is use your theming system to select the fontFamily that your text elements will be using !
Let me know if I'm not clear enough or you need advices, I recently did what you try to achieve :)
I am using ngImgCrop directive to crop images in my application. As a first step, the actual image gets uploaded to the server as soon as the user selects it. The second step is to crop it. I need to know the coordinates of the cropped image to send it to server so that it crops the image based on the coordinates.
Is it possible to get the coordinates of the cropped image? Please let me know
You can do the cropping in the browser before it gets uploaded, I have done it using Danial Farid's angular file upload
https://github.com/danialfarid/ng-file-upload
and ngCroppie,
https://allenroyston.herokuapp.com/access/acr-croppie/
It's a wrapper for Foliotek's Croppie
http://foliotek.github.io/Croppie/
Please provide any examples or links which clearly explaining to create simple image gallery in Drupal 7.
Actually the image gallery should be in Thumb Nail Image with 4 images per row.
It should be categorized with simple menu.
If there is sub category, then there should be drop down menus.
Finally the gallery should be with pagination links.
I've tried with taxamony, but it not clear display as expected in front end.
Please provide the better way either thru code or any modules available.
There are different ways to do an image gallery. If something like galleria is what you are looking for you can do it very easily just by using an image field and drupal galleria module.
But in your case, you will have to use views. In that pull out the images you want, choose the
display as grid. Set the no. of columns to 4. Link to the original image. Then you can use the
Lightbox module to open them in a lightbox, if you want one.
For pagination you can use the default views pagination settings.
This might help you. Check out.