I have the following codes to test the image_style_url() on the latest drupal(v7.59)
<img src=“<?= file_create_url($fileuri); ?>” />
<img src=“<?= image_style_url(“medium”, $fileuri); ?>” />
The file_create_url() can show the original image properly, and the image_style_url() can only give the styled image url, but not creating any styled image in the styled image folder.
the public:// and the /tmp directriea are in 777 permission setting, so it won’t be related to permission problem.
Can someone tell me what is wrong with my drupal?
Seems you have to create the image derivate first. Normally this happens automatically when uploading an image via an image field upload. But the automatic derivate creating might simply get skipped on file field uploads, or when using some other image which isn't managed by Drupal at all, or when you added an image style after you already uploaded the image.
Have a look at image_style_create_derivative($style, $source, $destination). Check out the comments as well as $style needs to be an array returned by image_style_load('MYSTYLE').
Creates a new image derivative based on an image style.
Only issue left open is how to check first if the derivate already exists before calling that function. Maybe you can check what file_exists(image_style_path($style_name, $file_uri)) returns, first.
Read more: https://drupal.stackexchange.com/a/22555/15055
Nothing wrong with your Drupal. Derivative image is not physically created until someone visits the listing where that style is used.
Example: You create new node and upload an image on it. Original image is within files folder. But if you use for example teaser image style and if you go to teaser folder the image is not created there until someone visits the page where "teaser" image style is used. You can easily test this on clean Drupal. Basically the image is created on the fly on HTTP request.
Related
I'm using the vue-markdown package to render markdown. It seems to work except the images don't display. The file path is correct as I can have an img show up correctly
<img src="#/assets/7801_4_lang_image.png"><!-- shows up -->
<vue-markdown></vue-markdown><!-- doesn't show up -->
Changing the # to .. doesn't change anything either, the top one displays but the bottom one doesn't. The case of png/PNG also doesn't matter. Am I referencing the image wrong?
The file loader doesn't know about images in Markdown so Webpack doesn't know to bundle them.
Typically you need to require() the image source (see https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports)
You could try this but I'm not entirely sure if it will work with the vue-markdown component.
 }})
To use the source prop, you would use something like
<vue-markdown :source="`})`">
See https://v2.vuejs.org/v2/guide/syntax.html#Attributes
You could also use the public folder who's contents are always bundled. For example, for a file public/images/7801_4_lang_image.PNG and assuming your app runs at the domain root
I built a website in plain html/css with my own design. Now I need to put this website in TYPO3 CMS 9.5.4. Unfortunately it's my first time working with TYPO3 and I don't really know what I'm doing.
What I got so far:
Most of the website is already working fine. I included fluid_styled_content and my setup basically looks like this:
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
file = fileadmin/sitedesign/Resources/Private/Templates/Page.html
variables {
content < styles.content.get
}
}
The Page.html file is basically my whole html template and I put
{content->f:format.raw()}
where I want my content.
All content I create in the backend is displayed as I want except of images.
My question:
I can display images by creating a "Text & Images" content element and adding the images in the "Images" tab. In the "Media Adjustments" section I can now set the width and height of each element and below I can choose the number of columns.
However these do not change anything in the source code of my website i.e. in the content variable, so all images are displayed in full size.
What can I do to make the width/height appear in the source code (ideally as width/height attribute of that element)?
Hey Erik and welcome to TYPO3. Usually TYPO3 will take care of the correct images sizes when using the default Content Elements (e.g. Text & Images). But TYPO3 requires ImageMagick or GraphicsMagick installed on the server to modify the pictures.
You can check out if your system matches all requirements using the "Environment" module in the TYPO3 backend (modules on the left side of the backend). Then you will see a function called "Image processing" which will test the required image functions of your server.
In angular2 using aberezkin/ng2-image-upload
I have in my template
<image-upload
[max]="1"
[url]="uploadUrl"
[preview]="true"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
(onFileUploadFinish)="imageUploaded($event)"
(onRemove)="imageRemoved($event)"
(isPending)="disableSendButton($event)"
></image-upload>
This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload
It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?
Also is there a way to filter file type allowed?
So you want to let user select the image and able to change it befor Uploading
I made a simple example of preview and uploading image I think it will be helpful for you
Preview and uploade image angular2
I'm starting with Commerce Kickstart 2 together with demo store.
I added a product and upload one image, this product has one of the demo store variation types (Bags & Cases) and the product display type associated.
It seems simple since I didn't change nothing. But when I click in main menu the products already there are listed fine, with product image, only my new product don't show the image.
I see in variation types Bags & Cases that the Images field, Column Format, is defined as image delta, Image style: product_medium. And that is the point. In MySite/sites/default/files/styles directory are the styles of images. In that directory there is the product_medium directory where the images showed when in View Mode Node:Product list (the list of bags listed when click in To carry).
Well, the fact is when I create the product there is no option to load an image that will saved in MySite/sites/default/files/styles/product_medium directory. And that's the problem. Since when I manually copy the image to that directory, the image is showed up.
Where I define this product_medium image?
You don't have to manually copy the images. 'product_medium' is an image style, which is already created when you automatically installed the demo store. So, once you upload an image, the image will be saved in the product_medium folder.
Are you sure that you have given correct permissions to the sites/default/files directory, which being the full permission?
I'm trying to get different image sizes on my wordpress website. For instance, I want the image size "thumbnail" to be displayed in category post list. While image size "Medium" should be displayed on actual post page. Right now, only thumbnail size images get displayed both on post list and on individual post. I realize I need to make some changes in my theme, but exactly what are those?
Look for the template file of your theme that handles the "post page" as you call it- most likely "single.php" (for single posts) and "page.php" (for pages)-unless the theme author has added custom templates- and find where the thumbnail image is being referenced. You should be able to reference the "medium" version of your uploaded image there instead. However, the theme author may be using an automatic thumbnail script to resize your image (such as TimThumb) and not the Wordpress-generated thumbnails as you might be thinking. If this is the case, you will have to swap out the thumbnailing code on the image tag in 'single.php' for a reference to the "medium" image...
Perhaps if you provided the example code in your single.php file where the thumbnailed image is called would help us give you a more specific answer on how you need to changes things.