Single Image Presentation View: Remove Right and Left Browse icons

chumby · 2020-04-16 18:33:40

Hi there,

Is there a way to remove the left/right buttons which appear above the single-image presentation.

Something like the below perhaps? I couldn't get this working however.

.fancybox-navigation .fancybox-button--arrow_right, 
.fancybox-navigation .fancybox-button--arrow_left 
{
    opacity: 1;
    visibility: hidden;
}

Example URL at:

https://www.tasmanianphotos.com/tasmania/stock/images/20170115-215755-Marion-Bay-Bird-single.php

Cheers,
Chumby

rod barbee · 2020-04-16 21:32:10

Try

li.single-image-next, li.single-image-previous {
display: none;
}

Last edited by rod barbee (2020-04-16 21:33:18)

chumby · 2020-04-17 06:00:38

Thanks Rod,

But that didn't seem to work (unless I have some caching issues).

Any other ideas?

Cheers
Chumby

Daniel Leu · 2020-04-17 06:28:00

Chumby, so you want to prevent people to advance in the single page view?

chumby · 2020-04-17 06:34:19

Yes Daniel, trying that out within a set of search results.

I have a slideshow view set up for normal browsing of an album, but seeing if by making single-view image in a search results set non navigatable, the user will stop broowsing and start purchasing!

I need to keep the "cross" in the left hand corner, so the user can go back to the search results, and also the shopping cart icon on the right so that they can purchase an image.

Does that make sense, Dan?

Cheers,
Chumby

Daniel Leu · 2020-04-17 06:38:11

Yes, the css needs more specificity:

ul.single_icons .single_image_next,
ul.single_icons .single_image_prev
 {
    display: none;
}

But if one clicks on the image, then you advance to the next image anyway. The solution for that would be phplugins where you replace the image content. I think you know now how to do this ;-)

Last edited by Daniel Leu (2020-04-17 09:01:00)

chumby · 2020-04-17 07:01:33

Hi Dan,

Thanks for that. Have updated my .css file and uploaded but not seeing any difference. Not sure if I have caching issues but have tried in a different browser, cleared template cache and flushed everything on my cloudfare cache. Have you been able to see the above code working?

Would be cool if someone clicked on the image to proceed to the shopping cart (in the same way the shopping cart item does).

Appreciate your help as always.

Cheers,
Chumby

rod barbee · 2020-04-17 07:54:13

in your custom css there's a comma after .single_image_prev
Just remove that.

chumby · 2020-04-17 08:15:00

Got it! Thanks Rod. Wish I understood CSS better

Now just to to stop the navigation click-through when someone clicks the image, or make it so that the click takes you through to the shopping cart.

In the php_plugins (function single_bottom) I have the below for the Pay Button.

    <div align="center">
    <button class="add-to-cart" data-item="'.$photo->getFilename().'" data-name="'.$photo->getMetadata(Photo::$PHOTO_TITLE).'" data-price="TasmanianPhotos Pricing Scheme Default" data-thumbnail="'.$photo->getThumbnailURL().'"> Buy this Photo</button>
    </div>

I wonder if this can be modified for the image? At the moment I have Daniel's keyboard navigation script working on the picture.

Cheers,
Chumby

rod barbee · 2020-04-17 08:18:50

that one's beyond me

But it probably can be done with the single_top hook. See the phplugins-pangolin-sample.php file:

 *    single_top
 *      - if return=false, single image and content are skipped
 *      - called immediately above the single image display
 *      - encompasses the single image and related metadata; can be used to replace it
 *      - available only on single-image HTML pages for applicable album templates

Last edited by rod barbee (2020-04-17 08:21:48)

chumby · 2020-04-17 08:54:41

Cheers Rod,

Appreciate your help as always.

I will have a look at the single_top function and see if I can make sense of modyfying it for this purpose.

Cheers,
Chumby

Daniel Leu · 2020-04-17 09:51:46

Just be aware by using phplugins, you will spend more time maintaining your site. You have to verify many things that would work out of the box by sticking to the default implementation!

This is a simplified example of what I use on my site and is obviously based on existing backlight code:

function single_top( ){
	$photo = $this->photo;
	$album = $this->album;
	
	$back = $album->getIndexPageForPhoto($photo);

        $img_title = $photo->hasMetadata(Photo::$PHOTO_TITLE) ? $photo->getMetadata(Photo::$PHOTO_TITLE) : $photo->getFilename();
	$img_caption = $photo->hasMetadata(Photo::$PHOTO_CAPTION) ? $photo->getMetadata(Photo::$PHOTO_CAPTION) : '';
        $img_alt   = $photo->hasMetadata(Photo::$PHOTO_CAPTION) ? $photo->getMetadata(Photo::$PHOTO_CAPTION) : $img_title;
	
	$ph_id = $photo->getItemNumber();
	$ph_path = $photo->getUrl('photos');
	$ph_w = $photo->getPhotoWidth();
	$ph_h = $photo->getPhotoHeight();
	
	echo '<h1>'. $img_title .'</h1>';
	
	// Top Bar
	echo '<ul class="single_icons" style="max-width:' .$ph_w.'px;">'; 

	if ($back) echo '<li class="single_image_back"><a href="'.$back.'"><span>Album</span></a></li>';

	echo '<li><button class="add-to-cart" data-item="'.$photo->getItemNumber().'" data-name="'.$photo->getItemName().'" data-price="'.$photo->getMetadata("itemPricing").'" data-thumbnail="'.$photo->getURL("thumbnails-for-mobile").'"></button></li>';	
	?>
				
	</ul>

	<figure id="fig-<?php echo $ph_id?>" class="single_image" itemscope itemtype="http://schema.org/ImageObject" style="max-width:<?php echo $ph_w;?>px;">
		<img src="<?php echo $ph_path?>" id="photo-<?php echo $ph_id?>" height="<?php echo $ph_h?>" width="<?php echo $ph_w ?>" style="width: <?php echo $ph_w?>px;" alt="<?php echo $img_alt?>" />
		<figcaption"><?php echo $img_caption?></figcaption>
	</figure>

	<?php

	return false;	
}

But note that this code doesn't support the backlight 'alt image' option or language customizations.

chumby · 2020-04-17 10:44:33

OK, great thanks Daniel.

I will check out your code and see if I can get something working here.

Much appreciate your help as always.

Cheers
Chumby.

chumby · 2020-04-18 14:13:35

Hi Daniel,

Thanks for the code - seem to have it working as I would like with no click through or navigation. See link below.

https://www.tasmanianphotos.com/tasmani … single.php

Just need to work out how to format the caption (center and smaller text) presented by the figcaption tag. Have been adding css to my custom css but havent been able to see any difference as yet.

Cheers,
Chumby

rod barbee · 2020-04-18 22:14:09

Look at your code, your figcaption tags have quote marks in them that shouldn’t be there:
<figcaption”>........<figcaption”>

I don't see any css in your custom css file that would affect the figcaption.

to style the caption, fix the figcaption tag, then use this:

figcaption {
text-align: center;
font-size: smaller;
}

If you want these changes to affect this album only (the "image" album), you can target by using the slug body class:

.slug-images figcaption {
text-align: center;
font-size: smaller;
}

If you want to only target albums using this particular template (you don't want other albums using another template to have the styling applied):

.album-template-identifier-DefaultAlbum figcaption {
text-align: center;
font-size: smaller;
}

you can also designate a size for the font in px, em, rem

You're also using some deprecated html for the Buy button:

<div align="center">
    <button .....> Buy this Photo</button>
    </div>

instead, use inline css:

<div style ="text-align:center;>
    <button .....> Buy this Photo</button>
    </div>

Since this is getting off the original topic, if there are more issues, can you start a new topic?

Last edited by rod barbee (2020-04-19 00:35:04)

chumby · 2020-04-19 06:46:55

Thanks very much, Rod.

Yes I missed the extra " in the figcaption tag which was messing up the formatting changes. I re added this CSS (as my code wasn't making any difference) and formatting now displaying as it should!

As per the Pay Now button I added in the missing " in into the inline css code as per below:

<div style ="text-align:center;">
    <button .....> Buy this Photo</button>
    </div>

and the Pay Button is now centered and using the correct CSS formatting!

Thank you very much Rod (and Daniel) for taking the time to help me sort out this single-image view page. Now working exactly as I need.

Cheers,
Chumby

rod barbee · 2020-04-19 09:41:33

chumby wrote:

As per the Pay Now button I added in the missing " in into the inline css code as per below:
<div style ="text-align:center;">
    <button .....> Buy this Photo</button>
    </div>
Cheers,
Chumby

Hah! That quote mark must have defected to the figure!

Community @ The Turning Gate

#1 2020-04-16 18:33:40

Single Image Presentation View: Remove Right and Left Browse icons

#2 2020-04-16 21:32:10

Re: Single Image Presentation View: Remove Right and Left Browse icons

#3 2020-04-17 06:00:38

Re: Single Image Presentation View: Remove Right and Left Browse icons

#4 2020-04-17 06:28:00

Re: Single Image Presentation View: Remove Right and Left Browse icons

#5 2020-04-17 06:34:19

Re: Single Image Presentation View: Remove Right and Left Browse icons

#6 2020-04-17 06:38:11

Re: Single Image Presentation View: Remove Right and Left Browse icons

#7 2020-04-17 07:01:33

Re: Single Image Presentation View: Remove Right and Left Browse icons

#8 2020-04-17 07:54:13

Re: Single Image Presentation View: Remove Right and Left Browse icons

#9 2020-04-17 08:15:00

Re: Single Image Presentation View: Remove Right and Left Browse icons

#10 2020-04-17 08:18:50

Re: Single Image Presentation View: Remove Right and Left Browse icons

#11 2020-04-17 08:54:41

Re: Single Image Presentation View: Remove Right and Left Browse icons

#12 2020-04-17 09:51:46

Re: Single Image Presentation View: Remove Right and Left Browse icons

#13 2020-04-17 10:44:33

Re: Single Image Presentation View: Remove Right and Left Browse icons

#14 2020-04-18 14:13:35

Re: Single Image Presentation View: Remove Right and Left Browse icons

#15 2020-04-18 22:14:09

Re: Single Image Presentation View: Remove Right and Left Browse icons

#16 2020-04-19 06:46:55

Re: Single Image Presentation View: Remove Right and Left Browse icons

#17 2020-04-19 09:41:33

Re: Single Image Presentation View: Remove Right and Left Browse icons

Board footer