Built in navigation system failing on mobile. Needing to switch to a more advanced and better working nav bar. Questions on switching

Okay I have a link to the test publish page now - https://www.retrospect90s.life/90sStyles/ . Had to Re-link every single picture on the site first since they were stored on the cloud and I don’t think they are supposed to be. All the pictures in the grid are 256px now and it seems to be loading decently fast on my end. When you click on a photo some of them take a bit to load because a few are big like the first image in the set. Doesn’t seem like the size of the image is all the different which is okay to me I think the grid is currently a good size.

1 Like

All the images looked pretty good to me, until I got to the mobile break point. At the mobile breakpoint, the images are being displayed at up to 354px wide. So, you’re generating thumbnails that are 256px wide and then displaying them at up to 138%. When the browser scales the 256px image up to 354px, you do get some blurriness. I’d change to using 512px thumbnails, unless you set Gallery to display 2 per row at mobile.

Why are you using PNG for your images? You’ll likely get significantly smaller file sizes and just as good of image quality using JPG.

1 Like

I’m pretty sure that the stack is saving the previews as PNGs. The folder of those images on my computer is all jpg and if you try to save the full size image you will notice that they are all in jpg format. Elixar must have some reason why the previews of the exact same images are automatically converted to another format.

Okay I will try changing the images back to 512. I would rather have the mobile version continue to display one photo per row then go to a smaller size at two per row. If I need to address loading issues in the future I may use a smaller banner photo at top.

The Stacks API does not give us the ability to choose an output format for Image Transforms. This means I do not have a way to change your image from one format to another.

For example – if you visit the Foundry documentation page for Gallery you’ll see all of the thumbnails are JPG images. This is because my original images were JPG images. Here’a a look at the code for one of the thumbnails:

I suspect you used PNGs for your original images. If you’d like us to check, please provide us with a ZIP file containing all of your images. We need the images you dragged into the stack. To share your ZIP file of images with us you can use WeTransfer to create a link that allows us to download it.

As Adam mentioned, when I was testing your issue here, I was dragging JPG images into the stack and both my previews and full-size images are JPG. When I look at your Gallery files in my web browser, they all appear to be PNG (even the full-size ones).

I’d double check that your images are really JPG. You can’t go by the extension. You should open them in MacOS Preview app and view the information on them which should show their actual format.

1 Like

It just that multiple sources are telling me it is jpg; Get Info window, the info sidebar column in Finder, it was it says in Preview and jpg comes up when I go to the save as dialog box, when I try to save the large image in the browser it says jpg. Yet when I look at the source code or try to save the image it says png. How can I possibly know what the images are supposed to be?

@Elixir Okay that is good to know. Now I just have to figure out why it tells me the same image is saved as both jpg and png depending on where I look.

That’s odd. I took a look at one of the full size images and developer tools shows is as a PNG (I believe that’s based on the extension). When I save that image locally and open it in Preview, it’s a JPG with a PNG extension. I don’t know why it would do that. If you want to post a link to a zip file with the original images (or PM the link), I’ll see if I get the same results when adding them here.

2 Likes

I think you might have compressed the images and still have left .png at the end of the name. The .jpg extension is invisible in the finder, so you have a .png name but the image is rightful a .jpg

Okay here is the link to those images. Thanks for taking a look at it. Yeah that is strange that it is a shows a jpg with a png extension.
https://www.dropbox.com/s/zvphhm6s299x9fk/Top%20Candidtates%20squashed%20and%20size%20reduced%20on%20some.zip?dl=0

@Fuellemann Most all of them have been run through Squash. Not sure if it got changed to png while in that program. I can’t remember intentionally going with a different file format there.

@KipV, the images in your zip file are definitely JPG files with JPG extentions.

I took your images, created a new RW project, added a Stacks page, and added the Foundry and Gallery stacks to it. I added all of your images to the Gallery stack. When previewing and also looking at the exported files, all of the images are JPG files with JPG extensions. The source code also references JPG extensions, which is what Adam pointed out on your test page. In summary, my results are what I’d expect and are different from your test page.

If I were you, I’d do what I did with a fresh project and the stacks with their default settings. Add the images and see if you get the same results viewing the source code. RW should be linking to files with JPG extensions and not PNG extensions. If you need help checking that, just publish another test page.

For reference, I tested with RW 8.8.1, Stacks 4.1.4 and Gallery 2.3.3.0

2 Likes

Do you mean make a fresh Foundry page or an entire website project? It seems to me just doing a new page would be sufficient to making sure everything on of relevance is set at the default settings? Thanks for looking into my images and making a new page!

Another reason I ask the question about how much I would need to re-write is that I am hoping to also move forward with overhauling the navigation system which I am guessing may also take a bit of time to do. There would then be other adjustments on top of that. I had been hoping to get things wrapped up sometime in April if that would be possible.

You can try a new page in an existing project. If we see the same thing, I’d then suggest you try a new, blank project.

Right now we’re just trying to determine where the issue is. Until then, I have no idea what you might have to rework.

Well okay, hopefully it won’t be too much rewriting work but if it is I guess it will be worth it in the long run. I am really looking forward to putting a better navigation system in! The simple navigation worked okay when it was a smaller site last year but works pretty poorly as it has grown.

As I had a few weeks to think about a full rewrite doing that might end up making sense. One of the problems with the current site is that I use that big image at the top for a headline banner for the page’s article but that isn’t a very good solution for the phone because you can only see the center segment of the image and therefore only see part of the headline if it’s built into the image.

I may start over in Foundry and then either use a smaller image that can completely show up on the phone or play with uploading fonts to get a particular headline style text I want. It looks like I will move over to the Foundry forums pretty soon.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.