thymeleaf html tag with img file extension wild card - spring

I have a thymeleaf html tag that displays an image but the image could be a jpg or it could be a png.
Example
<img th:src="'http://localhost:8081/'+#{'/images/'}+${image}+'.jpg'"/>
I need to substitute the '.jpg' for a wild card extension so as to display either jpg or png
does anyone know what that piece of code at the end is?
Thanks

I don't think it is possible. Thymeleaf has no way to detect what is the type of the file and the browser need the full path of the file to show it.
I would advice to detect/add the file extension at the same place your set the ${image} value.
For example by converting the "image" variable to an object with "name" and "extension" fields
<img th:src="'http://localhost:8081/'+#{'/images/'}+${image.name}+${image.extension}"/>

Related

Laravel change img src on data fetch

I am retrieving text which contains images saved in WYSIWYG editor(Summernote). Is there a way to replace src attribute value in img tags using asset()?
Example:
<img src="images/image.jpg"/>...
To:
<img src="https://.../images.jpg"/>
I want solution which would cover all bases: spaces in image name, different extensions...
Sure, just use the curly brace syntax in your blade to render the asset()
<img src="{{ asset('whatever_you_want') }}"/>
I don't think you can do it in Blade. You could, in your model, add a function that replaces all images to full paths. This could be done through a regex pattern that looks for URLs in tags.
I would, however, make sure the full path to the image is included in the text in the database. This way, you always have access to the right path to the image, and you're not relying on a piece of code to display the right image.

How to add and render multiple images/files in typo3 Fluid content element(flux)?

I am using flux and fluid content element for making content editable by user. i added field for image which allows multiple images to upload.
But now i am not able to show these images.
my value of field image is like :
image => 'kip.jpg,772_Visteon_010.jpg'
normally if i have only one value then i can show it by <f:image> or <img src="{image}" /> Tag.
so, anybody have idea how can i display multiple images or files.
Thanks in advance.
you seem to use the old style of image inclusion: comma separated list of names with copies below uploads/.
Then you need to split (https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Split/Index.html) the field and work the resulting array as before.
in the long time you should use FAL, so the handling is a little bit more complex
You should use flux inline fal for multiple images in fluid content element,
below is a syntax for inline fal,
<flux:field.inline.fal name="settings.image" label="Image" />
After that you can render it by following code,
<f:for each="{v:content.resources.fal(field: 'settings.image')}" as="image">
<f:image treatIdAsReference="1" src="{image.id}" title="{image.title}" alt="{image.alternative}"/><br/>
</f:for>
you can find detail in below url,
https://fluidtypo3.org/viewhelpers/flux/master/Field/Inline/FalViewHelper.html
hope this will help you.

How to display uploaded images in pdf using wkhtmltopdf

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.

Fancybox shows blob as string not image (Ruby issue?)

I am displaying an image obtained from a database (stored as a long blob) in an img tag using the following method:
<img src="http://localhost:3000/show_image/265" />
The show_image function takes the image data from the database and renders it to the img tag using the send_data method.
When applying Fancybox onto the img tag, the data is displayed as BLOB data not the image..
Can anyone suggest a reason why? Or how I can solve this?
1) You have to apply fancyBox to the links (not the images) and the structure should be like this -
<a class="fancybox" href="big_image"><img src="small_image" /></a>
Example - http://jsfiddle.net/CYCeM/.
Well, it is actually possible to have only images, but then you have to use "data-fancybox-href" attribute to specify the large one - http://jsfiddle.net/6ZSWB/
2) Looks like the script would not be able to guess the content type from your hrefs. You have to either -
a) Create links having extension, e.g., "http://localhost:3000/show_image/265.jpg"
b) Set content type for fancybox, example - $('.fancybox').fancybox(type : 'image');
setting :type => "image/jpg" fixed the issue. I looked up the MIME content types and realised it was incorrectly written.

How do I add an image to an item in RSS 2.0?

Is there a way to send only an Image with a link and some alt text for each item in an RSS feed?
I looked at the enclosure tag but this is only for videos and music.
The enclosure element can be used to transmit pictures. The RSS 2.0 spec is quite clear about that, saying that the type is a MIME type. It does not say it is restricted to audio or video.
Here's an example: a set of photo feeds from Agence France Presse
One of solutions is to use CDATA in description
<![CDATA[
Image inside RSS
<img src="http://example.com/img/smiley.gif" alt="Smiley face">
]>
Note, that you may have a problem with hotlink prevented site.
This is possible in RRS2,
see
http://cyber.law.harvard.edu/rss/rss.html#ltenclosuregtSubelementOfLtitemgt
So you have to use the enclosure tag, to add media
You should use the enclosure tag within item to include the image. You can use it for images by setting the correct Mime Type (for example: image/jpeg) and including the image size as the "length" attribute. The length attribute doesn't need to be completely accurate but it's required for the RSS to be considered valid.
Here's a helpful article that discusses this and other options.
To work with the Mailchimp RSS to email feature, they expect the image to be specified in a <media:content> element inside <item>. This is their source for the feed item's image macro in their templates.
Thus, you need to add to the declarations
xmlns:media="http://search.yahoo.com/mrss/
Then inside the <item> element add
<media:content medium="image" url="http://whatever/foo.jpg" width="300" height="201" />
Without the extra declaration, the feed is invalid since media:content is not a known element.
Inside tag ITEM
<image:image xmlns:image="http://web.resource.org/rss/1.0/modules/image/">
http://domain. com/image.jpg
< /image:image>
Inside Description Tag
<![CDATA[
Some Text..
<br/><img src='http://domain. com/image.jpg' ><br/>
More Text
]]>
Regarding the <p> tag issue, You need to encode html within the xml.
Your code would look something like this:
<description><p> Text in the tag </p></description>
Since you are using php you can use htmlentities() to encode the html tags. They look horrible in the xml but RSS readers know what to do with it.
http://php.net/manual/en/function.htmlentities.php

Resources