Hi, I was asked to send a message here after posting my issue on Themeforest:
I’m using the Kalium Photography child theme and I have some questions:
1. Can I disable the image titles while hovering over the thumbnails in the lightbox and maybe replace it with an icon of a magnifying glass? I’m using the portfolio option with titles inside. But I’d rather not disable the hover effect entirely because I really like it. I just don’t want the titles.
2. Is there a way to disable the navigation arrows when viewing images on a mobile device? They’re not necessary with swipe navigation and I’m surprised there’s not an option to turn them off for mobile devices (unless I’m missing something). I feel it’s very intrusive to have the arrows appear on top of the images when viewing on a small screen especially with fine art images. Is there a media query I can use? I know some basic CSS.
3. Under "Thumbnail Options" in "Portfolio Settings" when I change the number to show a limited number of thumbnails on the portfolio page, when you scroll down to the bottom of the resulting page it loads more than the number specified. Is this a bug or am I doing something wrong?
The first two fixes worked, but on the second one you meant to say MAX-width: 768 px. But I figured it out and it works great now.
One more thing:
First scenario: I'm using retina-sized images sized to the screen in lightbox popup which are quite large. It works great on desktop, but when I swipe images on my mobile phone it's pretty slow. I thought WP resizes images automatically for mobile. Is there a way to call up alternate smaller images in the lightbox through a media query when the viewer is using a mobile device?
Second scenario: If there is no way to do the above, I'm ok with using the same image for desktop and mobile by compromising and making the images in the lightbox somewhat smaller with Photoshop. But when I try that I noticed the lightbox enlarges the image anyway which reduces the resolution on a big screen. This defeats the purpose of the compromise. In this case is there a way to limit the size in the lightbox to keep it from being enlarged on desktop computers? Hope the question is clear enough.
Installation is easy, and should be applied in the root folder of your WP installation:
1. Download the latest version of Adaptive Images either from the website or from the GitHub repository. 2. Upload the adaptive-images.php files to the server document-root 3. Open .htaccess inside downloaded files, copy the code and paste to your current .htaccess in your site. 4. Add this line of JavaScript as high in the functions.php to your theme:
Hi, I was asked to send a message here after posting my issue on Themeforest:
I’m using the Kalium Photography child theme and I have some questions:
1. Can I disable the image titles while hovering over the thumbnails in the lightbox and maybe replace it with an icon of a magnifying glass? I’m using the portfolio option with titles inside. But I’d rather not disable the hover effect entirely because I really like it. I just don’t want the titles.
2. Is there a way to disable the navigation arrows when viewing images on a mobile device? They’re not necessary with swipe navigation and I’m surprised there’s not an option to turn them off for mobile devices (unless I’m missing something). I feel it’s very intrusive to have the arrows appear on top of the images when viewing on a small screen especially with fine art images. Is there a media query I can use? I know some basic CSS.
3. Under "Thumbnail Options" in "Portfolio Settings" when I change the number to show a limited number of thumbnails on the portfolio page, when you scroll down to the bottom of the resulting page it loads more than the number specified. Is this a bug or am I doing something wrong?
Thanks.
Roger
Hi Roger,
1. Regarding this issue, I am not sure how exactly you want to implement, however this CSS will hide title from hovering in items:
.portfolio-holder .thumb .hover-state.position-center .info h3, .portfolio-holder .thumb .hover-state.position-center .info p { opacity: 0 !important; }And if you want to add magnifying glass, here is an example how to add it:.portfolio-holder .thumb .hover-state.position-center .info {To apply Custom CSS, on WP admin panel menu click Custom CSS link (as shown here).background: url(https://cdn4.iconfinder.com/data/icons/miu/24/common-search-lookup-glyph-128.png) no-repeat center center;
background-size: 24px;
}
2. This should work for you:
@media screen and (min-width: 768px) {.lg-outer.lg-skin-kalium-default .lg-actions .lg-next,
.lg-outer.lg-skin-kalium-default .lg-actions .lg-prev {
display: none;
}
}
3. Portfolio pagination will continue loading all items, and that number only specifies how many items to load when its fired.
I hope I was clear and this will help you.
Hi Arlind. Thanks for your quick response.
The first two fixes worked, but on the second one you meant to say MAX-width: 768 px. But I figured it out and it works great now.
One more thing:
First scenario: I'm using retina-sized images sized to the screen in lightbox popup which are quite large. It works great on desktop, but when I swipe images on my mobile phone it's pretty slow. I thought WP resizes images automatically for mobile. Is there a way to call up alternate smaller images in the lightbox through a media query when the viewer is using a mobile device?
Second scenario: If there is no way to do the above, I'm ok with using the same image for desktop and mobile by compromising and making the images in the lightbox somewhat smaller with Photoshop. But when I try that I noticed the lightbox enlarges the image anyway which reduces the resolution on a big screen. This defeats the purpose of the compromise. In this case is there a way to limit the size in the lightbox to keep it from being enlarged on desktop computers? Hope the question is clear enough.
Thanks for the great customer service!
Roger
Hi Roger,
Great to hear that 2 of the solutions worked.
My answers to your other questions:
First scenario: This can be achieved in a good way that will also save you site bandwidth, so you need to install PHP Adaptive images:
http://adaptive-images.com/
Installation is easy, and should be applied in the root folder of your WP installation:
1. Download the latest version of Adaptive Images either from the website or from the GitHub repository.
2. Upload the adaptive-images.php files to the server document-root
3. Open .htaccess inside downloaded files, copy the code and paste to your current .htaccess in your site.
4. Add this line of JavaScript as high in the functions.php to your theme:
function adaptive_images_cookie() { ?> <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> <?php } add_action( 'wp_head', 'adaptive_images_cookie', 1 );5. Configure the $resolutions variable at the top of the adaptive-images.php file to match the breakpoints you are using for your designs.
Hopefully this will work for you.