i am busy with a wordpress plugin (first time for everything), and i have got the following preview modal, that has several elements and components that run over/in conjunction with the media that is displayed, to enhance the visuals with title, description, and some buttons. now, this works perfectly in the dashboard area of the wordpress environment, but i am battling how to figure out how to generate links so that viewers outside of the WP environment can view the media files, in the frontend, in exactly the same way as this preview modal shows it in the backend.
i have tried using a shortcode embedded in a page on the frontend and then using the link to do a filename query back to the shortcode and the scripts, and all i get is constant 400 and 404 errors, no matter how i restructure the url, and make sure that it is pointing to the right folders and so forth, amongst other errors. I have also tried using a template file and reconstructing the below modal in the front end and trying to hook the ajax calls and functions to bring the wp_options and post meta to the front end, but to no avail. i just get constant access denied and file not found errors.
is there any simple way to recreate this modal in the front end, or to hook into the existing preview modal, and to call on the post meta and wp_options so that i can recreate, or somehow reshow, this modal in the front end, to display in the same manner as it does in the backend for specific media files when being passed through a link that is generated?
i.e. in this modal it has a preview and copy link button on each media item in the grid. when you click the preview button, the below code runs, and creates a preview of how the media will look with all the wp_options stored settings/components enabled/disabled. when you click the copy link button, it should generate a link that allows users outside the WP admin dashboard to view the media in the same way, sans the preview and copy link button. As stated, i have tried several ideas, and none of them have panned out, and i am now just looking for an absolutely simple idea to get the backend to display on the frontend with a mediafile query link. if that is even possible…
Any help in being pointed in the right direction would be greatly appreciated.
// Media Preview function
$(document).on('click', '.media-preview-clickable, .preview-media', function() {
showLoading('Preparing preview...');
const mediaItem = $(this).closest('.media-item');
const mediaUrl = mediaItem.find('.media-preview').data('media-url');
const mediaType = mediaItem.find('.media-preview').data('media-type');
const filename = mediaItem.data('filename');
const previewModal = $('#reemi-media-preview-modal');
const modalImage = $('#preview-modal-image');
const modalVideo = $('#preview-modal-video');
const unmuteButton = $('#unmute-button');
const clickToPlayOverlay = $('#click-to-play-overlay');
const mediaTitle = previewModal.find('.media-title');
const mediaDescription = previewModal.find('.media-description');
const clickthroughButton = $('#clickthrough-button');
const shareButton = $('#share-button');
const topBlackArea = $('.top-black-area');
const bottomBlackArea = $('.bottom-black-area');
modalImage.hide().attr('src', '');
modalVideo.hide().attr('src', '').removeAttr('autoplay');
unmuteButton.hide();
clickToPlayOverlay.hide();
mediaTitle.hide();
mediaDescription.hide();
clickthroughButton.hide();
shareButton.hide();
topBlackArea.hide();
bottomBlackArea.hide();
const buttonContainer = $('.bottom-black-area .button-container');
buttonContainer.removeClass('visible hard-on fade-in');
setTimeout(() => {
const isAdvertEnabled = uiState.lastSavedSettings.advert_enable === '1';
const showTitleSetting = uiState.lastSavedSettings.show_title === '1';
const showDescriptionSetting = uiState.lastSavedSettings.show_description === '1';
const showClickthroughSetting = uiState.lastSavedSettings.show_clickthrough === '1';
const showShareSetting = uiState.lastSavedSettings.show_share === '1';
const buttonDisplayOption = uiState.lastSavedSettings.advert_button_display || 'Fade In';
if (!isAdvertEnabled) {
if (mediaType === 'video') {
handleVideoPreview(
modalVideo,
mediaUrl,
unmuteButton,
clickToPlayOverlay,
false
);
} else if (mediaType === 'image') {
handleImagePreview(modalImage, mediaUrl);
}
hideLoading();
previewModal.show();
return;
}
$.ajax({
url: reemiMediaParams.ajaxurl,
type: 'GET',
data: {
action: 'get_media_metadata',
security: reemiMediaParams.nonce,
filename: filename
},
dataType: 'json',
success: function(metadataResponse) {
if (metadataResponse.success) {
const metadata = metadataResponse.data.metadata;
const title = metadata.title || '';
const description = metadata.description || '';
const clickthroughUrl = metadata.custom_url || '';
const buttonContainer = $('.bottom-black-area .button-container');
buttonContainer.removeClass('visible hard-on fade-in');
if (showTitleSetting && title) {
mediaTitle.text(title).show();
topBlackArea.show();
bottomBlackArea.show();
}
if (showDescriptionSetting && description) {
mediaDescription.text(description).show();
topBlackArea.show();
bottomBlackArea.show();
}
if (showClickthroughSetting) {
if (clickthroughUrl) {
clickthroughButton
.data('clickthrough-url', clickthroughUrl)
.show();
}
topBlackArea.show();
bottomBlackArea.show();
}
if (showShareSetting) {
shareButton.show();
topBlackArea.show();
bottomBlackArea.show();
}
if (buttonDisplayOption === 'Hard On') {
buttonContainer.addClass('hard-on');
buttonContainer.find('.clickthrough-button, .share-button').css('opacity', 1);
} else if (buttonDisplayOption === 'Fade In') {
buttonContainer.addClass('fade-in');
setTimeout(() => {
buttonContainer.addClass('visible');
}, 500);
}
if (isAdvertEnabled) {
const closeType = uiState.lastSavedSettings.advert_close_type || 'Close Button';
const exitFollowthroughOption = uiState.lastSavedSettings.exit_followthrough || 'exit';
switch(closeType) {
case 'Close Button':
const closeButton = $('#close-media-button');
const closeButtonDuration = uiState.lastSavedSettings.image_timer || 15
closeButton.hide();
setTimeout(() => {
closeButton.show();
}, closeButtonDuration * 1000);
closeButton.off('click').on('click', (e) => {
e.preventDefault();
e.stopPropagation();
handleExitFollowthrough(exitFollowthroughOption, {
isPlaybackClose: true,
isModal: false
});
return false;
});
break;
case 'End of Playback':
if (mediaType === 'video') {
modalVideo[0].addEventListener('ended', () => {
handleExitFollowthrough(exitFollowthroughOption, {
isPlaybackClose: true,
isModal: false
});
});
} else if (mediaType === 'image') {
const imageTimer = uiState.lastSavedSettings.image_timer || 15;
setTimeout(() => {
handleExitFollowthrough(exitFollowthroughOption, {
isPlaybackClose: true,
isModal: false
});
}, imageTimer * 1000);
}
break;
case 'Follow Me':
const hasClickthrough = showClickthroughSetting && clickthroughUrl;
const hasShareButton = showShareSetting;
$('#close-media-button').off('click');
if (!hasClickthrough && !hasShareButton) {
const closeButtonDuration = uiState.lastSavedSettings.image_timer || 15;
$('#close-media-button').hide();
setTimeout(() => {
$('#close-media-button').show();
}, closeButtonDuration * 1000);
$('#close-media-button').on('click', (e) => {
e.preventDefault();
e.stopPropagation();
handleExitFollowthrough(exitFollowthroughOption, {
isPlaybackClose: true,
isModal: false
});
const modalVideo = $('#preview-modal-video');
const modalImage = $('#preview-modal-image');
if (modalVideo.length) {
const videoElement = modalVideo[0];
videoElement.pause();
videoElement.currentTime = 0;
videoElement.src = '';
}
if (modalImage.length) {
modalImage.attr('src', '');
}
previewModal.hide();
return false;
});
} else {
$('#close-media-button').hide();
if (hasClickthrough) {
clickthroughButton
.data('clickthrough-url', clickthroughUrl)
.off('click')
.on('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (clickthroughUrl) {
window.open(clickthroughUrl, '_blank');
}
const modalVideo = $('#preview-modal-video');
const modalImage = $('#preview-modal-image');
if (modalVideo.length) {
const videoElement = modalVideo[0];
videoElement.pause();
videoElement.currentTime = 0;
videoElement.src = '';
}
if (modalImage.length) {
modalImage.attr('src', '');
}
previewModal.hide();
return false;
});
}
if (hasShareButton) {
shareButton
.off('click')
.on('click', (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Share button clicked');
const modalVideo = $('#preview-modal-video');
const modalImage = $('#preview-modal-image');
if (modalVideo.length) {
const videoElement = modalVideo[0];
videoElement.pause();
videoElement.currentTime = 0;
videoElement.src = '';
}
if (modalImage.length) {
modalImage.attr('src', '');
}
previewModal.hide();
return false;
});
}
}
break;
}
}
if (mediaType === 'video') {
handleVideoPreview(
modalVideo,
mediaUrl,
unmuteButton,
clickToPlayOverlay,
isAdvertEnabled
);
} else if (mediaType === 'image') {
handleImagePreview(modalImage, mediaUrl);
}
hideLoading();
previewModal.show();
} else {
console.error('Failed to load media metadata');
hideLoading();
}
},
error: function(xhr, status, error) {
console.error('Error retrieving media metadata:', error);
hideLoading();
}
});
}, 1000);
});
