Forum Replies Created
-
AuthorPosts
-
snippet248
Participant“It might be worth tinkering with different optimisation options then.”
Turns out I used all the free optimizations with Tinypng so now the images uploaded recently haven’t been modified by it.Anyways I uploaded/replicated the changes so it’s live here: https://www.otzerling.com/index#actividades-todo
snippet248
ParticipantI generated them with wordpress and with “regenerated thumbnails” plugin, I have set the “medium size” to 650x of height, and added to functions the size “medium1xretina”. They are optimized with Tinypng/jpg plugin but not resized with it.
snippet248
Participant“How are your images looking “bad”? The only one I’ve seen so far is the butterfly one and it seems fine.”
That’s what doesn’t make sense to me either.
1. This is how to it looks with retina size 650px
https://drive.google.com/open?id=1fu0UcFWsfkJ_FenjelmX7kL1kkMgtW8b
2. Now the non-retina image size
https://drive.google.com/open?id=13SjBmkRjFUtuq7KHvYaKRMqRJ736lrwNsnippet248
ParticipantIn case it helps someone else https://css-tricks.com/responsive-images-css/#article-header-id-2
snippet248
ParticipantIt’s not about me but about other users, so in your logic I should put a message that tells all desktop computers with large screens to buy a retina monitor if the images look bad? Instead I have been reading the topic and is much more complex https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3
snippet248
ParticipantOkey it seems it’s an issue on the detection of retina implementation and not in the code. Check out this https://codepen.io/bseymour/pen/EjaNyj Is pretty much the same, and I’m still getting the 1x version, which means that my computer is not recognized as retina 2x, if flip 1x and 2x versions I get the 2x. So the question is why this happens and what can I do to fix it, I don’t want some computers like mine with crappy experience over this.
snippet248
ParticipantYes except that there is a hover zoom effect thats why i added a bit more. Maybe I can use a less visited part of the website to test it..
snippet248
ParticipantIn the local WordPress installation they are set with object-fit, added that css to the codepen as well.
“which is is the 2x image actually retina”It is the second one; which is called with the “medium” wordpress image size 650×650: http://localhost/tomastestart/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-459×650.jpeg
And the 1x retina is this one with 230x325px: http://localhost/otzerling/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-230×325.jpeg
Update: there was a missing line in the codepen in the rendered part, it got lost when I trying to post the code here in the forum…
snippet248
Participant“Frankly, it’s hit and miss.”
:/ will it ever be fixed?
“It’s much easier to provide a demo in a Codepen.io link that we can actually interact with.”
So if I can’t replicate the interaction in codepend I shoud still use it I suppose.. Okey I will.snippet248
ParticipantThank you so much!!! Definitively helps!! Wish my Javascript was good enough to fully understand it , which is at bests very basic. Still I’m playing with it :-) If I may I have some questions:
1: ['top'],
2: ['top', 'bottom'],
3: ['top', 'bottom', 'bottom'],
4: ['top', 'left', 'bottom', 'right'],
5: ['top', 'top-left', 'bottom', 'bottom', 'top-right'],
6: ['top', 'top-left', 'bottom-left', 'bottom', 'bottom-right', 'top-right'],
default: []
};
I could replicate this with css.. but that’s not the idea I guess and use instead radians… What does the duplicated bottoms do? for example for item 3 or 5? Ok this is a exam that has to be finished in some days so for the time being I will go with the css replicated way but then on I will work on it.. ;-)snippet248
ParticipantI know how to do that but can’t it be done differently, what happens if for example I add another bubble or I remove one. I need it to automatically adjust, and right now everything does adjust itself (try deleting a li) exception for that numbered text
snippet248
ParticipantThis is odd I was pretty sure I posted the codepen snippet.. Anyway here it is: https://codepen.io/Snippet/pen/agqqRx
snippet248
ParticipantReinstalled wordpress and now it works correctly.
snippet248
ParticipantUsing Mozilla Firefox Responsive Mode specifically with iphone 8 size allows you to debug the issue, you can download a portable version from portableapps.com I can tell the issue is with article class=”bodyMain”
snippet248
ParticipantWhat about using a negative “spread radius” on the shadow?
Example: box-shadow: 0px 0px 10px -30px rgba(0,0,0,0.5); -
AuthorPosts