I use #astrojs/image
But when I use the address of a photo with an external link, it does not show the photo in the production environment
<Picture src={imageInfo?.imageUrl} widths={[200, 400, 800]} aspectRatio={16/9} sizes="(max-width: 800px) 100vw, 800px" alt={imageInfo?.alternativeText} />
Remote images have a few required props (src, alt, format, and dimensions). It looks like your missing a format
Related
I'm building a photography site. The user can click on links to various photo album components, e.g. an album of black and white portraits, an album of black and white architecture, etc.
The displayed contents (i.e., image file paths and corresponding image captions) for each album are detailed in a json file that is imported at the top of the album component, e.g. import {images} from './albums/bwportraits.js';, import {images} from './album/bwarchitecture.js';, etc.
Apart from the album-specific imports, the rest of each album component is identical. I would like a generic <Album /> component but be able to pass the json file to import as a prop, i.e. <Album album = "bwportraits" />, <Album album = "bwarchitecture" /> and the import within the <Album /> to be something equivalent to (the non-valid) import {images} from './albums/{album}';.
That is, I would like to dynamically specify which file to import. This does not appear possible - or, at least, I do not know how to do this.
It would, of course, be possible to import every album json file into the <Album /> component; they are reasonably small and the performance hit would be negligible. But this feels a little unclean to me. Is there a 'cleaner' workaround that anyone can suggest?
I created a server-side handler to use with image uploads in TinyMCE. It's not PHP - it's written in my server's server-side JavaScript.
It works fine, but the source that's created inserts relative paths to the imageUploads folder I created, like this:
<img title="Yamada-san 1963.jpg" src="../imageUploads/blobid1616028933077-1616028953409.jpg" alt="" width="145" height="229" />
If the post gets moved, it could break the link to the src.
My image uploader handler at my server returns JSON, as required, with the location using this format:
{ "location" : "http://example.com/imageUploads/' + theFilename + '" }
The location I'm returning looks like an absolute URL, so why is a relative URL used in the editor post? Is there some better JSON I can return?
Thanks.
I found the answer for this in another post.
In the tinymce.init() script this option needs to be added to the other options:
convert_urls: false,
Then the URLs saved are absolute.
I want to crop images in Fluid with the f:image or the f:uri.image viewhelper (TYPO3 8.7). Since TYPO3 7.2 the usual way does not work anymore:
This:
<f:image image="{file}" width="500c" height="500" />
does not work.
In the fluid guide I found the hint that since TYPO3 7.2 I have to use crop. I found this in the change log:
https://docs.typo3.org/typo3cms/extensions/core/7.6/Changelog/7.2/Feature-65584-AddImageCropping.html
So this should work, but it doesnt:
<f:image image="{file}" crop="0,0,500,500" />
The images are rendered but in default size.
Any ideas? Anything changed in later versions?
I tried with a fresh installation and found my fault.
cropping with c and m does indeed work in TYPO3 8 - the hint in the fluid manual is wrong.
in short syntax you have to use '' in order to send the c or m correct.
This syntax is wrong:
<img src="{f:uri.image(image:file, width:200c, height:200)}">
there is no error message and the images are rendered but the letter c is ignored. You have to use this syntax:
<img src="{f:uri.image(image:file, width:'200c', height:'200')}">
this will work.
One additional hint: after changing the syntax the images are not rendered every time but only when the size has changed. Sometimes you get simply the cached images ... Deleting the content on /fileadmin/_temp does help.
Well - perhaps it will help some one :-)
You can use f:image like below. it's work for me.
<f:image src="{file.originalResource.publicUrl}" width="770c" height="517c" height="350c" />
You could also specify the crop settings in tca and use this settings in the FE, for an example look at the repository : https://github.com/frans-beech-it/t3ext-config_examples.
Besides that, in the install tool you can check if cropping works on your machine. It can happen that there are already processed images for your size, if you adjust the cropping information of image with 1px a new processed image is created. If then the image works, clear the processed files to generate a new image for your desired formats.
I have a script that re-sizes images for me and use it to serve images as such:
http://mysite.com/createthumb.php?filename=mypic.jpg
Fancybox will serve the above image, using the following link:
<a href='createthumb.php?filename=mypic.jpg' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
But I need to re-size it do a size that is different from the default size, by passing a parameter 'size' as such:
http://mysite.com/createthumb.php?filename=mypic.jpg&size=2000
But when I change the fancybox link to the following:
<a href='createthumb.php?filename=mypic.jpg&size=2000' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
Now fancybox chokes and the link just gets served as an image without any lightbox. This is the case even if I change my code so that it doesn't even look at the size parameters. In other words, just adding the "&size=2000" to the end of my link seems to set fancybox completely off balance.
Any ideas about why this could be or how I can fix this?
The script can not guess the content type by looking at your link. You have 3 options:
1) Change links by appending image extension at the end, so the script can detect -
<a href='createthumb.php?size=2000&filename=mypic.jpg' class='fancybox' ..
2) Use CSS class name to specify content type -
<a href='..' class='fancybox fancybox.image' ..
3) Set type while initializing -
$(".fancybox").fancybox({type : 'image'});
It looks like fancybox is checking the ending of the URL to determine if it is an image or not. Change your URL to be createthumb.php?size=2000&filename=mypic.jpg
https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js
(line 767)
I have an xml sheet with some data and some images that i want to collect only a part using xslt.
However, there is one image with a particular classname that i would like to collect especially.
For example, the XML says:
<img class="itemImage" height="130" src="image.png" width="195"/>
How do I get the src attribute of this image by selecting it by classname with XPath?
This should work : //img[#class="itemImage"]/#src
This XPath will return the src of the first img node which has a src and has the specified class
(//img[#class="itemImage"]/#src)[1]
However, if you know anything at all about the structure of the xml, you can and should avoid the use of //, which requires the entire document to be scanned.