egornmore

Hello @joen, Found a fast-fix solution, which works for me. Single quotes will stay intact if they are placed on the first level and double quotes inside of the single quotes. Commented on Git Hub.

• This reply was modified 3 years, 3 months ago by egornmore.

Hello @joen, yes you are right, or maybe it can be useful to have a checkbox somewhere that enables/disables auto-correction of invalid markup.

• This reply was modified 3 years, 3 months ago by egornmore.
• This reply was modified 3 years, 3 months ago by egornmore.

Hello @joen, tried to use different characters instead of single quotes, { } for example, and replace all occurrences of { } in a passed string with single quotes in PHP. e.g. <mark data-tooltip={tooltip}></mark> And what it does now is just adding double quotes wrapping everything after equal sign e.g. <mark data-tooltip="{tooltip}"></mark>… So it looks like it will wrap everything in double quotes after equal sign if it is an HTML tag attribute, even if in plain format with no quotes at all e.g. <mark data-tooltip=tooltip></mark>. Very weird behavior for a custom HTML block

• This reply was modified 3 years, 3 months ago by egornmore.
• This reply was modified 3 years, 3 months ago by egornmore.
• This reply was modified 3 years, 3 months ago by egornmore.

Hi @merbmerb
Thanks

Thanks for the fast response! Alright, I’ll just use CSS filters for now.

Hello @milindmore22

Thank you for your time, I’ll add the shadow directly in SVG until the issue is resolved.

Hello @milindmore22

Here is a page: https://stem.nmore.dev/projects/

IMG Element (in red squere): https://ibb.co/XsshPPx

amp-img.drop-shadow unfortunately doesn’t work: https://ibb.co/nrwVHD7

It works if I apply it in DevTools, locally. Also tried to do it with inline style="" directly in HTML, doesn’t work =(

Hello @milindmore22
I’ve tried your solution, now it appears smoothly and disappears smoothly. I can’t make it work with ‘amp-fx’. I’ll just leave it with overlaying div CSS fadeout solution for now, maybe will post a GIT feature request for adding amp-fx ‘fade-out’ or fixing lazyload + amp-fx conflict later. Thanks for your time.

Hi @milindmore22
I’ve checked the example provided, it’s done the same way as I’ve tried before. Also, I’ve tried keyframes animation with the amp-animation component, unfortunately still a blink issue on load. The only solution that works ok is to create an overlaying div with fade-out animation (see screenshot), then it looks like the image is fading in (video attached). Do you know if there is a way to use animation-direction with amp-fx? I need ‘fade-out’ animation rather than fade-in in particular solution.

• This reply was modified 3 years, 4 months ago by egornmore.

Hello @milindmore22

Tested with container div – same issue. I can do it in a bit tricky way by creating an overlaying absolute div with body background color and fade-out. Does amp-fx-collection has fade-out animation? Thanks for your time

Dear Joy, my apologies I’ve posted in the wrong place. Thanks for your time

Alright, thanks!

Disabled AMP to test it with ‘initial-scale=1’, meta is not an issue. Thank you for the fast reply! =)

• This reply was modified 3 years, 5 months ago by egornmore.

I am having troubles with img sizes media queries, here is my code:

<img
alt="'. $hero_image_alt .'"
src="'. $hero_img_url_530w[0] .'"
srcset="'. $hero_img_url_360w[0] .' 360w,
        '. $hero_img_url_1470w[0] .' 1470w"
sizes="(min-device-width: 360px) and (max-device-width: 480px) 360px,
       (min-device-width: 481px) 1470px,
       1470px"
disable-inline-width data-hero />

Media queries work fine with DPR:2 or less but don’t work with DPR:3 devices for some reason, not sure if adding “initial-scale=1” viewport meta will help, just investigating… Maybe there is a PHP filter to add initial-scale=1?

• This reply was modified 3 years, 5 months ago by egornmore.
• This reply was modified 3 years, 5 months ago by egornmore.
• This reply was modified 3 years, 5 months ago by egornmore.
• This reply was modified 3 years, 5 months ago by egornmore.

Hello, @bvytis,
I tried to get the LCP results with no header, footer, and content, but it shows error for some reason (screenshot 2). After disabling AMP, but having only heading text with the theme font, it still shows 2.0secs LCP (screenshot 2) Do I need to use Cache/CDN for the default “Graphik” theme font as well?

Screenshot LCP Error (1): https://ibb.co/kJSqx45
Screenshot Font (2): https://ibb.co/2MVGXM9