I have the data url of my image in the static resource library, but I want to change it in html form so that I can customize it's class from css. I don't want to edit my css.
Here is my apex static resource url code:
<apex:image id="theImage" value="{!$Resource.mikee}" width="140" height="140"/>
Also, i just copied this code from a certain site, so I'm really not sure how the 'id' works. I mean it says that it's a generated id.
Anyway, I want it to be like this:
<img class="img img-circle img-responsive" id="mikee" data-src="[mikee]/mikee.jpg"/>
I'm using bootstrap to make a circular cut on my image.. However, it's not working, what seems to be the problem?
Have a look at the apex:image documentation.
To set the class in the resulting HTML you need to set the styleClass attribute. E.g.
<apex:image id="theImage" value="{!$Resource.mikee}" width="140" height="140" styleClass="img img-circle img-responsive"/>
If you want to set the HTML data-src attribute you can use the Salesforce pass-through attributes. E.g.
<apex:image id="theImage" html-data-src="[mikee]/mikee.jpg" width="140" height="140" styleClass="img img-circle img-responsive"/>
Note that the {!$Resource.mikee} Visualforce notation is going to give you a URI to the Resource image. It isn't intended to read the content of the resource as a string path. You might be better off with a custom setting and then using {!Setup.MyCustomSetting__c.Url__c}
Finally, there is a dedicated salesforce.stackexchange.com site that is a great place for asking Salesforce specific questions.
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
So, I have two images on a html page in my ionic project, and I want the second image to show up when the first one is clicked.
Therefore i added a onClick to my image like:
<img src="path"
alt="foo"
style="foo;
width:foo;
left:30%;top:30%"
class = "foo"
onclick="ng-model='bar'" >
And the second image
<img src="path"
*ngIf="bar">
But it is not working that way. Is it the wrong way? I tried it that way to avoid additional javascript.
You can accomplish this as follows:
<img src="http://via.placeholder.com/350x150/222222" (click)="hiddenImage.style.display='inline'"/>
<img #hiddenImage style="display: none" src="http://via.placeholder.com/350x150/888888"/>
But it may still be a better idea to do it differently depending on what your exact use case is.
Using *ngIf you would probably still need a variable that holds the value of whether the image should be shown or not in your template:
<img src="http://via.placeholder.com/350x150/222222" (click)="showImage=true"/>
<img src="http://via.placeholder.com/350x150/888888" *ngIf="showImage"/>
In your Component you should declare:
showImage: boolean = false;
i have a porlet running in liferay portal.after successfully entering the details , i want to download the details in an html page , in which i have to include an image.
this is done by giving the absolute path as:
<img src="http://localhost:8080/Demo-portlet/images/logo-1.jpg"
and it works fine.
My portlet structure is :
Demo-portlet-->docroot-->images-->logo-1.jpg
Now i want to do this by using relative path. i tried as below but it didnt work out:
<img src="../Demo-portlet/docroot/images/logo-1.jpg" />
<img src="./docroot/images/logo-1.jpg" />
<img src="./images/logo-1.jpg" />
None of the above worked. please tell me how this can be done.
Adding the html path:
Demo-portlet-->docroot-->download.html
Try this:
<img src="images/logo-1.jpg" />
Your portlet can be embedded on random pages. It's the page's URL that you need to be relative to, not the portlet.
If you have your portlet on http://localhost:8080/web/guest/home or http://localhost:8080/web/guest/about-us/contact/addresses, the relative address would need to be different. Thus I'd recommend to be relative with regards to the server name, but not with regard to the embedding URL: At development time you have no clue what name the pages that embed your portlet will have.
Go with <img src="/Demo-portlet/images/logo-1.jpg" /> or look up the servlet context (e.g. replace "/Demo-Portlet" with a dynamic value, so that you don't have to hard-code it).
(sorry, IDE not running and I'm always mixing up if it's request.getServletContext() or something else - try for yourself and comment here, I'll edit this answer when you give the full code). The dynamic stuff - on a jsp - would be <img src="<%=request.getServletContext()%>/images/logo-1.jpg" />
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;
just wondering if there is a way to reduce the amount of code needed when displaying a lot of images in HTML?
I am wanting to display around 2-300 images in a gallery, and at the moment the HTML will look like this:
<div id="scroller>
<img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>
...but down to image "decking-250.jpg".
Is there a more efficiant way to display the images so that I don't have 250+ lines of "img src" HTML?
The only part of the filename that changes is the "-1", "-2", "-3" etc etc. The rest, including the Alt tag can remain empty.
I am building this site in ASP.Net MVC3 Razor using the ASP.net online tutorials as a guide if that helps any solution come to mind, of if it simply has to be done that way then that is also fine - I just wondered if there was another approach I should consider to learn?
Many thanks in advance.
This is the way HTML works. You can't reduce that, as you need one img tag for each picture. You may create that code dynamically via PHP, JS, …. But in the end you'll get a long list of img tags, maybe individually wrapped by other tags (for example in a list).
I agree with Feela, and though it may appear verbose, your code is about as bullet-proof as it gets. Yet if something like JS is something you can use (or are using already), there are options. This isn't tested, but you could set up a for-loop statement in Jquery/Javascript that could condense the code. For example:
for (i=1; i < 250; i++) {
$('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}
I'm no ASP coder, but perhaps it provides something functionally similar.