How to integrate Piwigo with WordPress using a alias apache and a iframe.
Writing FI to work today has found how to integrate Piwigo (logithèques d'imagerie website) avec WordPress
sous un autre dossier que le site principal. Compliqué mais simple après recherche.
TO BEGIN:
You will need to create a child page to link to your gallery Piwigo.
The functions of WordPress and piwigo may not be integrated directly
and integration from another file using a iframe is necessary.
Let's start by unzipping your file Piwigo in a site file.
We will call it “book”
VERY IMPORTANT :Depending on where you want to unzip the files from Piwigo, the folder name must not be the same as the page name WordPress that you will present on the links of your site.
EXPLICATION:
If the address of your unzip file on your website is identical to the wordpress address, fill in to access the gallery, there will be a reading error and WordPress will take priority, which will have the effect of not being able to read directly on piwigo for responsive display on mobile.
In the example we therefore have :
-the piwigo files unzip in “book”
-a child page template called “page-piwigo”
-a page or article created called “gallery”
-an iframe of the page “gallery” who will be directed to “book”
To display the entire page in your gallery while keeping the site's features, you have to create (via your preferred editor)
a child page template (that we will call “page-piwigo.php”) gathering all the php information of your theme and manually deleting a few lines calling functions of WordPress which allows to define the margins and content frames of the site.
Let's take an example on a random theme, sydney was chosen as an example.
Below “page.php” gathering all the information for the complete display of a page called the default template in the administration WordPress.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package Sydney
*/
get_header();
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
Note 2 separate parts distributed as follows.
First part
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package Sydney
*/
get_header();
And part two
<?php
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
It is necessary not to use the header but to copy it directly to your new child page template “page-piwigo.php”
Now open header.php then copy to your new page.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<?php if ( ( get_theme_mod('front_header_type','nothing') == 'image' && is_front_page() ) || (get_theme_mod('site_header_type') == 'image' && !is_front_page() ) ) : ?>
<?php $shop_thumb = get_the_post_thumbnail_url( get_option( 'woocommerce_shop_page_id' )); ?>
<?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb ) : ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php endif; ?>
<?php endif; ?>
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
Une fois cette manipulation faite il ne vous reste qu'à ajouter la deuxième parti de “page.php”
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<?php if ( ( get_theme_mod('front_header_type','nothing') == 'image' && is_front_page() ) || (get_theme_mod('site_header_type') == 'image' && !is_front_page() ) ) : ?>
<?php $shop_thumb = get_the_post_thumbnail_url( get_option( 'woocommerce_shop_page_id' )); ?>
<?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb ) : ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php endif; ?>
<?php endif; ?>
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
<?php
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
As explained above, il est nécessaire d'enlever quelques fonctions
pour pouvoir disposer de l'espace tout en gardant la fonctionnalité de texte de WordPress to insert the script Iframe, inclure le footer et si souhaitez d'ajouter plus sous la galerie.
Delete lines 54 at 59 included and 61 at 77 included.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
IFRAME:
To create a Iframe, copied some line in the WordPress page editorial text box (in HTML text mode and not visual or block) of your new page “gallery” and in the page template select “piwigo” (which is the child page template to create above).
We have included javascript so as not to have vertical double scrolling and to have an automatic resizing.
Also included marging top to modify (it's up to you to review how high you want to start the gallery frame).
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="https://french-interface.com/book/" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)"></iframe>
The result of this Iframe you will display your gallery in full screen.
Example below contained in the DIV our article on functional gallery our website.
A problem observed in other language navigation whether using the plugin Transposh and a alias as a navigation link, it adds the edit link and thus affects redirection.
Solved by adding <span class=”no_translate”> and </span> like this.
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<span class="no_translate"><iframe src="https://french-interface.com/wp-content/themes/FI/book/index.php?/category/114" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)"></iframe></span>
DEVICE DETECTION
Pour l'affichage sur mobile de notre galerie, a script must be added on the child page “page-piwigo” to be placed between the tags <head> and <head>.
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="https://french-interface.com/galerie/";
}
</script>
Add an onload on the boby.
<body onload="DetectTheThing()" <?php body_class(); ?>>In the end this gives us.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
<?php wp_head(); ?>
</head>
<body onload="DetectTheThing()" <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
Do not hesitate to make us leave your comment to improve writing.
[site_reviews_summary assigned_to=”post_id”]
[site_reviews_form assign_to=”post_id”] |
[site_reviews display=10 assigned_to=”post_id”]
Flux RSS
It’s hard to find knowledgeable people about this topic, but
you sound like you know what you’re talking about! Thanks
I actually appreciate your providing these details for folks seeking to know
more about subject areas similar to this. Your blog
was well written and very well researched, that is certainly greatly valued.
I actually am constantly seeking for new websites to
follow and read on a regular basis.
What’s up every one, here every one is sharing these know-how, so it’s nice to read this blog, and I used tto go to see this blog alll tthe time.
Definitely imagine that which you stated. Your favourite
justification appeared to be at the net the easiest factor to be
aware of. I say to you, I definitely get annoyed even as people consider concerns that they plainly do not realize
about. You managed to hit the nail upon the top and also outlined out the entire thing with no need side-effects ,
other folks could take a signal. Will likely be back to get more.
Thanks
Greetings from Florida! I’m bored to death at work so I decided to
browse your site on my iphone during lunch break. I love the info you provide here and can’t wait to take a look when I get home.
I’m surprised at how fast your blog loaded on my cell phone ..
I’m not even using WIFI, just 3G .. Anyhow, wonderful blog!