Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 28, 2024 at 2:04 pm #1472504
    MdF

    Good Day Kriesi,

    I previously used to develop basic websites in html format using MS FrontPage. Yes, you heard that correctly, MS FrontPage ?!?!?! But it gave me excellent service for 20 years.

    For the past few years, I have been converting most of these sites to WordPress, and have found that Enfold is an excellent environment in which to work.

    However, there is one instance of moving from html to WordPress that I am struggling with.

    I need to display a linked image in PWA format that fits to the full HEIGHT of the screen on a mobile device. Please see Link 1 below of how the current html code does this. The user then simply swipes left to see the whole image.

    https://mobi.henleyair.tv/html/iPhone-13-PRO-01.png

    The code that I am using is the following:

    <html>
    <head>
    <title></title>
    </head>
    <body topmargin=”0″ leftmargin=”0″ rightmargin=”0″ bottommargin=”0″>
    <div align=”left”>
    cam_west
    <script language=”Javascript” type=”text/javascript”>
    <!–
    var t = 60
    image1 = “https://henleyair.tv/cam/cam_west.jpg&#8221;
    function Start1() {
    tmp = new Date();
    tmp = “?”+tmp.getTime()
    document.images[“refresh1”].src = image1+tmp
    setTimeout(“Start1()”, t*1000)
    }
    Start1();
    // –>
    </script>
    </div>
    </body>
    </html>

    How this code works is that it refreshes the image automatically every 60 seconds without the whole page refreshing. This works exceptionally well in a webcam environment.

    However, I have tried many times to use this code in Enfold by using the Code Block option and simply pasting the html code into that block.

    The first prize is that the code works from a refreshing point of view and the image is refreshed every 60 seconds.

    However, where it does not work, is that the image is shown fitting full WIDTH across the mobile screen. It needs to show at full HEIGHT on a mobile device. Please see Link 2 below for an example of this:

    https://mobi.henleyair.tv/html/iPhone-13-PRO-02.png

    I did contact you a few years ago about this issue, but the coding never really got fully resolved as you suggested adding CSS code to Enfold > General Styling > Quick CSS.

    The support I am looking for is rather to have the html code added into the individual Code Blocks I will be using for each specific webcam image. I believe that if would be better suited there instead of CSS code being applied universally to the whole site under the Enfold options.

    So, in summary, I am using a mixture of WordPress and html pages in the current setup. This is not ideal as I would like to operate this type of coding in only WordPress.

    The site to reference is https://mobi.henleyair.tv and can be viewed in simulated mobile devive mode using F12 in Chrome.

    Looking forward to your assistance in this regard.

    MdF

    November 30, 2024 at 9:28 pm #1472639
    Mike

    Hey Marc,
    I see that each of your cam images has a ID so this css will only target those images:

    @media only screen and (max-width: 767px) { 
#refresh1, #refresh2, #refresh3 {
	height: 100vh !important;
}
}

    Another way would be to add a class to each code block, like “cam”
    Screen Shot 2024 11 30 at 3.06.58 PM
    and then use this css:

    @media only screen and (max-width: 767px) { 
.avia_codeblock.cam img {
	height: 100vh !important;
}
}

    The issue that I see is on mobile devices in portrait mode your images will be stretched unless you only what to see the center the image in portrait mode, in that case add this css with the above css:

    @media only screen and (max-width: 767px) and (orientation: portrait) { 
.avia_codeblock.cam {
	height: 100vh !important;
	width: 400vw !important;
left: -200% !important;
position: relative;
}
}

    add the css to your Quick css, it will only target these code blocks with the custom class “cam”.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 1, 2024 at 8:47 am #1472649
    MdF

    Morning Mike,

    Thank you for your response.

    I have created a test page in WordPress for the following 3 options which you can access here:
    https://mobi.henleyair.tv/hangarcam/ but you would need to do F11 to see it in mobile view.

    I have tried each of the 3 suggestions above and will respond to issues as such here below:

    Option 1:
    See link for emulated mobile device output https://mobi.henleyair.tv/html/Enfold_01Dec2024-01.png
    As you rightfully say, this option stretches the image to fit within the confines of the whole mobile screen. Obviously, it is distorted.

    Option 2:
    See link for emulated mobile device output https://mobi.henleyair.tv/html/Enfold_01Dec2024-02.png
    I get the same output as in Option 1 with a stretched image.

    Option 3:
    See link for emulated mobile device output https://mobi.henleyair.tv/html/Enfold_01Dec2024-03.png
    This output has the best result so far out of the 3 options.
    However, as you have said, the code for this option fixes the webcam image in the centre of the screen. Also, it fits the webcam image to a height larger than the screen size which means you have to scroll up and down to see it.

    In Option 3 the code needs to allow for the webcam image to scroll left and right so that the user can see the whole image. So to start with it should be fixed to align left on the screen.

    I would like to suggest that you open up the site mobi.henleyair.tv on your mobile device and use “Add to Home Screen” (iOS) or “Save App” (Android) on your mobile device. This will then let the site operate as a Progressive Web App on your device. Then select any of the webcam images and click on that. You will then see that the webcam image displays at the full height of the mobile device screen, but you can then swipe right and left to see the rest of the webcam image.

    This is the exact same effect I am trying to achieve through Enfold and WordPress so that I can do away with the HTML pages that do this effect.

    Hope this feedback helps.

    Marc

    December 1, 2024 at 10:55 am #1472650
    Mike

    Hi,
    Unfortunately, we don’t have a way to make the image swipe left & right to see the whole image when it is enlarged on portrait.
    The app that is installed for swipe adds javascript for the swipe, if you don’t install the app you can not swipe. I don’t have a way to add this to your page, try reaching out to superpwa for advice to enable it for WordPress.
    To have the image show the left side instead of the center on portrait remove the “left: -200% !important” from the css.
    With the above css the user can turn their phone to landscape and see the whole image

    Best regards,
    Mike

    December 1, 2024 at 10:59 am #1472652
    MdF

    Hi Mike,
    I appreciate the effort in trying to get this resolved and understand the issues with integration into Enfold and WordPress.
    I will continue along the path of using both WordPress and specific Html pages to achieve the desired need for this app.
    I will contact PWA developers and see how it could be integrated.
    All the best.
    Marc

    December 1, 2024 at 12:04 pm #1472653
    Mike

    Hi,
    Very good, shall we close this thread? You can always open a new one later for future issues.

    Best regards,
    Mike

    December 1, 2024 at 12:05 pm #1472654
    MdF

    Thanks Mike, you can close this thread.
    Marc

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Display linked webcam image at full screen height in PWA environment’ is closed to new replies.