currently i'm have issue with generating html with gatsby-transformer-remark.
The problem is, converted markdown to html has images with a link, and transformed to sth like :
<a class="gatsby-resp-image-link" href="/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMB/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEEBf/aAAwDAQACEAMQAAABgik0dXC//8QAGRABAAMBAQAAAAAAAAAAAAAAAQACEhEy/9oACAEBAAEFAkqW2DlnRj73yf/EABcRAQADAAAAAAAAAAAAAAAAAAAREkH/2gAIAQMBAT8B1WX/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQL/2gAIAQIBAT8Bi6f/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIRISIxMv/aAAgBAQAGPwK9GNocyS8hCj//xAAbEAADAQADAQAAAAAAAAAAAAABESEAMUGBof/aAAgBAQABPyGxNMfrLHmCDZmAzzvJJDjEQCHv/9oADAMBAAIAAwAAABDIL//EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAwEBPxARhylZv//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFR/9oACAECAQE/EFoktI//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAxIWFBcYHh/9oACAEBAAE/EEbMLQ0fMHDVaPIXyI4pk4JUnWacNCtO8ojDE9TGIYES7/Jn/9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
<img class="gatsby-resp-image-image" alt="Chinese Salty Egg" title="Chinese Salty Egg" src="/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg" srcset="/static/8058f3f26913fea3b6a89a73344fe94a/8ee9c/salty_egg.jpg 148w,
/static/8058f3f26913fea3b6a89a73344fe94a/ebbe7/salty_egg.jpg 295w,
/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg 590w,
/static/8058f3f26913fea3b6a89a73344fe94a/5413e/salty_egg.jpg 885w,
/static/8058f3f26913fea3b6a89a73344fe94a/4efde/salty_egg.jpg 1180w,
/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg 2048w" sizes="(max-width: 590px) 100vw, 590px" loading="lazy" style="opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">
</a>
starter blog demo hello-world post has this link on image.
I am looking a way to remove that link and use medium-zoom package instead.
thanks in advance
Related
I want to make a hover animation effect in scss. The idea is when cursor hover on the card, another hidden card appear on top of the hovered card.
But now I got stuck on making the hidden card scss: I am not sure how to make the card the same size and the same position as the bottom card(dark blue card). It is for the className "card-hover"
Below is the code for js:
<div className="gallery">
{data.map((item)=>
<div className="card-holder" key={item.id}>
<div className="card-head">
<img className="card-img" src={item.image} alt="project item" />
</div>
<div className="card-body">
<h2 className="item-name">{item.title}</h2>
<div className="item-date">{item.year}</div>
</div>
<div className="card-hover">
<div className="item-role">{item.role}</div>
<div className="item-type">{item.type}</div>
<div className="item-decs">{item.desc}</div>
</div>
</div>
)}
</div>
Code for scss:
.gallery{
margin-left: 10rem;
margin-right: 10rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
justify-content: center;
}
.card-holder{
border-radius: 4px;
margin-top: 1rem;
background-color: $darkBlue;
box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
}
.card-hover {
position: absolute;
background-color: #D62839;
display: inline;
width: 100%;
height: 100%;
}
The current result:
enter image description here
I have looked through tutorial videos of how to make this kind of hover effect, but all solutions so far were to set
width:100%;
height:100%
or
top:0;
bottom:0;
left:0;
right:0;
However, when I tried them the result is like the screenshot above. Can someone help me with this? Thank you
Can anyone explain why my iframes with slideshare player won't go fullscreen on mobile when for instance iframes with youtube embeds will?
It's driving me nuts. Reading up on fullscreen APIs support, but don't have the chops to fully comprehend and it may just be my implementation. It seems to want to go fullscreen, but stays within parent div.
It's working just fine on tablet and desktop.
Page with both types of iframes: https://scanfoam.org/testing
Code below is what I use to embed in a gutenberg custom html block
<div style="border: solid 3px #2872fa;">
<div style="width: 100%; height: 0; position: relative; padding-bottom: calc(56.25% + 50px);">
<iframe
id="myslides"
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;"
src="https://www.slideshare.net/slideshow/embed_code/key/eYmvLMFV0SOoy0"
scrolling="no"
allowfullscreen="allowfullscreen">
</iframe>
</div>
</div>
I'm fairly new to React/Gatsby and have just tweaked a template to create the site www.flakyrecords.com.
I packaged the site using the Gatsby command gatsby build which creates the website in the public folder. I then copied all of the files and folders from this public directory to my hosting provider.
For the most part, it worked - however, as you can see, the images are extremely blurry. Is there something obvious I need to do here in order to publish the images as sharp/in focus?
Many thanks.
Your image paths are wrong.
gatsby-image creates a blur effect by adding a data-image while loads the image itself. In your case, it keeps the blur because it doesn't find the asset.
This is your output code:
<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 116.959%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAIAAACEf/j0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADdElEQVQ4y52TWSivaxTGXzMlKcc8plDChQyhyDyHK1FEpkxlvECUKZJ5TkQUhVLKVC7IlKmMuaFIUorITDg//+/fPvvUOZ29z7p4e7/1rWetZz1rvcLFxaWxsfHk5OTy8vLp6enl5eXt7e3z8/Pr64vz/v7+9vb24uLi4OBgcXFxfHy8s7OzrKwsLi7Oy8tLmJqaOjg41NTUDA4Ozs/Pr6ysrK2tLS8vb2xscAFzdHTEfWFhYXZ2dnR0tKenp6CgwM/Pz9raWpiZmZFmbGzs8PDw7u6O4lTe3d2lQl9fX3JycmxsbFNTU3FxcVJSUmhoqLu7u76+voqKiqqqqnBycqqqqtrZ2Xl+fv6S2cPDQ3R0tBBCXV1dyCwlJWVkZIQw8AEBATo6OjgVFBSEo6Nje3v76enpx8fH+/s7YFhpa2t3dXX19/cXFhYaGRkpKiomJCS0traWlJTAxcLCQg728PCora0F/Pr6CpImjY2N6Zw7/DnBSPXz8vLa2tpyc3NdXV29vb0NDAwEJCsrKzc3NyXOkZGRUVFRXGCB8lz29va+44QICwsbGBigOJ2TwsTERPB7aWkpPT19f39/e3uboKKiIi7X19fStFAxNTUVv5qaGh01Nze7ubnxSS8CtpB0dnaenJyEP960tLSIiAi6ZUipMgsODpaY+/r6MgI0k4NXV1eHhobi4+Npu6OjA4bkBomf8WZkZFRUVPj7+7MOAKjR3d0dGBgoFywrK6uuro58kGxoaAgJCbm6ukL58/PziYmJ7OxsRMGTk5MDQFdXF4H+qsyEh4eH5+bmAJeXl5P17OwMMJ7e3l57e3vW8/HxMTw8HICVlVV+fj5E5GAwx8fHNzc3XGDLhJGXOxsWFBTk6ekJBbJoaGjAU0tLi4FLEsjBW1tb1KEsu85WIf709DQ6+fj4MM/6+noAktrKyspwxi8HswmlpaWkBEZ6lralpYV3RpCtrS1Nssl2dnZEg+TvHzKTxBc8HT09PbIS9y2gEDY2NjMzM+vr65mZmWw1b05JSUkKJoCCUti3TU1N8bBwaWpqysmI79dCcWkqqCAfjMwUZSYHw5ayUkqJGyfa8mINDQ0tLS3F301BZuIfja44Y2Ji2BCmyD7+oPOv9iOfdJqbmycmJlZXV39v/0+c/9sIpREkYAS/AfsZLyn8f8C/aH8CTv/RsiNYjf4AAAAASUVORK5CYII=" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;"><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px"><img sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px" /><img loading="lazy" sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>
If you try to look for https://www.flakyrecords.com/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png it will throw a 404 error.
I would like to add an arrow effect to Angular Material cards (see image below) and I am not sure how to do so. I have set up a fiddle for help.
https://jsfiddle.net/er1187/rng1pv4u/1/
<md-card flex layout-align='center center'>
<md-card-content>
TESTING
</md-card-content>
</md-card>
Create that using transparent border & box shadow.
md-card:after {
content: "";
position: absolute;
box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 35px;
left: 48%;
border-width: 15px;
border-style: solid;
border-color: transparent #FFF #FFF transparent;
}
Change border width according to what size of that that border made triangle you need (& accordingly you've to handle its position top value).
https://jsfiddle.net/shantanu_k/a8omvs2b/1/
Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}
Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.
What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}