Search…

X3 Photo Gallery Support Forums

Search…
 
CrisC
Experienced
Topic Author
Posts: 59
Joined: 23 Oct 2018, 05:13

Hiding Logo fromm menu in mobile page

24 Oct 2018, 10:27

Hi,
Is it possible to hide the Logo from the mobile View?

Right now, the mobile View dies Show the Slideshow anderen above the Image my Logo will be place.
This ist OK for Images in landscape orientation, gut not for Images in Portrait orientation, because then the Logo ist overlaying parts of the Images.
Ich would Like to hide the Logo - andere maybe IT could only be visible If the User opens the Menu... Or ist IT possible to Set Up a different Logo (wider not the hight) for the mobile View?

Thanks and with best regards
Christoph
Last edited by CrisC on 24 Oct 2018, 19:34, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Hiding Logo fromm menu in mobile page

24 Oct 2018, 13:23

It is possible to hide the logo with some custom CSS, or just make it smaller, but it is not a setting. You need to keep in mind that the INTRO-slideshow is meant to be a TEASER, and should not really affect the logo or menu. If you want the visitor to focus on your photos, you should really lead them into a section where they can VIEW the images separate from the INTRO-plugin.

Or ist IT possible to Set Up a different Logo (wider not the hight) for the mobile View?
With some custom CSS, yes. Do you have a link to your website? Keep in mind, getting everything to look nice on ALL screens/devices is a compromise as there are too many factors, including orientation.
 
CrisC
Experienced
Topic Author
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Hiding Logo fromm menu in mobile page

24 Oct 2018, 15:28

Hi,

sure - you can visit my page @ https://www.caina.de
The reason for my request is just:
I have setup a Galery with all my images. On the Homepage, the Slideshow is using this galery page for getting the images.

So, you have a slideshow with all pictures - and you could go through the galery.
I haven't devided my images into different "topic" like landscapes, animals, people or something like that.
The page is just to publish my images without any "professional" background behind it - yet.

On the Mobile Page, the PageLogo does overlay the Slideshow - and even if it would be used as a Teaser, I don't think, that this is looking very nice.
In fact: if I'm resizing my Desktop Browser, so that the mobile theme will be activated (menu only visible by clicking the menu button) the Logo is not visible.
If I'm using my phone - it will show the logo.

Here's a screenshot from my mobile phone:
Image

And this is, when I just resize my desktop browser to "simulate" the page resolution of a mobile device:
Image
as you can see, the Logo isn't visible here, but on the mobile device, it is...

I already know, that there are some kind of limitations in responsive design...
- what if the orientation of the device will be changed
- what if the mobile device isn't a smartphone but a tablet with more "space"
- etc.

but right now, I think having the page logo overlaying the slide show isn't really a good solution and in fact, I would prevent something like the layout from the second screenshot :)

Any help with the custom CSS would be very appreciated :)

[edit]
For now, I have changed to a transparent background - which is much better, but still not what I really want to have :)
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Hiding Logo fromm menu in mobile page

25 Oct 2018, 00:20

Ok, so I see this post comes with multiple questions now, so I will attempt to keep my reply as short as possible.

First of all, considering you have images of multiple aspects, some with light background, some with dark background, viewed from multiple devices, all with different screen aspects, and everything supposed to go nicely below your LOGO which you now have in BLACK. Add in the fact that you have set your intro to "contain" instead of "cover", which yes will display the entire image (un-cropped by screen), but will create two potentially large margins on left/right or top bottom ... all mixing in with the logo.

Sorry, but that is far from a perfect condition of course. As I mentioned in my previous post, the slideshow-INTRO is a compromise. Personally, the main idea is to use it for a specific selection of images, which 1) Is "OK" that is cropped, and 2) Works nicely with your specific logo. A good example is my own website mjau-mjau.com.

Point is, use slideshow-intro as a simple module that works well on the front page combined with logo ... Or if you really really need your images there in multiple aspects in multiple colors to work nicely on multiple screens, then don't use it as an "intro"? If you still want to keep it, you must understand the consequences and the compromises involved. In your case, checking through your images on BOTH mob ile and desktop, I see lots of empty margins, and I see the black logo doesn't work nicely on many images ... surely better in white? Also, why so many images in the INTRO plugin? Why not select the 4-5 BEST photos, which also work well with logo and all layouts? If you want your visitors to enjoy your images, that should be from outside an "intro" plugin, insensitive to logos and screen/image aspects.
In fact: if I'm resizing my Desktop Browser, so that the mobile theme will be activated (menu only visible by clicking the menu button) the Logo is not visible.
Disregard this please. Because you are using the sidebar layout, X3 does not in realtime move the logo back and forth when resizing the browser. If you open it from mobile/tablet, the logo will always display, also after orientation.
I already know, that there are some kind of limitations in responsive design...
- what if the orientation of the device will be changed
- what if the mobile device isn't a smartphone but a tablet with more "space"
- etc.
Same as my response above. If the orientation changes, it is still a tablet and touch devices. It doesn't jump layouts on mobile devices, and you cannot resize the browser. A tablet, even with "more space" will always show the slidemenu layout.
but right now, I think having the page logo overlaying the slide show isn't really a good solution and in fact, I would prevent something like the layout from the second screenshot
As mentioned, that layout simply won't happen on mobile devices. But what I don't understand is your question ... If you don't want the logo to overlay the image, then isn't this actually the solution you are looking for? The second layout is after all the logo hidden ... The empty "margins" on the sides are after all artifacts from your choice to use "contain" instead of "cover".

Logo
So finally, it also comes down to your logo (which is quite tall), which has to be displayed on mobile also. Here are two other websites with sidebar you might want to check:
http://dominiksellung.de/
https://www.pietrobiondo.it/

I would have changed my logo to WHITE instead of black if I was you, and remove the semi-transparent background. The logo will be visible on "most" images, and if some not, ok not a big problem. If you insist on having multiple aspects displayed in "contain" mode, you will have to accept the any visibility issues that may occur based on aspects. There is no "magic" for this. Personally, as noted above, I would not show that many images in intro, in contain mode, at least not if you also find it important to emphasize the logo, which is quite tall.

You have the option to set the width/height of your logo from Settings > Style > Logo. There are also some ways in CSS to for example change the size of the logo (make it even smaller) on mobile devices. X3 already has a MAX-WIDTH for the logo, but because your logo is tall and not really "too wide", it is not resized down. Let me know if you would like some custom CSS to for example scale the logo down on mobile devices. Apart from this, you will need to consider everything from above.
:star:
 
CrisC
Experienced
Topic Author
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Hiding Logo fromm menu in mobile page

25 Oct 2018, 03:50

Ok thanks.
I have to rething some topics then.

The first thing I wanted to achieve was in fact recreating the design (near to ~98%) of my old page system.
There the Slideshow was just used like a digital image frame.
Personally, I could live with the borders when the image is displayed in "contain" - but maybe, I will change this and only select a few images for the slide show.

Yes - my logo is big... because I haven't resized the image yet for using it within a website.
Yes, the text is black but the background should be completely transparent. I don't know, wyh you say it is "semi-transparent" / or black?

Anyway - changing the text to white could work for mobile view, but I like the white / light design of the menu in desktop view - and then having a white text would also not work.
If you could provide me some CSS with which I could change the logo image when the responsive design will switch to "mobile" that would be nice.
I have another type of the Logo which is wider and could work nicely in the mobile view... then I would give it a try before I came to a solution how I want to change the intro etc.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Hiding Logo fromm menu in mobile page

25 Oct 2018, 06:08

Yes, the text is black but the background should be completely transparent. I don't know, wyh you say it is "semi-transparent" / or black?
It was black when I checked earlier. Is white now, which is much better. It still has a semi-transparent black background inherited from your slideshow intro settings.
Anyway - changing the text to white could work for mobile view, but I like the white / light design of the menu in desktop view - and then having a white text would also not work.
Well, it's pretty straight forward: You select a SKIN color that you like, and then you need a LOGO color that goes well with the skin color. This goes for both mobile and desktop. The exception view is slideshow-intro, which you are actually choosing for the images to go UNDER the logo. Even in desktop mode, the logo normally goes above the images, except in sidebar mode (the layout you have chosen) ... Normally, this works nicely, and you have several options in the slideshow intro settings to make sure the contrast is good enough (see screenshot below). So apart from all the help X3 can give you up front, the only further improvements you can achieve is to plan the images you choose to display vs your logo style/colors.
Image
If you could provide me some CSS with which I could change the logo image when the responsive design will switch to "mobile" that would be nice.
A bit hard for me to write lots of examples if you don't know exactly what you want. Also, CSS is generally for styling, and cannot dynamically "replace" images. It could be achieved by using CSS background images, but I can't "just write" this up front. Also, you want to change the logo for mobile on ALL pages? Surely you only want to change the logo on mobile when it overlays the slideshow intro? Surely you see how complex this is getting? The general code for styling the logo could for example be:
Code
.logo-image {
  max-width: 100px;
}
@media only screen and (min-width: 600px) {
  .logo-image {
    max-width: 200px;
  }
}
The above would set default "mobile first" image width to 100px, and then screens 600px up logo would be 200px. Definitely fixable, but you are still dealing with complicated stuff since there is no perfect logical solution. Basically you are asking for a solution to change the logo, on mobile, but only for the slideshow intro ... 
 
CrisC
Experienced
Topic Author
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Hiding Logo fromm menu in mobile page

25 Oct 2018, 08:37

I do not have any issues if the Logo would be another one also for the other pages.

Ok, let's make it more clear:
On Mobile devices, I want that always "Logo_mobile_wide" will be used.
On desktop devices, I want that always "Logo_default" will be used.

the definition, when the page is using "Mobile" - will be the screen resolution.
f.e. Resolution > 600 -> Desktop and < 600 -> Mobile

I think, this will work with the provided CSS from you ?!
 
CrisC
Experienced
Topic Author
Posts: 59
Joined: 23 Oct 2018, 05:13

Re: Hiding Logo fromm menu in mobile page

25 Oct 2018, 15:46

Thanks a lot for your help and advice :)
I have now changed the design of the page to what the intro should be used for - I have changed the Logo design to a smaller - wider one, and I think, everything should be fine now.

One issue I've had in the past was in fact the selection of just a handful of images that should be presented in such a slideshow.
Therefore, I've decided to put every image into the slideshow on the entry page...
Anyway - it's working now.
Again, Thanks a lot :)
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Hiding Logo fromm menu in mobile page

26 Oct 2018, 00:53

Ok, good  :thumbsup:

I could have provided a solution for multiple images, but that is a CSS "hack" that requires setting logo as background image, so we can change the background per device width.