Hilman Ali Photoblog: wordpress

Showing posts with label wordpress. Show all posts

Tuesday, November 8, 2016

Hide Wordpress header image on specific URL

Objective: Hide Wordpress header image on specific URL

Target URL: All URL except http://hilmanali.com/blog/

Theme: Sorbet (child)

File name: header.php

Original code:

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header" role="banner">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
<?php endif; // End header image check. ?>
<div class="site-header-wrapper">
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

Modified code:

<body <?php body_class(); ?>>
<?php
global $wp;
$current_url = add_query_arg( $wp->query_string, '', home_url( $wp->request ) );
$is_specific_network = stripos( $current_url, 'http://hilmanali.com/blog/page/' );
?>
<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header" role="banner">
<?php if( $is_specific_network !== false ) { ?>
<?php } else { ?>
<a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
<?php } ?>
<div class="site-header-wrapper">
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

Screenshots:

Wednesday, March 23, 2016

Selamat Tinggal Flickrit

Tak sampai setahun gunakan Flickrit, akhirnya mereka akan menghentikan servis sedia ada dan akan memperkenalkan servis yang baharu.

Berikut adalah dua jenis account yang akan diperkenalkan

Flickrit Free Account features

Limited to 50 Images Per Slideshow

Limited to 5000 Views/Day Bandwidth

Limited to 5 Slideshows

5 Different Themes & Layouts

Basic Analytics

Flickrit Pro Account features (USD 4.99/m or USD 39.99/y)

Up to 250 Images Per Slideshow

Unlimited Views & Bandwidth

Unlimited Slideshows

Over 15 Different Themes & Layouts

Full Analytics and Reports (see who's viewing, by location and more!)

Memandangkan harga yang boleh dikatakan mahal, dan mungkin juga method (DIV in body + SCRIPT before body) yang diberi tak boleh diguna pakai dalam Wordpress, maka Abah telah menghentikan penggunaan servis mereka serta merta. Semua Flickr album/slideshow dalam post blog telah ditukar kepada direct URL. Kebetulan, Wordpress akan convert direct URL kepada slideshow. Ok lah tu :-)

Sunday, September 20, 2015

Download all media from Wordpress blog

A simple tutorial how to download all media from Wordpress blog. The reason I use this method is because, I wanted to transfer all the media specifically from XXX.files.wordpress.com domain into my other web host. And due to limitation of free account users, I couldn't access the media files by using any third party file manager such as FTP.

What we need:

Mozilla Firefox

DownThemAll! Add-on

Some time

Steps:

1) Login to your Wordpress.com account and export "All content" (My Sites > WP Admin > Tools > Export) — Save the exported file to a location where you can find it, easily

2) Rename the saved XML file (usually <your_name>.wordpress.<date>.xml) to HTML extension (e.g: <your_name>.wordpress.<date>.html) — If there is a rename warning prompted, just click Yes

3) Open the renamed HTML file with Mozilla Firefox (Don't panic with the content :-)), right click inside the opened file and choose DownThemAll! from menu

4) At DownThemAll! - Make Your Selection screen, do the following:

Click on Links tab

Save Files in: Locate your desired directory to save

Renaming Mask: *subdirs**name*.*ext*

Fast Filtering: https://<your_subdomain_name>.files.wordpress.com

Click Start!

Sit back and relax :-)

Post content without featured image header

Baru tambah template baru, "post content without featured image header" di mana semua post yang ada featured image takkan mempunyai header bila post dibaca.

Tujuan utama, supaya senang untuk export posts dari sini ke blog http://darwisy.wordpress.com

Seperti sedia maklum, plugin tidak boleh ditambah bagi pengguna free account di wordpress.com. Memandangkan kebanyakan featured image dalam blog ini menggunakan image dari host luar (Nelio External Featured Image), maka ini adalah langkah yang boleh dikatakan praktikal untuk display semua featured image di dalam post content.

Selain dari itu, ia juga dapat mengelakkan gambar berulang (repeating image) sekiranya masih mahu display gambar di header dan dalam content.

Tambahan, juga amat berguna sekiranya ingin menukar kepada theme yang tidak support featured image. Atau, export ke blog yang tidak support featured image. Logik: semua featured image akan berada dalam post content dan bukan lagi header.

Steps:

Install plugin — Custom Post Template (not maintained but still working)

Create new template, follow the simple instructions from plugin author - in my case, <?php ct_tracks_featured_image(); ?> has been removed

The most hard task, edit all posts which containing featured image, MANUALLY! - look for featured image URL and insert somewhere into content

p/s: content di dalam post ini sangat membingungkan hahaha

Saturday, August 22, 2015

Wordpress landing page with Supersized

Before I start,

Click here if you wish to see it in action!

Click here to get some introduction of Supersized

Now let's start!

First thing first, download this amazing image slider here. In this tutorial, I'll be using the version for Flickr.

Second thing, of course you've got Wordpress installed :-)

Part 1, preparing the files

Extract the desired version (example: flickr) into your Wordpress root folder (or in a another folder, but you need to change some path inside the coding)

Inside the folder, there is a main html file (example: flickr.html). Rename the file extension to .php (example: flickr.php)

Insert this at the top line of the file, then save it: <?php /** Template Name: Supersized **/ ?>

Copy the saved file into wp-content/themes/your-current-theme/templates

Part 2, little modification

Configure or modify the saved file just now accordingly (read the Supersized documentation)

Make a link to your blog page (example: <a href="blog/">Enter my blog</a>)

Part 3, create a landing page, blog page and Reading Settings

Create a new page with title Landing Page, choose the saved file earlier (Supersized) as template (How to choose template) and leave the content empty

Create another page with title Blog, no template and content require for this

Go to WP-Admin > Settings > Reading > Front page displays and select the A static page (select below)
-- Front page: Landing Page
-- Posts page: Blog

Save the settings

Well, that's all for basic. Of course I did a lot of modifications in the main html file. You might want to play around with it, enjoy! :-)

Tuesday, August 11, 2015

WordPress Images ERROR 404

Self note

Scenario: Getting reports saying most of Wordpress images ERROR 404. In fact, they are exists in /wp-content/uploads/* folders.

Solutions:

Failed — Disabled certain plugins, disabled all plugins, change uploads folder/files permission, modify .htaccess file, delete .htaccess file, change Permalinks settings to default, etc

Success — Switched the PHP Date Format in General Settings from Custom (D, M jS, Y) to Default F j, Y (e.g: August 10, 2015)

Friday, May 22, 2015

Tweaked header

Originally, this theme (Tracks) doesn't provide a full-width-image-header feature.

Found someone raised a such request at the theme's support page. So I thought it would be great to implement on this blog. Anyway, tweaked header a little bit... hope my kids will love it (and you too).

CSS used:


.title-info .logo {
max-width: 100%;
max-height: 100%;
}
#title-info {
position: relative;
z-index: 0;
}
.logo {
width: 100%;
}
.site-header .container {
max-width: none;
}
#menu-primary {
max-width: 1280px;
margin: 0 auto;
}
#title-info {
float: none;
}
@media all and (min-width: 50em) {
#title-info {
margin-top: -1.5em;
}
}
.site-title, .h2 {
text-align: right;
}
.site-header .site-title {
  opacity: 1;
}

Sunday, January 4, 2015

Wordpress theme Tracks - Random background for non thumbnail posts

Just a simple note for myself, unless there is a reader out there :-)

This article is about to modify the Wordpress theme Tracks, which is basically will display a random background in non-thumbnail (featured image) posts. Here we go;

Create images with name "background_1.jpg" to "background_12.jpg" in running numbers and place into "images/" folder in root (example: http://localhost/wordpress/images/)

Insert below style inside <head></head> of "header.php"

<style type="text/css">
.excerpt {
background: url(<?php echo (network_site_url( '/images/background_' )) . (rand(1, 12)) . '.jpg'; ?>) center top;
</style>

Background will be randomized "background_1.jpg" to "background_12.jpg", as per screenshot below:

https://farm6.staticflickr.com/5678/21885487268_95de894406_z_d.jpg

Notes:
- Depending on how many background images, "rand(1, 12)" should be changed accordingly
- This will overwrite the original header.php, in case the theme updated, write the code again
- In my case, each images resized to 1160px width and 1024px height. Not sure what is the ideal resolution thou.

That's it I guess, thanks for reading :-)

Excerpt

Tuesday, November 8, 2016

Objective: Hide Wordpress header image on specific URL

Target URL: All URL except http://hilmanali.com/blog/

Theme: Sorbet (child)

File name: header.php

Original code:

Modified code:

Screenshots:

Wednesday, March 23, 2016

Flickrit Free Account features

Flickrit Pro Account features (USD 4.99/m or USD 39.99/y)

Sunday, September 20, 2015

What we need:

Steps:

Steps:

Saturday, August 22, 2015

Part 1, preparing the files

Part 2, little modification

Part 3, create a landing page, blog page and Reading Settings

Tuesday, August 11, 2015

Self note

Friday, May 22, 2015

Sunday, January 4, 2015