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.
Related
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>
When I add the filter property on a PrimeNg (7.x) p-tree it works as expected but I have a double scroll bar.
The implementation is not special
<div class="row" *ngIf="formControls.wantThemes.value">
<div class="col-4 app-notif-edit-label"></div>
<div class="col-4 app-notif-edit-content">
<h4>Themes</h4>
<p-tree
[filter]="true"
class="app-notif-p-tree"
[value]="cmtyThemesTreeNodes"
[(selection)]="selectedCmtyThemesTreeNodes"
selectionMode="checkbox"
(onNodeSelect)="nodeSelectThemes($event)"
(onNodeUnselect)="nodeSelectThemes($event)"
>
</p-tree>
</div>
</div>
I have applied the following css to limit the size of the box
.app-notif-p-tree .ui-tree {
color: $sinapseBlue;
display: block;
font-size: medium;
height: 100%;
margin: 2% auto;
max-height: 250px;
min-height: 250px;
overflow: auto;
white-space: nowrap;
width: 97%; }
If I change the overflow to hidden, I don't see the last element of my list.
Any idea why? Thanks
I have added .app-notif-p-tree .ui-tree .ui-tree-container { height: 80%; }
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
I have a web application in which the administrators can load any kind of images which will be shown in the site.
The issue is that the images have different size and dimentions... But the idea is that the user that visit the site can see all the images in a similar size.
What do you suggest? And how?
The front end is in angularjs and the backend in java with sprint.
Is good to set an specific size? or maybe and specific height and that the width ajust it to the image dimention?
Try this:
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<div class="img" style="background-mage:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-mage:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-mage:url('http://i.imgur.com/B1MCOtx.jpg');"></div>
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;
}