Please excuse my ignorance on this.
Right now, I'm rendering an image using the following code:
#RenderImage(Model, x => x.Image, new { #class = "card-image" }, isEditable:true)
I need to update that code to match the following format for lazy loading, while keeping the image editable.
<img data-src="#image" alt="" class="card-image lazy">
<noscript><img src="#image" alt="" class="card-image"></noscript>
How would I go about setting up something like this? Is this even possible?
My suggestion would be to check if the page is in Experience Editor mode and handle that code differently from what you need rendering on the client.
Sometimes the simple approach when trying to configure a page for Experience Editor is best way.
Example:
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
#RenderImage(Model, x => x.Image, new { #class = "card-image" }, isEditable:true)
}
else
{
if(Model.Image != null)
{
<img data-src="#Model.Image.Src" alt="" class="card-image lazy">
<noscript><img src="#Model.Image.Src" alt="" class="card-image"></noscript>
}
}
Related
I have a particular page that is part of a website; it is coded directly in HTML. I have four images, and want to display a random one of them in a particular place on that page each time the page is loaded by anyone.
I have tried numerous examples; the one that seemed most logical to me was to have a function that would return a random integer from 1-4, and then I could simply put
so if the function happened to return a "2", the HTML that would execute would be giving me
I have found functions that are supposed to provide a random 0, 1, 2, or 3, but I can't get this approach to work. I am not a programming expert, although I am pretty good in straightforward HTML.
You can create an array of images which you would like to use, and then pick a random image from this array and display it to your HTML once the DOM has loaded.
See example below:
const images = ["https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"https://images.unsplash.com/photo-1519834785169-98be25ec3f84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
];
document.addEventListener('DOMContentLoaded', _ => {
const randImageIndex = ~~(Math.random() * images.length);
document.getElementById('randImg').src = images[randImageIndex];
});
img {
width: 50%;
height: auto;
}
<h1>My random image website</h1>
<h3>Take a look around</h3>
<img id="randImg" src="" alt="Random image" />
<p>This is some text</p>
The above only works if you have one image in your HTML which you wish to randomize, if you want multiple images randomized you can use the following, just give the image you wish to randomize the class randImg:
const images = ["https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"https://images.unsplash.com/photo-1519834785169-98be25ec3f84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
];
document.addEventListener('DOMContentLoaded', _ => {
[...document.getElementsByClassName('randImg')].forEach(e => {
const randImageIndex = ~~(Math.random() * images.length);
e.src = images[randImageIndex];
});
});
img {
width: 50%;
height: auto;
}
<h1>My random image website</h1>
<h3>Take a look around</h3>
<img class="randImg" src="" alt="Random image" />
<p>This is some text1</p>
<img class="randImg" src="" alt="Random image" />
<p>This is more text2</p>
<img class="randImg" src="" alt="Random image" />
now, I am make thumbnail pages using BASE64.
I store Image on server, and call them back as Base64 on client.
I want use these Base 64 encoded Imgs as src.
It it work well
. but, I got an err like that
GET http://localhost:8080/%7B%7Bitem.THUMBNAIL%7D%7D 404
what is problem? and it is proper way to use base64 as src without any convert?
here is my Source
Script
$http.get( "app/dashboard/recentWithInfo").then( function( rtn) {
rtn.data.map( item => {
if( item.THUMBNAIL){
item.THUMBNAIL = "data:image/png;base64," +item.THUMBNAIL.body;
}
})
$scope.items = rtn.data;
});
HTML
<img class="block-thumbnail-img" ng-if="item.THUMBNAIL != null" src="{{item.THUMBNAIL}}">
<h2 ng-if="item.THUMBNAIL == null" style="color:#ccc"> No THUMBNAIL</h2>
Additionally, I use Springboot and AngularJS.
Thanks in advance!
Yes you can use base64 images but make your the images are small and less in no.. below is a basic code where base64 images are called into html pages and rendered
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
check the fiddle http://jsfiddle.net/hpP45/
I can't figure out how to open a new tab using JavaScript. I went through related questions but nothing worked for me. I want the browser to open a new tab when someone clicks on the link (example.com) below. What code should I add and where should I place that code?
My html code is here -
<section id="work-grid" class="site-inner">
<div class="work-item" data-groups='["all", "webdesign"]' data-url="http://example.com">
<figure class="image-container"><img src="images/work/web-one.jpg" /></figure>
</div>
Thank you in advance.
Use the attribute newtab on the a element.
Code for driver for newtab a attribute:
(()=>{document.getElementsByTagName("a").map((e)=>{if(e.newtab==="newtab"){e.target="_blank";e.rel="noopener noreferrer";}return e;});})();
Beautified version without an anonymous function:
document.getElementsByTagName
(
"a"
).map
(
(e) =>
{
if (e.newtab === "newtab") {
e.target = "_blank";
e.rel = "noopener noreferrer";
}
return e;
}
);
You can only put the compressed version on your page due to uncompressed-code checking.
Image tags returned by KCfinder are incomplete on CKeditor and not displayed/saved correctly. Note that i am using an inline CKEditor and KCFinder for image upload.
Here are the integration codes:
ckeditor/config.js
config.filebrowserBrowseUrl = base_url+'/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = base_url+'/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = base_url+'/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = base_url+'/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = base_url+'/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = base_url+'/js/kcfinder/upload.php?type=flash';
On page HTML
<div id="page_body" contenteditable="true" class="full">...</div>
On page JS
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'page_body', {
on: {
focus: function(event){
var data = event.editor.getData();
alert(data);
},
blur: function( event ) {
var data = event.editor.getData();
var page_id = <?php echo $this->uri->segment(3) ?>;
var page_link =$("#page_link").val();
$.ajax({
type: 'POST',
url: '<?php echo site_url('admin/dashboard/ajaxChangePageData') ?>',
data: { page_id: page_id, page_body: data,page_link:page_link },
beforeSend:function(){},
success:function(data){},
error:function(){ alert("Error"); }
});
}
}
} );
</script>
Strange is that i can browse the server/upload without any error with KCFinder i can even select an image from the server and the image is shown successfully in the content. but the code width height info are not present after a reload. I figured that the html created for the image was incomplete
in source mode i see-
<img alt="" src="/gchalk/content/images/333(1).jpg" 300px; height: 224px;" />
The situation just gets worse if for the second time i make some changes to the div say add some text. The image is lost and its treated as text, the above piece of code is shown as
in source mode-
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
and it appears on browser/editor as -
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
I am tearing my hair for a day and cant find a way around. Please help me out to figure how to solve it.
Oh, and for the record the text is saved in MySQL as "TEXT" through the ajax post i am pretty sure its not a problem but still just saying!
I notice the image tag gets messed up in the default ckeditor(not inline) too.
Things that could effect the output of your code :
1- Magic Quotes when using PDO. if they are ON, turn them OFF in you php.ini! they are deprecated. Why am I telling you this? will because in your source mode you had 300px; height: 224px;" when you stored it and displayed it you had 300px;="" height:="" 224px;"=""
2- your CKeditor package. Try to download and reupload your Ckeditor (Update it to the last version if possible)
other than that, I do not see anything wrong with the code you have provided. Good luck!
I have the following code inside the HTML body that contains several images inside div elements.I would like to capture the whole seen as it is visible on the webview.
<div data-win-control="SdkSample.ScenarioOutput" id="grid">
<img id ="Img0" src="/images/0.png" class="GestureTile"/>
<img id ="Img1" src="/images/1.png" class="GestureTile"/>
<img id ="Img2" src="/images/2.png" class="GestureTile"/>
<img id ="Img3" src="/images/3.png" class="GestureTile"/>
<img id ="Img4" src="/images/4.png" class="GestureTile"/>
<img id ="Img5" src="/images/5.png" class="GestureTile"/>
<img id ="Img6" src="/images/6.png" class="GestureTile"/>
<img id ="Img7" src="/images/7.png" class="GestureTile"/>
<img id ="Img8" src="/images/8.png" class="GestureTile"/>
<img id ="Img9" src="/images/9.png" class="GestureTile"/>
</div>
Is it possible to directly capture via winjs or should I approach some other way?.
Thanks,
As far as I know (I'd love to hear otherwise), the only thing that can be captured is the contents of a canvas. I don't think you can captured rendered HTML. Sorry.
I know the topic is a bit old, but as of 8.1 you can grab the webview content as a Blob and then do whatever you need to with it (send it to a server, create a data URI and put it in an <img>, etc...
myWebview.capturePreviewToBlobAsync().done(
function(imgBlob) {
// do whatever you need to with the Blob
},
function(err) {
// handle errors... not sure what you might get here, honestly
}
);
I have not yet implemented this, so I can't say if there are any gotchas.
UPDATE
So I tried implementing the above, and this is what it says in the documentation, but it didn't work for me. I'm going to leave it because the commenter below says it works for them. For me, I had to use the code below instead as the capturePreviewToBlobAsync method did not return a promise. Not sure why...
var myWebView = document.getElementById("theWebviewToCapture");
var captureOperation = myWebView.capturePreviewToBlobAsync();
captureOperation.addEventListener("complete", function (e) {
var inputStream = e.target.result.msDetachStream();
// Now you could copy that input stream to a file stream or whatever...
});
captureOperation.start();
Check out the example on this page (search for "capturePreviewToBlobAsync").