Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
alexhenes
Experienced
Topic Author
Posts: 568
Joined: 28 Sep 2006, 16:13

Image Displaying Larger Than it Should

25 May 2015, 12:46

I have a single image in the gallery below...

http://www.merelyafleshwound.com/kayaki ... ime-creek/

In the gallery it displays pixelated and much larger than it should. If the user clicks on the image they get the correct size in the picture viewer.

Any ideas on how to correct the display size in the gallery?
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Image Displaying Larger Than it Should

25 May 2015, 13:04

Well, of all the gallery styles (vertical, grid, slideshow, carousel), you have selected to use a "vertical" layout as in this example https://demo.photo.gallery/galleries/landscapes/, and additionally you have set the gallery to "wide". This is a gallery page, so how exactly do you want it to display? How about trying the "grid" layout as as you have in your other galleries like this one?
http://www.merelyafleshwound.com/skiing ... -mountain/

How exactly were you expecting to have the image display with those settings? X3 is a "responsive" gallery where images are not strictly measured by the pixel, but will scale to fill the space available, especially when you are using the vertical scroll in "wide" modus with no grid.

The reason it displays correctly in the popup window, is because the popup window is created specifically to display a single image, will not scale the image above its original size, and can easily center the image. In a gallery layout with the default vertical style, it will scale the image to the containers width, which you have set to wide. What are you trying to do anyway?
 
User avatar
alexhenes
Experienced
Topic Author
Posts: 568
Joined: 28 Sep 2006, 16:13

Re: Image Displaying Larger Than it Should

25 May 2015, 22:10

Is it fair to ask that no page should scale an image larger than it's original size? Or... if an image is going to be scaled above it's original size it should be done with an explicit setting?
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Image Displaying Larger Than it Should

25 May 2015, 23:20

alexhenes wrote:Is it fair to ask that no page should scale an image larger than it's original size? Or... if an image is going to be scaled above it's original size it should be done with an explicit setting?
Before we take this any further ... How exactly did you expect the layout to work with one small image in a vertical wide layout? This debate seems a bit arbitrary. This is the foundation of modern responsive websites, that images scale to fit within their container, so that it fits on all device widths and on all pixel-densities. Especially for the default vertical layout, keeping all images at the same width, this is the fundamental nature of the layout. If you as an author know your images are not big enough for your "wide" symmetric vertical layout, then why would you assign that layout? You can assign a narrow module or a gallery grid ...

I understand your question, but there are technical-logical reasons why it does not work like you think.
 
User avatar
alexhenes
Experienced
Topic Author
Posts: 568
Joined: 28 Sep 2006, 16:13

Re: Image Displaying Larger Than it Should

25 May 2015, 23:38

Centered in original size?
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Image Displaying Larger Than it Should

26 May 2015, 00:00

I would agree that sounds logical, although why would it not align to left like is default in html when any element is not 100% width? Sorry, I just think you are a bit presumptions to a layout that you shouldn't be using for this in the first place. As quoted in the example page for vertical layout, see first line:
demo examples wrote:# VERTICAL LAYOUT [GALLERY]
# The vertical method simply creates a layout where images are stacked vertically and respond to screen width. Although the vertical method does not exhibit any wow-factor, it is very efficient for scrolling through items both on desktop- and small touchscreen devices. The vertical layout method is avaiable for both GALLERY and FOLDERS. The vertical layout does not come with any specific settings, but would normally be complemented by a few X3 style classes and utilities.
Sorry, I don't want to debate this any more, but you should not be using the vertical layout for this ... Although Im struggling to understand what kinda useful page you are trying to create in the first place.
 
User avatar
alexhenes
Experienced
Topic Author
Posts: 568
Joined: 28 Sep 2006, 16:13

Re: Image Displaying Larger Than it Should

26 May 2015, 01:06

I don't think I have selected a vertical view. As far as I can tell I have specified Grid. Here is the code.
Code
gallery	: grid wide frame items:preview,description
folders	: grid:3,2,1 frame text-left title-small items:label,preview,content caption:none x3-hover-scale crop:3,2
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Image Displaying Larger Than it Should

26 May 2015, 01:46

Hmm yes, the grid will adapt to a single column if there is only a single image. At least remove the "wide" setting please, and try replacing it with "narrowest".

You are aware that in responsive designs, things are not locked to pixels. What is that image gonna look like if you enforce true pixel-size on double- and trippel-pixel-density devices (like iphone 6).

Furthermore, it seems you are trying to use a gallery layout to achieve something that is only a single image, that you for some reason only have in ultra-low resolution. Why not just add it inline to a page? Seems like we are trying to solve page layouts for something that its not made for, and will never look nice anyway. A gallery normally indicates multiple images.
 
User avatar
alexhenes
Experienced
Topic Author
Posts: 568
Joined: 28 Sep 2006, 16:13

Re: Image Displaying Larger Than it Should

26 May 2015, 10:18

Thanks Karl... narrowest improves the situation quite a bit.

Sorry if this is laborious... I tend to think functionally about what I would like on my site. As I learn more about X3 it will be easier to apply the technical implementation to the functional.

I am not sure I know how to add an image 'inline to a page'. Any place I can read about that?
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Image Displaying Larger Than it Should

26 May 2015, 10:54

I can understand how and why you see it like this, but in X3 we kinda need to follow a programmatic approach for the primary gallery logics.

There is no built-in method to produce a layout where it shrinks down an image and displays it in the middle of the stage below the page content. You could add it inline with markdown code like below:
Code
![title]({{path}}/name-of-file.jpg)
You would probably need to use grid or some custom html/css to make it scale down and center in the middle though. Personally, if I HAD to create a page that display a single small image, I would probably want to add it into custom columns with the image on the left and some text on the right. There will be some text I assume ...