I am adding a class value to sc:image but when it renders it doesnt show up correct. Here how it looks like in HTML without render:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" class="logo" />
</a>
But when it renders to the webpage it shows up like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34">
</a>
However, I want to accomplish something like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34" class="logo">
</a>
How should I approach this problem?
One way to apply a class to the image would be to place the CSS class at a higher block level that is not a web control, perhaps on a wrapping DIV. This might allow you to leverage styling across the whole block and not just the image itself.
To apply the class directly to the IMG tag, you should use the CssClass property of the Image control so that it will render out as a "class" tag:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" CssClass="logo" />
</a>
Related
I am binding data to a template using knockout. The first template binds correctly, showing the image and other data elements correctly, however I get the following error and it does not bind to other templates after the first one.
Message: Unable to process binding "attr: function(){return {src:imageUrl} }"
Message: imageUrl is not defined
Here is the relevant part of the template:
<a href="#">
<img data-bind="attr:{src: imageUrl}" width="263" height="262" alt="image description">
</a>
Here is how I call it:
<div class="panel-body" data-bind="template: {name: 'album-template', data: thisWeeksOne() }"></div>
This is an example of thisWeeksOne
I believe that this is a timing issue, but am not sure how to handle it. Does anyone have experience with this?
Error message you get is pretty straight forward
Message: imageUrl is not defined
so imageUrl is missing in your $data.
I did simulate your error:
HTML
<div data-bind="foreach: imgs">
<p data-bind="text: description"></p>
<a href="#">
<img data-bind="attr:{src: imageUrl}" width="100" height="100" alt="image description">
</a>
</div>
JS
var model = {
imgs: [{
description: 'Phone',
imageUrl: 'https://www.notebookcheck.net/fileadmin/_processed_/8/0/csm_u11_life_alphr_1c09ab3e96.jpg'
}, {
description: 'Car'
}]
};
ko.applyBindings(model);
You can use if, to check whether property is undefined like this:
<div data-bind="foreach: imgs">
<!-- ko if: $data.imageUrl -->
<p data-bind="text: description"></p>
<a href="#">
<img data-bind="attr:{src: imageUrl}" width="100" height="100" alt="image description">
</a>
<!-- /ko -->
</div>
Link to fiddle: https://jsfiddle.net/8dx2acfh/13/
I have a requirement where I need to modify html 'img' tags in an html string that do not end with a '/>'
ex: <img src=""> needs to be changed to <img src=""/>
I am using following regex: <img(.*[^/])> to replace with <img$1/>
This works fine however for cases like: <center><img src=""/></center> the regex returns: <center><img src=""></center/>
Any suggestions how to impact this regex only upto the end of the img tag? Thanks.
You may use this:
<\s*img\s+([^>]*=(?:\".*?\"|\'.*?\'))[\s\w\-]*>
with following replace by:
<img $1/>
this will match these simple and complex cases:
<img src="images/a.jpg" title="test"><br/>
<img src="a/b.jpg" >
<span><img src="a.jpg"></span>
<img src="" title="">
<img src="" data-val>
<img src="a.jpg" title="a'>b">
<img src="a.jpg" title='a">b'>
<img src="a.jpg" title='a>=b"=>' >
but not following:
<img src="a.jpg" />
<imgXTag src="b.jpg" >
<img src="a.jpg" / >
Sample Demo
I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!
I posted a test site at http://jobajoba.org that shows some foundation 4 elements.
I am using vanilla out-of-box foundation 4 framework but having trouble with lightbox thumbs showing up as bullet items in a list (they should be in row similar to "block grid" example shown on the page).
I can't figure out what I am doing wrong... note that everything else on page seems to work out of box.
On edit:
I forgot about this question, but about a month after I posted this, Zurb indicated to me that they used a block-grid to create the effect. Something like this worked for me:
<div>
<ul class="large-block-grid-4 small-block-grid-2" data-clearing>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
</a>
</li>
</ul>
</div>
Foundation's documentation examples uses a custom docs.css file:
http://foundation.zurb.com/docs/assets/docs.css
The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.
/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }
Adding these rules to your own css file should provide the layout you're looking for.
I am using yahoo pipes to get content matching a certian category from my WordPress.com Blog. Everything is working fine but WordPress adds "share" links to the bottom of the feed that I would like to remove.
Here is what's being added:
<a rel="nofollow" target="_blank" href="http://feeds.wordpress.com/1.0/gocomments/bandonrandon.wordpress.com/87/">
<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bandonrandon.wordpress.com/87/"/></a>
<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bandonrandon.wordpress.com&blog=1046814&post=87&subd=bandonrandon&ref=&feed=1" width="1" height="1"/>
I edited out some of the services but you get the idea. I tried to use regex to remove this content what I tried was this:
<a rel="nofollow" target="_blank" href="http://feeds.wordpress.com/.*?><img alt="" border="0" src="http://feeds.wordpress.com.*?></a>
and
<img alt="" border="0" src="http://stats.wordpress.com.*?>
however it didn't fileter the results at all.
Using this would filter ALL images and works fine
<a.*?><img.*?></a>
<a[^>]+href="http://feeds.wordpress.com[^"]*"[^>]*>\s*<img[^>]+src="http://feeds.wordpress.com/[^"]*"[^>]*>\s*</a>\s*<img[^>]+src="http://stats.wordpress.com/[^"]*"[^>]*>
Regex updated, try that to match the whole lot.