Dealing with images when developing on localhost with wordpress

Giulio Ganci — Thu, 02 Jun 2022 22:16:43 +0000

Many developers tend to work on new features directly on the production server, asserting that configuring a wordpress development environment locally for a site already online has the following disadvantages:

Too much time to configure
Too much disk space occupied by images
It's just a website...

Ignoring the last point, in my mind I always think "We are developers, We are smart!" regardless of what we are developing: webapp, website in wordpress or a cooking recipe.

A developer uses methodologies and tools to maximize the result with minimal effort (sometimes 😂).

Now I'll show you my personal recipe of how I prepare my local development environment for a wordpress site.

Before start

I assume you have a minimum of experience in developing websites on wordpress.

In this post I will not cover the configuration of the AMP stack, however there are several solutions on the market such as MAMP, Vagrant or Valet.

Cloning and configuring

When I set up my environment I generally start with these steps:

Download wordpress in your local environment making sure to have the same wordpress version as the online website.
Download themes and plugins from the remote site
Dump the sql database from the remote server and import it into your local mysql server.
Review your local wp-config.php file to make your wordpress site start correctly.

It may seem like a lot of work, but you only do it once.

After importing the the database I usually apply a search and replace to change the hostname. For example, if the published website address is www.exmaple.com I will replace it with www.example.com.local using the wp-cli tool.

wp search-replace 'www.example.com' 'www.example.com.local'

You may also use sed command from the terminal to apply the replacement directly in the dump file before importing it.

sed -i.bak 's/www.example.com/www.example.com.local/g' your-wordpress-db-dump-file.sql

Both approach are fine for me.

Be careful, wordpress uses the serialize and unserialize functions to save and restore several type of data in the database so this operation could break some configuration in your theme or plugins that use these functions to save information related to the site hostname.

Tweaking the .htaccess

We don't need to download all the images from the remote site because these are already available online right? So this is where our trick begins.

Assuming our website is available at the address www.example.com add these lines to your .htaccess file after the RewirteBase directive.

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule (.*?)(\.gif|\.jpe?g|\.png|\.bmp) https://www.example.com/$1$2 [NC,L]

With these line we're telling the web server "If a file is not present in the documents root and its extensions is one of the image types listed in the regex, then rewrite the local url to point to the online website where the image we know exists". Brilliant isn't it?

Now your local wordpress development environment is now ready.

Conclusions

This is not the best solution to deal with this kind of problems but I believe it is useful in several cases, the drawback is that it is necessary to have an active internet connection.

I suggest to use a similar approach in website development since wordpress handle the "not found" images through an internal php route which makes the loading of each web site page kinda slow.

Following the example shown previously in this post you may create a variant of the .htaccess to show a placeholder image for all not found images in your local environment.

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule \.(gif|jpe?g|png|bmp) /placeholder.jpg [NC,L]

Just put a placeholder.jpg file in your web root and you're done.

Using stacked modals with Ionic Vue

Giulio Ganci — Thu, 04 Feb 2021 22:05:09 +0000

Since ionic 5 has been released it is possible to use a new component of the iOS UI Kit that allows you to open content in a temporary mode that’s separate from the user's previous current context.

These contents are presented in a stack managed by the ionic modal controller and while they work very well on @ionic/angular and @ionic/react they are not yet fully supported in @ionic/vue but there is a way to have this feature working using a workaround, so be careful if using it in production.

In order to use stacked modals you need to have access to the current IonRouterOutlet reference but currently there is no official method to have a reference to it, so we use the vue3 provide method to serve a reference from the app component and the inject method to access it in each child component.

/src/App.vue

<template>
  <IonApp>
    <ion-router-outlet
      ref="routerOuteletRef"
      id="main-content"
    ></ion-router-outlet>
  </IonApp>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from "@ionic/vue";
import { defineComponent, ref, provide } from "vue";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonRouterOutlet,
  },
  setup() {
    // create an empty ref
    const routerOuteletRef = ref(null);
    // provide the value in the component hierarchy
    provide("routerOutlet", routerOuteletRef);

    return { routerOuteletRef };
  },
});
</script>

Now we use a generic "Home" component which contains a button that opens a new modal view of the same "Home" component

Note that stacked modals are activated by passing the presentingElement option to the modal controller.

/src/view/Home.vue

<script lang="ts">
import { defineComponent, inject } from "vue";
import { modalController } from "@ionic/vue"

import Home from "./Home.vue";

export default defineComponent({
  name: "Home",
  setup() {
    const outlet: any = inject("routerOutlet");

    const openModal = async () => {
      // use the last presenting element
      const top = (await modalController.getTop()) || outlet.value.$el;

      const modal = await modalController.create({
        component: Home,
        swipeToClose: true,
        presentingElement: top,
      });
      return modal.present();
    };

    return {
      openModal,
    };
  },
});
</script>