I have the following issue with mithril
Image is display properly when it is a proper img tag
`<img src="images/erp/C:%5CProgram%20Files%20(x86)%5CMYTEST%5Cbitmaps%5C10001.jpg" class="scale">`
But same image not rendered at all when it is set as background-image url
`background-image: url("images/erp/C:%5CProgram%20Files%20(x86)%5CMYTEST%5Cbitmaps%5C10001.jpg");`
Based on this issue the cause is a bug in mithril.sj the string C:\Tmp\a\field.png is converted into "C:Tmpa\f ield.png"
This javascript:
view: function (ctrl) {
return [m("button", [m("img[src='C:\\Tmp\\a\\field.png\']"),"btn img"]),
m("div", {'style': { 'background-image' : 'url(\"field.png\")'}},"div a"),
m("div", {'style': { 'background-image' : 'url(\"C:\\Tmp\\a\\field.png\")'}},"div b")];
}
is rendered to this html
<button><img src="C:\Temp\mith\field.png">img inside a btn</button>
<div style="background-image: url("field.png");">no path</div>
<div style="background-image: url("C:Tmp\a\f ield.png");">with path</div>
Related
What I want to achive
I am using gatsby and want to design an image gallery. Clicking on one of the images shall open a modal, which: (1) is showing the image in maximum possible size, so that it still fits into the screen and (2) is centered in the screen.
My Code
/* imagemodal.js */
import React from 'react'
import * as ImagemodalStyles from './imagemodal.module.css'
import { Modal } from 'react-bootstrap'
import Img from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'
export default function Imagemodal() {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "images/mytestimage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1200) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return (
<div>
<Modal
show={true}
centered
className={ImagemodalStyles.imageModal}
dialogClassName={ImagemodalStyles.imageModalDialog}
onHide={(e) => console.log(e)}
>
<Modal.Header closeButton />
<Modal.Body className={ImagemodalStyles.imageModalBody}>
<h1>TestInhalt</h1>
<Img fluid={data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
}
/* imagemodal.module.scss */
.imageModalDialog {
display: inline-block;
width: auto;
}
.imageModal {
text-align: center;
}
.imageModalBody img {
max-height: calc(100vh - 225px);
}
The Problem
The image does not scale to the screen size. The image is either too big - so it flows over the vieport - or it is too small. Secondly, the modal size does not respond to the image size correctly and / or is not centered.
What I tried
I used this suggestion for the CSS: How to limit the height of the modal?
I tried as well dozens of other CSS parameter combinations. But I could not find a working solution.
I tried to format the gatsby-image directly with a style-tag.
I tried as well react-modal but had similar problems.
Does anyone have a good solution to show a gatsby-image in full screen size in a responsive modal? For me it is okay to use either the bootstrap-modal or react-modal - or any other suitable solution.
Edit
In the end I ended up with a workaround. I used react-image-lightbox and took the Image-Source from gatsby-image as the input for lightbox. My component gets the data from the graphQL query in the props via props.imageData.
This works quite well for me:
import Lightbox from 'react-image-lightbox';
...
export default function Imagegallery(props) {
...
const allImages = props.imageData.edges
const [indexImageToShow, setIndexImageToShow] = useState()
...
return(
<Lightbox
mainSrc={allImages[indexImageToShow].node.childrenImageSharp[0].fluid.src}
...
/>
Special thanks to #FerranBuireu to point me to the right direction
Assuming that the functionality works as expected, as it seems, it's a matter of CSS rules, not React/Gatsby issue. The following rule:
.imageModalBody img {
max-height: calc(100vh - 225px);
}
It Will never be applied properly, since gatsby-image creates an output of HTML structure of nested <div>, <picture> and <img> so your rule will be affected by the inherited and relativity of the HTML structure. In other words, you are not pointing to the image itself with that rule because of the result HTML structure.
You should point to the <Img>, which indeed, it's a wrapper, not an <img>.
return (
<div>
<Modal show={true} onHide={handleClose} centered className={ImagemodalStyles.imageModal} dialogClassName={ImagemodalStyles.imageModalDialog}>
<Modal.Header closeButton />
<Modal.Body>
<Img className={ImagemodalStyles.imageModalBody} fluid={props.data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
The snippet above will add the (spot the difference, without img):
.imageModalBody {
max-height: calc(100vh - 225px);
}
To the wrapper, which may or may not fix the issue, but at least will apply the rule correctly. It's difficult to know what's wrong without a CodeSandbox but you will apply the styles correctly with this workaround.
Keep always in mind that when using gatsby-image, the <img> it's profound in the resultant HTML structure so your styles should apply to the outer wrapper of it.
I'm implementing a fancybox into my project and I'm writing a script to automatically wrap an anchor around the images with the url to the image and a "data-fancybox" attribute to let the fancybox script do its thing. However, I'm only getting the url to the very first image, since they all share the same class. There is a dynamic figure id that seems to be the one to get.
My question is - how do I use this figure id to fetch the appropriate img src?
The html is like this:
<figure id="XXXXXXX">
<div>
<img src="image.jpg" />
</div>
</figure>
... other stuff ...
<figure id="YYYYYYY">
<div>
<img src="image2.jpg" alt="">
</div>
</figure>
My code right now is as follows (which works, but only returns the first image url):
$(document).ready(function() {
var src = $("figure img").attr("src");
var a = $("<a/>").attr( { href:src , "data-fancybox":"" } );
$("figure img").wrap(a);
});
I know I can use
var id = $("figure").attr("id");
to get the id I need, but I'm pretty new to coding so I'm not sure how I implement this and use it to get the correct url. Any help is appreciated!
If your goal is to make your images clickable, then you can do smth like this:
$('figure img').each(function() {
$(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
});
DEMO - https://jsfiddle.net/1jznsL7x/
Tip: There is no need to create anchor elements, you can add data-fancybox and data-src attributes to any element and it will work automagically.
I have an I-Frame with embedded content.
import {HtmlElement, Link, Section} from 'cx/widgets';
import Controller from './Controller'
export default <cx>
<h2 putInto="header">
Home
</h2>
<Section mod="card" controller={Controller}>
<iframe style='border:1px' src:bind="$page.url" id="contentFrame" width="100%"></iframe>
</Section>
</cx>
As i-frames need a height in pixels i use a controller to apply a resize-listener and need to initially set iframes high directly.
import { Controller } from 'cx/ui';
export default class extends Controller {
onInit() {
var url = "https://myContentUrl/?foo=bar&PHPSESSID=" + currentDashboard.customData.session + "&someMore=1";
this.store.init("$page",{url:url});
window.onresize = function(event) {
document.getElementById("contentFrame").height = window.innerHeight-125;
};
//the following is always null as it seems not to be initialised yet.
document.getElementById("contentFrame").height = window.innerHeight-125;
}
}
How can I set the initial hight of the iframe? References like react also dont work. It is sure not intended, that a user needs to resize the browsers window to get a full size i-frame. ;)
Thanks :-)
This problem is commonly solved using CSS flexbox applied on Section's bodyStyle.
https://fiddle.cxjs.io/?f=Kjarwesn
The section needs to have an explicit height set which can be specified in pixels, relative to viewport height (vh) or again using flexbox.
<Section
title="Section"
mod="card"
style="height: 50vh; border: 1px solid red"
bodyStyle="display: flex; flex-direction: column"
>
<iframe src="..." style="flex: 1 1 0%" />
</Section>
I have custom editor toolbar plugin which inserts html tags. The tag opens with div. Every time when page is saved or published the editor adds a new p tag above it.
here is the image
IMG tag drifts after publish I see a new p tag is inserted.
The Img being replaced by an html before saving
<p>
<div class="ssimage_code">
<img src="src_path0" alt=""/ >
<img src="src_path1" alt="" / >
</div>
</p>
I want to see if it gets solved by replacing a p tag instead of a img tag.
How do I access the parent tag from Node?
getParent does not work
Code
ed.serializer.addNodeFilter('img', function(nodes, name, args) {
var i = nodes.length, node;
while (i--) {
node = nodes[i];
if ((node.attr('class') || '').indexOf('slider_toimg') !== -1) {
self.imgToslidercode(node, args);
}
}
});
imgToslidercode:function(node,args){
insertcode = '';
node.replace(insertcode);
}
What I am looking here is?
node.getParent().replace(insertcode);
I have an HTML Dom looking like this:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false">
</div>
I'm trying to change the img Source, so i made the following to access the image without success:
Image imageElement = (Image) Document.get()
.getElementById("mydivId")
.getElementsByTagName("img").getItem(0);
How can i get the <img> dom element as Image then change its Source?
Get the ImageElement with
ImageElement image = (ImageElement) DOM.getElementById("mydivId").getFirstChildElement();
or create an Image widget by wrapping the existing img element like in
Image img = Image.wrap(DOM.getElementById("mydivId").getFirstChildElement());
As mentioned by Saeed Zarinfam it gets easier if you assign an unique id to the image itself.
You have to assign an id to your image tag:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false" id="myImgId">
</div>
Then you can access to it using following code:
Element elem = DOM.getElementById("myImgId");
Window.alert(elem.getAttribute("src"));
Or if you do not want to assign an id to your image tag, you can use following code:
Element elem = DOM.getElementById("mydivId");
Window.alert(elem.getFirstChildElement().getAttribute("src"));