Í have got imagesharp.web somewhat working. In the below it resizes the image but I can't get it to crop the image.
There is a second image it doesn't resize at all.
This resizes
<br />
<img src="https://wilderness-production.imgix.net/2021/08/IMG_2055-scaled.jpg?width=200&height=200" />
<br />
But can't crop
<br />
<img src="https://wilderness-production.imgix.net/2021/08/IMG_2055-scaled.jpg?width=300&height=100&rmode=crop" />
<br />
<img src="https://wilderness-production.imgix.net/2021/08/IMG_2055-scaled.jpg?width=300&rmode=crop" />
<br />
<img src="https://wilderness-production.imgix.net/2021/08/IMG_2055-scaled.jpg?height=100&rmode=crop" />
<br />
This doesnt resize
<br />
<img src="https://st4.depositphotos.com/1007600/21237/i/1600/depositphotos_212376262-stock-photo-long-wide-banner-workspace-desk.jpg?width=200&height=200" />
<br />
They are all remote URLs thus ImageSharp.Web would not be involved with serving up those images to your browser, for ImageSharp.Web to even have a chance to be used it would have to, at least, be a local url to your deployed web application.
The reason the first ones are resize is due to the fact that imgix.net supports resize itself and has nothing to do with ImageSharp.Web.
Related
I have an image like this one:
<img class="alignnone size-full wp-image-262" src="http:/localhost/wp-content/uploads/2017/10/myimage.png" alt="" width="352" height="343" />
I would like to put text in a box and this appears when the mouse hovers on from the image. How is it possible to make it?
You can use:
<img ... title="TEXT HERE">
Here's a quick JSFiddle demo for you.
https://jsfiddle.net/23vbh1ov/
<img src="http://dev.benchanmusic.com/wp-content/uploads/2017/07/cropped-cropped-me_blackandwhite.jpg" alt="" width="352" height="343" title="TEXT HERE" />
You should also fill in the "alt" property, as it's used for search engine indexing as well as if the image itself fails to load for any reason.
I am in the process of implementing a fancybox gallery on a website I am developing - for some reason though the first 2 images appear at different heights of the page:
http://leedsragfashionshow.co.uk/wp/index.php/committee/
I am experiencing this on Chrome and on Firefox, any ideas?
First, the tile of your question is misleading because a fancybox gallery is when the images are already displayed inside fancybox and not before. In your case, the issue is with the thumbnails of the gallery that has nothing to do with fancybox.
Anyway, why is this happening? This is because you are adding a html line break <br /> after each link <a> that wraps the image <img /> tag like:
<a rel="group" href="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/1.jpg" class="fancybox"><img alt="" src="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/1.jpg" class="committee"></a><br />
<a rel="group" href="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/2.jpg" class="fancybox"><img alt="" src="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/2.jpg" class="committee"></a><br />
...etc.
If you are already floating the images, then you just need to remove those line breaks <br />. See this DEMO with no <br /> tags.
I'm using a lot of LinkButtons in my web application with text and images inside them.
All LinkButtons are set with a ToolTip and all images inside the LinkButtons are set with an alternate text.
<asp:LinkButton CssClass="button button-input" ID="btnSearch" runat="server" CausesValidation="False" ToolTip="Search">
<img id="imgSearch" runat="server" src="../../../images/icons/magnifier-left.png" alt="search-something" width="12" height="12" />
</asp:LinkButton>
The problem is that in Internet Explorer the alternate text of the image is shown instead of the ToolTip of the LinkButton. In Firefox this problem doesn't exists, it always show the ToolTip of the LinkButton.
This is the produced XHTML:
<img width="12" height="12" alt="search-something" id="..." src="../../images/icons/magnifier-left.png">
Is it possible to overcome this issue?
Removing all alternate texts will resolve the issue but a better (more standard) way is always welcome!
Try to set a empty title attribute on your image.
Or use <asp:ImageButton /> instead of the <asp:LinkButton />
ASP.net ajax 2.0
I've got a modalpopup extender that looks like this:
alt text http://img441.imageshack.us/img441/6342/localmodal.jpg
The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
<asp:Panel ID="Panel2" style="display: none" runat="server">
<asp:Panel ID="Panel3" runat="server">
<div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
<div class="PopupHeader" id="PopupHeader">
Confirm Start Now<br />
</div>
<div class="PopupBody">
<br />
This will save the expense report header and allow
<br />
you to enter items into your expense report, are you sure?
<br />
<br />
</div>
<div class="Controls">
<asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
<asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
</div>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3" Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
</ajaxToolkit:RoundedCornersExtender>
The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.
It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:
alt text http://img441.imageshack.us/img441/2977/servermodal.jpg
My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent
I have the following problem with Opera.
The following asp.net code
<asp:Image runat="server" ID="imgExpand"/>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
ImageControlID="imgExpand"
ExpandedImage="<%$ Image:collapse.png %>"
CollapsedImage="<%$ Image:expand.png %>"
/>
generates the following in FF3, IE6, IE7, IE8:
<img style="border-width: 0px;" src="/style/img/collapse.png" id="ctl00_ContentPlaceHolder1_imgExpand" title="Ausblenden..."/>
however the following in Opera 10:
<img id="ctl00_ContentPlaceHolder1_ucProductList_rptProducts_ctl02_imgExpand" class="expand-img" src="" style="border-width:0px;"/>
As you can see the src="" is empty and thus no image is beeing displayed.
Do you know any solution to this problem?
Thanks alot
Sounds pretty weird. I haven't heard of that particular error, but you could probably work around it the same way you can avoid all the problems associated with ASP.NET's idiotic, broken browser-sniffing: turn it off.
Discovered the same problem. But noticed that official example is working under Opera. After some playing found a reason:
It's necessary to specify image for control (ImageUrl="~/Img/icon-plus.gif")
<asp:ImageButton ID="ib" runat="server" ImageUrl="~/Img/icon-plus.gif" ImageAlign="AbsMiddle" />
And after that put the ID of it into control (ImageControlID="ib"):
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pD" ExpandControlID="pH" CollapseControlID="pH"
Collapsed="True" TextLabelID="lCategoryName" ImageControlID="ib" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
SuppressPostBack="true" ExpandedImage="~/Img/icon-minus.gif" CollapsedImage="~/Img/icon-plus.gif" />