We're working with Magento 2.2.8, we added product attribute using WYSIWYG editor in admin panel. Image is showing perfect with admin url.
<img src="{{media url=" wysiwyg="" u4888.png"}}"="" width="400" height="400">
But, in product detail page, it's not showing image. It seems like media is not rendering.
Please check below code, the media url is not changing to dynamic url as its doing in admin.
<div class="col-md-4 custom-accordion__col">
<img src="{{media url=" wysiwyg="" u4888.png"}}"="" width="400" height="400">
</div>
Your help is highly appreciated.
Thanks,
Saikat
Whenever I add an image using WYSIWYG, the output I usually see looks something like this:
<img src="{{media url="wysiwyg/folder/image.png"}}" alt="" />
In your case, if the image is uploaded using WYSIWYG, the URL should look like this:
<img src="{{media url="wysiwyg/u4888.png"}}" width="400" height="400">
Hope this helps!
I just found the solution. So, in display block section we have to put below codes:
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
<?=$_helper->productAttribute($_product, $product->getData('quality_n_materials'), 'quality_n_materials') ?>
Thanks,
Saikat
Related
I want clickable regions on SVG image displayed on Sharepoint Modern Pages. The image itself renders well, however links are not rendered at all.
The SVG file itself is embedded using Markdown. 
<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" width="517.52" height="238.48" viewBox="0 0 517.52 238.48">
<path id="Dash1" d="M145.3,159.9l-5.11,15.84a12.13,12.13,0,0,1-10.54,8.36v0h92.42l-7.7-24.25Z"/>
</svg>
The SVG file rendered in Chrome allows to click on the image and opens the link. The same file embedded in Sharepoint does not serve the link.
When you load SVG as an image, in this case via the <img> tag it is not interactive. This is a general rule and is not Sharepoint specific.
SVG used as an image has the same capabilities as raster images so that they can be used in the same situations without needing to specially consider their security and privacy implications.
You can use image map to make clickable href in a img tag like this:
<img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="bing" title="bing" href="https://www.bing.com" coords="37,35,363,104" shape="rect">
<area target="_blank" alt="Google" title="" href="https://www.google.com" coords="41,163,365,225" shape="rect">
<area target="_blank" alt="facebook" title="https://www.facebook.com" href="" coords="43,275,365,351" shape="rect">
</map>
For Modern Page, you could add the code snippet above via Modern Script Editor Web Part:
Add The Script Editor Webpart back to SharePoint Modern Experience
Reference:
How to Make image Map and use in SharePoint Online/2016/2013
I'm following this blog, every thing is fine. But i have a issue how to handle Resources Resx Image or calling by view.Here is my code snippet
<img src=#Resources.mODIFYGUIDLINE class="map img-responsive" alt="Hajj MAp" width="1136" height="600" />
Name of the [string] along with [Image name].extension
<img src="~/[foldername]/#Resources.[string name]" class="map img-responsive" alt="Hajj MAp" width="1136" height="600">
I have an SVG object link on my page:
<a href="#" target="_blank">
<object data="icons/email.svg" type="image/svg+xml" style="pointer-events: none;" class="icon">
gmail
</object>
</a>
I'm trying to change the fill color on hover using this code in my SVG file:
<style>
* {
pointer-events: fill;
}
#email:hover path {
fill:white;
}
</style>
The problem is that the hover effect only works when I remove the style="pointer-events: none;" from the HTML, but the link only works when that code is there.
Any help is appreciated. I checked similar topics and wasn't able to find an answer to this.
Links only work when the contents of an <object> tag is non-interactive hence they work if pointer-events="none" and not otherwise.
For your use case you probably need to make the link internal to the SVG file i.e. via an SVG <a> tag in the SVG file rather than using an HTML link in the HTML file.
I have the following NavBar element in my onet.xml. It adds the link "Link" to the quicklauch bar, but seems to ignore the body attribute. I'm particularly interested in setting the href to what I want (/Lists/Link/AllItems.aspx), but it doesn't work.
Any help?
I'm working on Moss 2007.
<NavBar Name="Link"
Prefix="<table border=0 cellpadding=4 cellspacing=0>"
Body="<tr><td><table border=0 cellpadding=0 cellspacing=0><tr><td><img src='/_layouts/images/blank.gif'
ID='100' alt='' border=0> </td><td valign=top><a ID=onetleftnavbar#LABEL_ID# href='/Lists/Link/AllItems.aspx'>#LABEL#</td></tr></table></td></tr>"
Suffix="</table>" ID="1033" />
the problem is that the URL is relative to the root site, so try using the site context with:
Url="_layouts/[%=System.Threading.Thread.CurrentThread.
CurrentUICulture.LCID%]/yourpage.aspx"
Hope this may help.
I m using Watir for automated testing a webapp.
In one of the page i have something like htis
</STYLE></HEAD><BODY background="IMAGES/fon06.gif"><DIV class="mainalignment" height="110%" width="110%"><TABLE class="mainframe" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD><DIV id="divTabButtons"><P align="left"> <INPUT class="tabOff" id="1" onclick="tabOnClick(1)" type="button" value="TIMESHEET" /> </P></DIV></TD></TR></TBODY></TABLE></DIV></BODY></HTML>
But m able to identify the HTML element to access it.
I need to access the id="1" value="TIMESHEET" element.
How do I do it in Watir.
If more info is required pls let me know.
Note: I am a HTML noob.
EDIT: I tried showAllObjects to see whether the objects are displayed or not.
and this is what I got
-----------Objects in page -------------
HTML Document name=header id= src=header.jsp
HTML Document name=body id= src=body.jsp
This is very strange.
but When i look at the page..there are many objects..
I m confused now..
If you want to click the button, any of these will work:
browser.button(:id, "1").click
browser.button(:value, "TIMESHEET").click
browser.button(:id => "1", :value => "TIMESHEET").click
More information at http://wiki.openqa.org/display/WTR/Buttons and http://wiki.openqa.org/display/WTR/Multiple+Attributes
If you want to check first, you can do this:
if browser.button(:id, "1").exists?
browser.button(:id, "1").click