Remap html image links + fit to screen + max height and width - css

Ok, sorry guys that was big title. But most of the title explains what I need.
I have a HTML page that will display a image onto the screen. And basically it is on fullscreen (big problem on very wide screens), and I am using: https://github.com/davidjbradshaw/imagemap-resizer
To resize the map I have created.
Here is my code in HTML:
<body>
<img id="imgg" src="imgs/SampleImage.png" height="100%" width="100%" style="max-height:1414px; max-width:1414px;" alt="Page" usemap="#image_map" border="0">
<map name="image_map" id="image_map">
<area shape="poly" coords=" 104,693, 250,702, 219,1203, 105,1208, 105,692" href="http://wordpress.com" alt="Blog"/>
<area shape="poly" coords=" 376,879, 521,880, 522,1035, 375,1037, 375,880" href="https://www.facebook.com/" alt="Facebook Page"/>
<area shape="poly" coords=" 558,882, 705,883, 705,1036, 563,1036, 559,885" href="https://www.facebook.com/" alt="Facebook Page"/>
<area shape="poly" coords=" 364,1045, 716,1047, 710,1082, 370,1085, 367,1044" href="https://twitter.com/" alt="Twitter Page"/>
<area shape="poly" coords=" 294,1036, 344,1055, 361,1035, 368,917, 370,901, 310,916, 297,945, 292,978, 290,1037, 301,1037" href="https://www.pinterest.com/" alt="Pinterest"/>
<area shape="poly" coords=" 529,898, 555,898, 551,1017, 536,1021, 531,901" href="https://www.pinterest.com/" alt="Pinterest"/>
<area shape="poly" coords=" 718,1033, 715,904, 771,922, 789,1037, 744,1050, 722,1033" href="https://www.pinterest.com/" alt="Pinterest"/>
</map>
</body>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/ie8.polyfil.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$('map').imageMapResize();
</script>
I just want the image to display on the page, but after a certain height (the images max-height and max-width) it should not allow the image to be stretched anymore and instead display a background colour.
I have also in the "style" section of my img tag tried to use the max-height and max-width properties. Did not work. And the height="100%" and width="100%" is there to make sure the image doesn't look too big, this is a 1000x1000 picture, so on smaller devices they would have to scroll, that's why I used this. Thank you everyone for the help!


Ok, looks like no one was able to help. But I figured it out myself!
So I will share the secret with everyone. Basically its not really a secret, I used a dirty little javascript trick instead of a html/css trick. It will look at the image heights, check whether the height is smaller than the width or if the width is smaller than the height and set either one to the smaller height. So for example:
Height = 1000px
width = 800px
Now the JavaScript code will check which one is smaller, then set the height/width to the smaller size (keep in mind this is a SQUARE image):
height = 800px
width = 800px
And here is the code:
<script>
var img = document.getElementById('imgg');
var width = img.clientWidth;
var height = img.clientHeight;
if (width < height) {
img.style.height=width;
}
if (height < width) {
img.style.width=height;
}
</script>

Related

use custom icon in "react-rating" when fraction is greater that 1

I am using the react-rating package in my Nextjs application and I want to use a custom icon both for the emptySymbol and fullSymbol of the Rating component.
The problem is when the rating is a decimal value like 3.7, the custom icon does not show up correctly.
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<Image src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<Image src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
And the outcome is the picture below:
It seems that react-rating make the custom icon smaller instead of filling portion of it.
What I want to achieve is the same behavior as the default icons have: (below picture)

Thanks to #DBS 's comment which somehow led me to the answer.
I am also using tailwindcss in my project. so the style max-width: 100%; was being overridden by #tailwind base; which led to this incorrect display of the "half-filled star".
And also for this specific situation, i used HTML native tag instead of the Nextjs Image component.
The final solution was:
<div className="Custom-rating">
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<img src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<img src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
</div>
And global.css file:
.Custom-rating img {
max-width: none !important;
}

Unnecessary white spaces in ons-carousel-items

I am new to Onsen UI and Monaca. I really like it a lot. I am trying to build a carousel with small images (say 6em x 6em). Using ons-carousl and ons-carousel-items, I am able to achieve it. However, there is a wide gap between consecutive images. Like only 1 small image in the visible screen. The next becomes visible only after I slide full screen. I have tried margins and all but in vain.
Please Help !
My code :-
<ons-carousel width="auto" swipeable auto-scroll auto-scroll-ratio="0.2" animation="ease-in" overscrollable class="carousel1">
<ons-carousel-item>
<img class="car1" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
</ons-carousel>
Check out the Carousel below

Set background image of div in xslt file from sitecore image item

As the question states I'm trying to set a background image in XSL file for a Sitecore Email component.
If I hard code a variable with the image source and then set the Div's background using Style then I can see my div with the background set.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:sc="http://www.sitecore.net/sc"
xmlns:dot="http://www.sitecore.net/dot"
exclude-result-prefixes="dot sc">
<!-- output directives -->
<xsl:output method="html" indent="no" encoding="UTF-8" />
<!-- parameters -->
<xsl:param name="lang" select="'en'"/>
<xsl:param name="id" select="''"/>
<xsl:param name="sc_item"/>
<xsl:param name="sc_currentitem"/>
<!-- variables -->
<!-- Uncomment one of the following lines if you need a "home" variable in you code -->
<!--<xsl:variable name="home" select="sc:item('/sitecore/content/home',.)" />-->
<!--<xsl:variable name="home" select="/*/item[#key='content']/item[#key='home']" />-->
<!--<xsl:variable name="home" select="$sc_currentitem/ancestor-or-self::item[#template='site root']" />-->
<xsl:variable name="backgroundurl">-/media/Images/go-ape-forest-banner-background.ashx</xsl:variable>
<!-- entry point -->
<xsl:template match="*">
<xsl:apply-templates select="$sc_item" mode="main"/>
</xsl:template>
<!--==============================================================-->
<!-- main -->
<!--==============================================================-->
<xsl:template match="*" mode="main">
<div style="background:url({$backgroundurl}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;">
</div>
</xsl:template>
</xsl:stylesheet>
As you can see from the screen shot above, this works so far as the image is displayed as the div's background image, but is not what I'm after, the background image should be set according to the Sitecore Item, In this case the Items background image field and not a hard coded variable.
I have access to various items from the components template. In this case we have the following fields:
Logo (Image)
Icon (Image)
Background (Image)
Headline (Single-Line Text)
Icon Text (Single-Line Text)
I can access these items on the page using the following sitecore controls:
<sc:image field="logo"/>
<sc:image field="icon" />
<sc:image field="background" />
<sc:text field="headline"/>
<sc:text field="icon text"/>
If I add the above onto my xsl page they render correctly as can bee seen from screen shot below:
I want to take the background image field and get the src value from it and then set my div's background to this value.
Any idea's how this could/should be done?
Regards,
Comic Coder
EDIT:
I noticed something funny that you may be able to help me understand what is happening.
When I use the following in my XSLT file:
<img src="{sc:fld('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />
And inspect the source code output i get the following rendered on the page.
<img src="" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">
I can see the src field is empty and this is a problem. This is the method that is provided by sitecore at the following link on the sitecore SDN
Assessing Field Values in Sitecore
When I use:
<img src="{sc:field('background',.,'src')}" alt="{sc:fld('background',.,'alt')}" />
Notice the fld on the src field has changed to field now and i get the following when i inspect the source.
<img src="<input id='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' class='scFieldValue' name='fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759' type='hidden' value="&lt;image mediapath=&quot;&quot; alt=&quot;go-ape-forest-banner-background&quot; width=&quot;600&quot; height=&quot;108&quot; hspace=&quot;2&quot; vspace=&quot;2&quot; showineditor=&quot;&quot; usethumbnail=&quot;&quot; src=&quot;&quot; mediaid=&quot;{EE47E80F-DE1E-4FDD-B5D8-ACA473B52A9C}&quot; /&gt;" /><code id="fld_B9ACE161A86D474390C7DA8308D79278_4C5D9258F7CF44B8A073A078CAEC08B0_en_1_00a4e02d3315484a8da1a756f2ef2d69_6759_edit" sc_parameters="format" type="text/sitecore" chromeType="field" scFieldType="image" class="scpm" kind="open">{"commands":[{"click":"chrome:field:editcontrol({command:\"webedit:chooseimage\"})","header":"Choose Image","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png","disabledIcon":"/temp/photo_landscape2_disabled16x16.png","isDivider":false,"tooltip":"Choose an image.","type":""},{"click":"chrome:field:editcontrol({command:\"webedit:editimage\"})","header":"Properties","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png","disabledIcon":"/temp/photo_landscape2_edit_disabled16x16.png","isDivider":false,"tooltip":"Modify image appearance.","type":""},{"click":"chrome:field:editcontrol({command:\"webedit:clearimage\"})","header":"Clear","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png","disabledIcon":"/temp/photo_landscape2_delete_disabled16x16.png","isDivider":false,"tooltip":"Remove the image.","type":""},{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\"webedit:personalize\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\"webedit:editvariations\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{B9ACE161-A86D-4743-90C7-DA8308D79278}?lang=en&ver=1","custom":{},"displayName":"Background","expandedDisplayName":null}</code><img src="/sitecore/shell/-/media/Images/go-ape-forest-banner-background.ashx?h=108&amp;la=en&amp;w=600&amp;hash=B3D30A69E02A5C0AC47D2475FF85DFA166768C40" hspace="2" vspace="2" alt="go-ape-forest-banner-background" width="600" height="108" /><code class="scpm" type="text/sitecore" chromeType="field" kind="close"></code>" alt="go-ape-forest-banner-background" sc-part-of="placeholder rendering" class="scEnabledChrome">
I have also asked a question that is relevant to this problem regarding the use of the XSLHelper.fld method which is not working as expected. You can see the question here:
Sitecore XSLHelper.fld Method not working as expected

Before I answer, I have to say that I would highly recommend that you stop using XSLT. Future maintainers of your code (including yourself) will thank you if you move to MVC. If you want to avoid the need to compile, you can use View renderings.
The following code was adapted from the old presentation component reference doc for Sitecore 6. I haven't tested it on 8 as I have no desire to touch XSLT again, but I think it should still work.
<xsl:variable name="mediaid" select="sc:fld('Background',$sc_currentitem,'mediaid')" />
<xsl:if test="$mediaid">
<xsl:variable name="mediaitem" select="sc:item($mediaid,.)" />
<xsl:if test="$mediaitem">
<div style="background:url({sc:GetMediaUrl($mediaitem)}); background-repeat:no-repeat; background-size:100% 100%; height:200px; border-radius: 25px; border: 2px solid black; padding-left: 20px;padding-right: 20px;">
</xsl:if>
</xsl:if>
Update in response to additional info
The article you linked to is out-of-date. There is no longer a src attribute in image fields. If you just select an image you will see something like this if you view the raw value of the field:
<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" />
If you modify the properties of the image (e.g. set the alt text or dimensions) you will see something like this:
<image mediaid="{094AED03-02E7-4868-80CB-19926661FB77}" alt="alt text" height="" width="150" hspace="" vspace="" />
To get the URL, you need to use the mediaid property like I showed above.

How to call iframe from another iframe and dispay it in the parent window?

How to call iframe (iframe A) from another iframe (iframe B) and display it in the parent window?....I could call it but it is displaying in the calling iframe not in the parent window. I am using Asp.Net (3.5 framework) with C# .
Any help will be appreciated.
My code is as follows.....
<tr>
<td>
<a shape="rect" coords="6,2,109,29" toptions="group = links, shaded = 1, type = iframe, effect = fade, width = 735, height = 400, layout = quicklook"
href="chat.aspx" target="_parent"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('01','','images/ql_02_2.jpg',1)">
<img src="images/ql_02.jpg" name="01" width="330" height="35" border="0" id="01" />
</a>
</td>
</tr>
As shown in the figure, I am calling an iframe 2 by click a link in another iframe 1 and display it in the main page. Now it is displayed in the iframe1 portion. I want ot display it in main page.

it is call cross window communication , here is the demo
http://javascript.info/tutorial/cross-window-messaging-with-postmessage

keeping everything in one line in div

so my problem is like this:
I have a div, and in the div I have an img and then a string next to the image, the height is at 25, the width is at 128, and its align to center.
its just a username and a little icon next to their name. it works fine up until the user has a really long name in which case it will put the string onto a new line, which is definitely not what I want.
I would like it to just over flow and hide the rest of the name if it is too long. is there anyway I can do this?
I had overflow hidden as well as max-height and max-width. I tried using a span as well as display:inline but it keeps pushing it to a new line. I need to keep the alignment centered.
any help?
cant seem to find any information. I tried putting it in a table as well but to no avail.
here's the code:
<a href="#" class="tab2">
<table align="center">
<tr>
<td valign="bottom" id="contactLink1">
<div align="center" class="funtion_user_imageloc_box">
<?php if($memimglevelROW['imageloc']!=''){
if ($memimglevelROW['imageloc']=="black1.png"){?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="30.5" height="16" align="center" class="funtion_user_img1" />
<?php } else {?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="18" height="18" align="center" class="funtion_user_img2" />
<?php }
}
echo $username;?>
</div>
</td>
</tr>
</table>
</a>

Welcome to the community!
Please try not to post a wall of text, as it makes reading your question difficult.
The preview of what you're typing is below the "Ask a Question" textbox.
Thanks for providing code!
You should try white-space: nowrap; as that will probably fix your problem.
Also, don't ever use tables for non-tabular data. It's not 1995 anymore, CSS can do anything a table can do.

Resources