I am using ckeditor and i implement image upload in ckeditor. In my project use multilanguage. so i need to translate ckeditor value in multi language. i upload image and set height and width using ckeditor so tag become like this:
bt when i translate data in multi language then its becomes like this :
<img alt="" src="http://localhost/public/images/blog/editor/website_1665486980.jpg" 스타일="높이:51px; 너비:102px" />
so height and width not properly set in other languages. So is there any solution for this?
Related
I am using a JS library called barcode39 to create a barcode image. I already imported the JS library in the static resource and have included the JS in my visualforce page. The barcode is generating fine in the VF page. The problem is I need to render this page as a pdf. When I do that, the barcode image does not appear. I DO NOT want to use the image url from the website barcodeinc because its very unstable. I would like to use this JS library. Can you please let me know what I can do to modify the code below to make the barcode render in pdf as well? Thank you
<apex:page standardController="Opportunity" extensions="LPP_PackingSlip" showHeader="false" sidebar="false" renderAs="pdf" standardStylesheets="false" applyHtmlTag="false">
<apex:includeScript value="{!$Resource.BarcodeScript}"/>
<head>
<body>
<apex:outputText rendered="{!hasPictureDays}">
<!--Header-->
<br/>
<div class="headerSlip">{!Opportunity.Account.Name}</div><br/>
<div class="jobSlip">{!Opportunity.WPA__c}</div>
<center><svg id="barcode"></svg></center>
<br/><br/>
</apex:outputText>
</body>
<script type ="text/javascript">
JsBarcode("#barcode", "{!Opportunity.WPA__c}",{
fontOptions: "both",
font : "OCRB",
textAlign : "center",
Textmargin : 5,
fontSize : 12,
width: 1,
height: 50
});
</script>
</apex:page>
Won't work like that. Visualforce rendering to PDF is done server-side (using a Java library called "Flying Saucer"). There's no browser, no "engine" that can run your JavaScript.
You can ask the user to save the page as PDF. If you need it to be fully automated... there are JS libraries for PDF generation like jspdf? They have bit limited range of features but for basic documents... (do your own research, this is just an example). And watch out for support of non-English characters (Japanese/Chinese/Korean...) - then again, Visualforce PDF generation also struggles with these and only safe font is Arial Unicode MS.
If you need sending an email template with PDF attachment even that library won't help. You'll probably have to look into generating the barcode as image, attaching it to the record maybe (as real File/Attachment?) and then calling the template.
I am creating a website for the first time with Bootstrap3 and have a page with 3 images which will be links to galleries. These images are not thumbnails.
I have alternative images (B+W) for hovering and so my code currently changes the image from colour to B+W on hover.
I want to be able to also include a text overlay on hover so people will know to click through to the gallery. So, I'm looking to add text on hover to the B+W image. Alternatively, I would make the colour image less opaque and add text to that, if it's easier!
Here's my html code currently.
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
Thanks in advance.
try adding a title attribute :
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
When using Web forms in sitecore an img tag is rendered with the Height and Width attributes e.g.
<img src="~/media/Images/example.jpg" alt="" width="245" height="245">
When using Sitecore MVC with a view rendering, the tag is rendered as
<img src="/~/media/Images/example.png?h=300&la=en&w=316" alt="">
How can I make Sitecore MVC render the tag with the Width and Height attributes as per web forms?
The parameters are from FieldRenderer and sc:image. so, in this case, you have to remove it.
This page will help you, http://www.mikkelhm.dk/archive/removing-width-and-height-tags-from-fieldrenderer-and-scimage/
I just tested rendering an image using the following code:
#Html.Sitecore().Field("Full Logo")
and it rendered with the height and width attributes as when using the FieldRenderer in a Webform:
<img src="/~/media/images/logos/full-logo.png?h=102&la=en&w=500" alt="Company Logo" width="500" height="102">
I added metadata tags for our products as specified by http://schema.org, for use by RichSnippets, etc...
It works great except that our products only have 3x2 images, and google resizes them to square for the RichSnippets, which causes them to look terrible.
I've seen examples where
Is there a way to specify the dimensions of an image tagged as itemprop="thumbnailUrl" (or itemprop="image") without changing the image's actual size?
Edit: injecting PageMap (as seen in http://support.google.com/customsearch/bin/answer.py?hl=en&answer=1626955) data didn't work for me, as the rest of the page is done with microdata.
Edit: My object is http://schema.org/Recipe, which doesn't include width or height for its thumbnailUrl object.
Make a copy of your thumbnail images resized or cropped to look fine as a square, as this is what SE will show, then use the meta tag with content to specify using those thumbnails instead of the ones you show on your webpages.
e.g.
<div itemscope itemtype="http://schema.org/Recipe">
..
<meta itemprop="thumbnailUrl" content="http://my/optimized/thumbnail/url.png" />
<image src="http://this/is/the/thumbnail/not/resized.png" />
..
</div>
I'm using asp.net MVC3 and i want to show a table containing information about a course
In that i have a field called "Information" which show an image.
I want to show the a tooltip when the mouse is taken on that image
I'm showing image lik this:
<img id="ok" src="../../Images/info.jpg" alt="tooltip"/>
I dont want to use any added plugin
can anybody help me with this?
Use title as well as alt in the Html tag
<img id="ok" src="../../Images/info.jpg" title="This is your tooltip message"/>
alt attributes on img elements are used as alternate text in case the image does not exist. Some browsers display these as tool tips when hovering over the image, but its not standard.
You could use the title attribute to display a tool tip on hover of the image.
You should always provide an alt attribute when using images, this is best for accessibility (screen readers read the alt text), and will fail XHTML if you don't have the attribute.