How to build things with StoryNexus
Bug with external Quality images
cvaneseltine
Posts: 8
12/11/2013
|
Hi Alexis-and-team!
Whenever a Quality changes, it shows the URL name of the icon instead of the icon itself. Apparently, the system is automatedly searching for a small version that should be at iconnamesmall.png, so it's trying to pull the address http://images.storynexus.failbettergames.com.s3.amazonaws.com/icons/http://www.sibylmoon.com/storynexus/interrupt-latency.pngsmall.png ... which doesn't exist, of course.
My CSS expert has provided me with a workaround, but it requires a separate CSS rule for each external image we use. I understand SN is in maintenance mode, and that new feature requests won't be addressed, but if this could be investigated as a bug, we'd really appreciate it.
(Alternately, if anyone has a brilliant single-rule workaround, could you let us know?)
|
|
|
0
link
|
Estelle Knoht
Posts: 1751
1/17/2017
|
For whatever reason, Cyber's code doesn't work if you just plop it on regular StoryNexus themes (by the way I must gush over your very very beautiful two QLD in a row layout and CSS! It's super beautiful.)
So here's an alternative that should work right out of the box if you plop it on your own Story. Of course, you still have to do image replacement for each of your own icons, unless you want to use my vague blobs of colours.
First, a universal selector that target all broken images and make them invisible, and hide the alt text.
img[alt*="http://i.imgur.com/"]{
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:42px;
height:55px;
padding-left: 42px;
color: transparent;
text-indent: 10000px;}
In my case, I am using imgur - so SN will load up a bugged link of
http://images.storynexus.failbettergames.com.s3.amazonaws.com/icons/http://i.imgur.com/5FoMcNt.pngsmall.png
and display http://i.imgur.com/5FoMcNt.pngsmall.png on top of a unsightly broken image box.
You might notice that if you use imgur, all your QLD images are going to contain i.imugr.com in its alt texts, so that's what we are using. Of course, you may need to change it if you are on another image host! The nice thing is, this only have to be done once to turn all future broken images invisible.
text-indent is used to hide the unsightly broken image icon on Chrome. Color: transparent is used for hiding the alt text. Display: block, er, block the image from showing up.
Secondly, you have to add a background for each individual broken image. This has to be done multiple times for each custom icon you link to.
img[alt*="http://i.imgur.com/dVjgDIT.png"]{
background-image: url(http://i.imgur.com/dVjgDIT.png);
background-size:42px 55px;}
(Remember to replace said image with your actual images!)
Result:
Should be fairly obvious. Each broken image get swapped with its actual counterpart. The background-size is there If your image is bigger than 42x55. If you don't set it, you are going to have a tiny box zooming into a large image:
There are, of course, further hijinks you can do if you mess around with the size - displaying a huge image above your QLD, and some such - so keep tweaking if you feel like it!
edited by Estelle Knoht on 1/17/2017
--
Estelle Knoht, a juvenile, unreliable and respectable lady.
I currently do not accept any catbox, cider, suppers, calling cards or proteges.
|
|
|
+2
link
|
cyberpunkdreams
Posts: 527
1/16/2017
|
I'm sorry for the delay, I only just saw this. I've done this to identify all the custom images:
div.storylet-col1 img[alt*="YYYY"]:after{
position:absolute; top:5px; left:7px; width:40px; height:52px; background-size:40px 52px; content:""
box-shadow: inset 0 0 0 0px rgba(255,255,255,0.3), -1px 1px 4px #000000;
}
Where YYYY is whatever you need to identify your images (probably part of the domain name where you're hosting. Bear in mind the the numbers here may need to be changed to suit your theme (mine's quite heavily tweaked, so they might not work for the default ones). What this does is to make a blank CSS pseudo-element on top of the broken images.
You then need to insert the background images for each of those pseudo-elements to get the correct images to show up:
div.storylet-col1 img[alt*="image1"]:after{background-image:url(path to your image1)}
div.storylet-col1 img[alt*="image2]:after{background-image:url(path to your image2)}
div.storylet-col1 img[alt*="image3"]:after{background-image:url(path to your image3)}
etc
etc
--
Seeking alpha testers for a new StoryNexus cyberpunk RPG.
Welcoming friends, rivals, sightseers; a life of some importance in the Neath.
|
|
|
+1
link
|