• Resolved biochip5

    (@biochip5)


    Heya all, I have a problem regarding the Monotone theme (https://monotonedemo.wordpress.com/). I’ve been struggling for hours to try to get it to display the images properly, only to find out that it’s due to GoDaddy (my host) blocking fopen. So now I’m trying to find a way to work around this by modifying the code so that it doesn’t try to resize the images, and keeps the blog’s width at 560 regardless of the image being horizontal or vertical. Then I can just resize the images myself and avoid all these shenanigans.

    Here are the contents of the functions.php file, which I assume is the one I need to modify. I tried just changing MAX_WIDTH to 560, but unfortunately that didn’t work. Any ideas would be appreciated, I’m really just poking around in the dark here. Thanks!

    <?php
    
    // define widths
    define('MIN_WIDTH', 560);
    define('MAX_WIDTH', 840);
    
    function partial($file) { include $file.'.php'; }
    
    // filters and actions
    add_action('wp_head', header_function);
    add_filter('the_content',image_scrape);
    add_action('publish_post', image_setup);
    
    function header_function() {
    	global $vertical;
    	if(!is_single() && is_home() && !is_archive()) query_posts("what_to_show=posts&posts_per_page=1");
    	if(!is_archive() && !is_search()) : ?>
    		<style type="text/css" media="screen">
    		<?php
    		while ( have_posts() ) : the_post();
    			// ececute the specific stylesheet
    			print_stylesheet();
    			// determine if an image is vertical or not
    			if(is_vertical(the_image_url(true))) { $vertical = true; }
     		endwhile; rewind_posts(); ?>
    		</style>
    	<?php endif;
    }
    
    // remove image tag from post_content for display
    function image_scrape($entry) {
    
    	// don't scrape the image for the feed
    	if (is_feed()) { return $entry; }
    
    	//remove image tag
    	$entry = preg_replace('/<img [^>]*src=(\"|\').+?(\1)[^>]*\/*>/','', $entry); /* */
    
    	//remove any empty tags left by the scrape.
    	$entry = str_replace('<p> </p>', '', $entry);
    	$entry = preg_replace( '|<([a-z]+)[^>]*>\s*</\1>|i', '', $entry );
    	$entry = preg_replace( '|<([a-z]+)[^>]*>\s*</\1>|i', '', $entry );
    	$entry = preg_replace( '|<([a-z]+)[^>]*>\s*</\1>|i', '', $entry );
    	return $entry;
    }
    
    // this resets post meta
    function reset_colors($post) {
    	delete_post_meta($post->ID, 'image_md5');
    	delete_post_meta($post->ID, 'image_url');
    	delete_post_meta($post->ID, 'image_size');
    
    	delete_post_meta($post->ID, 'image_color_base');
    	delete_post_meta($post->ID, 'image_colors');
    	delete_post_meta($post->ID, 'image_colors_bg');
    	delete_post_meta($post->ID, 'image_colors_fg');
    }
    
    function image_setup($postid) {
    	global $post;
    	$post = get_post($postid);
    
    	// get url
    	if ( !preg_match('/<img ([^>]*)src=(\"|\')(.+?)(\2)([^>\/]*)\/*>/',$post->post_content, $matches) )
    		return false;
    	// url setup
    	$post->image_url = $matches[3];
    	if ( !$post->image_url = preg_replace('/\?w\=[0-9]+/','', $post->image_url) )
    		return false;
    
    	if ( 0 !== strpos( $post->image_url,'https://' ) )
    		$post->image_url = 'https://' . $_SERVER['HTTP_HOST'] . '/' . ltrim( $post->image_url, '/' );
    	$post->image_url = clean_url( $post->image_url, 'raw' );
    	$previous_md5 = get_post_meta($post->ID, 'image_md5', true);
    	$previous_url = get_post_meta($post->ID, 'image_url', true);
    
    	if ( md5($post->image_tag) != $previous_md5 || $post->image_url != $previous_url ) {
    		reset_colors($post);
    
    		add_post_meta($post->ID, 'image_url', $post->image_url);
    		add_post_meta($post->ID, 'image_md5', md5($post->image_tag));
    
    		//image tag setup
    		$extra = $matches[1].' '.$matches[5];
    		$extra = preg_replace('/width=(\"|\')[0-9]+(\1)/','', $extra);
    		$extra = preg_replace('/height=(\"|\')[0-9]+(\1)/','', $extra);
    		$width = (is_vertical($post->image_url)) ? MIN_WIDTH : MAX_WIDTH;
    
    		delete_post_meta($post->ID, 'image_tag');
    		add_post_meta($post->ID, 'image_tag', '<img src="'.$post->image_url.'?w='.$width.'" '.$extra.' />');
    
    		// get colors
    		get_all_colors($post);
    		return false;
    	}
    	return true;
    }
    
    function is_vertical($url) {
    	if(preg_match('/(jpg|jpeg|jpe|JPEG|JPG|png|PNG|gif|GIF)/',$url)) {
    	global $post;
    	$size = get_post_meta($post->ID, 'image_size', true);
    	if ( !$size ) {
    		$size = getimagesize($url);
    		add_post_meta($post->ID, 'image_size', $size);
    	}
    	$post->image_width = $size[0];
    	if($size) {
    		if($size[0] == $size[1]) return true;
    		if($size[0] < $size[1]) return true;
    		if($size[0] < MIN_WIDTH) return true;
    	}
    	return false;
    	}
    	return false;
    }
    
    function the_image($return = null) {
    	global $post;
    	$tag = get_post_meta($post->ID, 'image_tag', true);
    	if(!$tag) {
    		image_setup($post->ID);
    		$tag = get_post_meta($post->ID, 'image_tag', true);
    	}
    	$tag = preg_replace('/width=(\"|\')[0-9]+(\1)/','', $tag);
    	$tag = preg_replace('/height=(\"|\')[0-9]+(\1)/','', $tag);
    	if($return) return $tag; /*else*/ echo $tag;
    }
    
    function the_image_url($return = null) {
    	global $post;
    	$tag = get_post_meta($post->ID, 'image_url', true);
    	if(!$tag) {
    		image_setup($post->ID);
    		$tag = get_post_meta($post->ID, 'image_url', true);
    	}
    	if($return) return $tag; /*else*/ echo $tag;
    }
    
    function the_thumbnail() {
    	global $post;
    	$src = preg_replace('/\?w\=[0-9]+/','?w=125', the_image(true));
    	$src = '<div class="image thumbnail">'.$src.'</div>';
    	echo $src;
    }
    
    function get_all_colors($post) {
    	//pull from DB
    	$base->bg = get_post_meta($post->ID, 'image_colors_bg',true);
    	$base->fg = get_post_meta($post->ID, 'image_colors_fg',true);
    
    	// show return variable if full
    	if($base->bg != '' && $base->fg != '') {
    		return $base;
    	} else {
    	// else, get the colors
    		include_once("csscolor.php");
    		$base = new CSS_Color(base_color($post));
    		//set bg
    		$bg = $base->bg;
    		//set fg
    		$fg = $base->fg;
    		if( add_post_meta($post->ID, 'image_colors_bg', $bg, false)
    		&&  add_post_meta($post->ID, 'image_colors_fg', $fg, false)) return $base;
    	}
    }
    
    function print_stylesheet() {
    	global $post;
    	$color = get_all_colors($post);
    	?>
    	#page {
    	  	background-color:#<?php echo $color->bg['-1']; ?>;
    		color:#<?php echo $color->fg['-2']; ?>;
    	}
    
    	a,a:link, a:visited {
    		color: #<?php echo $color->fg['-3']; ?>;
    	}
    
      	a:hover, a:active {
    		color: #<?php echo $color->bg['+2']; ?>;
    	}
    
    		h1, h1 a, h1 a:link, h1 a:visited, h1 a:active {
    		color: #<?php echo $color->fg['0']; ?>;
    		}
    		h1 a:hover {
    			color:#<?php echo $color->bg['+2']; ?>;
    		}
    		.navigation a, .navigation a:link,
    		.navigation a:visited, .navigation a:active {
    
    		  	color: #<?php echo $color->fg['0']; ?>;
    		}
    		h1:hover, h2:hover, h3:hover, h4:hover, h5:hover h6:hover,
    		.navigation a:hover {
    			color:#<?php echo $color->fg['-2']; ?>;
    		}
    
    	.description,
    	h3#respond,
    	#comments,
    	h2, h2 a, h2 a:link, h2 a:visited, h2 a:active,
    	h3, h3 a, h3 a:link, h3 a:visited, h3 a:active,
    	h4, h4 a, h4 a:link, h4 a:visited, h4 a:active,
    	h5, h5 a, h5 a:link, h5 a:visited, h5 a:active,
    	h6, h6 a, h6 a:link, h6 a:visited, h6 a:active {
    	  	/* Use the corresponding foreground color */
    	  	color: #<?php echo $color->fg['-1']; ?>;
    		border-color: #<?php echo $color->bg['+3']; ?>;
    		border-bottom: #<?php echo $color->bg['+3']; ?>;
    	}
    
    	#postmetadata, #commentform p, .commentlist li, #post, #postmetadata .sleeve, #post .sleeve,
    	#content {
    		color: #<?php echo $color->fg['-2']; ?>;
    		border-color: #<?php echo $color->fg['-2']; ?>;
    	} <?php
    }
    
    function base_color($post) {
    
    	$url = get_post_meta($post->ID, 'image_url', true);
    
    	// get the image name
    	$imgname = trim($url);
    
    	// create a working image
    	$im = imagecreatefromjpeg($imgname);
    
    	$height = imagesy($im);
    	$top = $height - 400;
    	$width = imagesx($im);
    
    	// sample five points in the image, based on rule of thirds and center
    	$rgb = array();
    
    	$topy = round($height / 3);
    	$bottomy = round(($height / 3) * 2);
    	$leftx = round($width / 3);
    	$rightx = round(($width / 3) * 2);
    	$centery = round($height / 2);
    	$centerx = round($width / 2);
    
    	$rgb[1] = imagecolorat($im, $leftx, $topy);
    	$rgb[2] = imagecolorat($im, $rightx, $topy);
    	$rgb[3] = imagecolorat($im,  $leftx, $bottomy);
    	$rgb[4] = imagecolorat($im,  $rightx, $bottomy);
    	$rgb[5] = imagecolorat($im, $centerx, $centery);
    
    	// extract each value for r, g, b
    	$r = array();
    	$g = array();
    	$b = array();
    	$hex = array();
    
    	$ct = 0; $val = 50;
    
    	// process points
    	for ($i = 1; $i <= 5; $i++) {
    	   $r[$i] = ($rgb[$i] >> 16) & 0xFF;
    	   $g[$i] = ($rgb[$i] >> 8) & 0xFF;
    	   $b[$i] = $rgb[$i] & 0xFF;
    
    	   // find darkest color
    	   $tmp = $r[$i] + $g[$i] + $b[$i];
    
    	   	if ($tmp < $val) {
    	       $val = $tmp;
    	       $ct = $i;
    	   	}
    		$hex[$i] = rgbhex($r[$i],$g[$i],$b[$i]);
    	}
    	return $hex[3];
    }
    
    function rgbhex($red, $green, $blue) { return sprintf('%02X%02X%02X', $red, $green, $blue); }
    
    ?>
Viewing 9 replies - 1 through 9 (of 9 total)
  • Try this. I posted this in response to my problem that I posted earlier.
    My host support did this.

    “I commented out these 2 lines from the .htaccess

    #RewriteCond %{QUERY_STRING} ^.*(w|h|f)=.*$
    #RewriteRule ^(wp-content/uploads/.*.)(jpg|JPG|jpeg|png|PNG|gif|GIF)$ /thumb.php?image=$1$2 [QSA,L]

    It looks like the script still changes the colors based on the images. I also made the cache folder permissions 755 instead of 777. 777 can cause issues.”

    Good luck. My blog works fine now.

    Thread Starter biochip5

    (@biochip5)

    Hey stephke, thanks for the response.

    Yeah, those are the lines from the .htaccess file in the Monotone package. Getting rid of it made my images come up fine, but the blog still resizes itself based on whether the image is horizontal or vertical and I’m trying to prevent that as well.

    Hmm? Mine quit resizing after that when I posted my response, but now this morning it is back to resizing the blog. Maybe it was a glitch with my browser that fixed itself. <gr> Or maybe it was because I had originally posted two images close to the same size and I deleted one of them and posted one with a different size. <gr> I wonder……

    New idea. What if you add a width parameter to the #page div in the rtl.css style sheet. IE width : 750px; (or whatever width you want.)

    Thread Starter biochip5

    (@biochip5)

    Well it’s my impression the RTL file is just for when someone’s typing in Arabic? RTL = right-to-left?

    Thread Starter biochip5

    (@biochip5)

    However, I did just change the #page in the regular stylesheet and it did the trick. The format’s still a little screwy, but the actual width is correct now, so we’re making progress.

    Thread Starter biochip5

    (@biochip5)

    Further progress by searching for anything with a .vertical in front of it, then pasting those values into their horizontal counterparts. Only thing left is to get the post contents on the same line as the author/time info instead of having it carry over.

    Edit: Actually I just missed the .vertical #post value. Hooray! Working perfectly now. I even got the archive to be the same width by changing the .archive #page value.

    Guys!! Inspite of me running the risk of sounding real foolish here, I’m asking this.
    Can you please summarize the steps to do this?
    I’m facing the same problem as you guys are..
    A newbie here ??

    All I wanted is:
    1. The images that I upload is showing up real big.How do I fix the size of the images that show up in the post?
    2. Irrespective of the image being horizontal or vertical, how do I fix the size?
    3. How do I add a border line(i.e, just like how we a margin above the image, is it possible to add such a border line to the sides as well?

    Thanks a ton in advance.

    Thread Starter biochip5

    (@biochip5)

    Well you’ll need to edit the image before you post it and resize it to whatever width you want. The default size of the blog for vertical images (what I fixed mine to) is 560 pixels. If you make your image 560 pixels wide, it’ll fill up the post like the first post on https://monotonedemo.wordpress.com/. If you make it less and make it centered when you post it, there’ll be space on the left and right. Try 530 pixels.

    To make your blog always a certain width, follow what I said in the above posts. Go into the Theme Editor, then search for every instance of “.vertical” in the style.css file. Look at what it says in between the brackets and put those values into the same lines in their non-.vertical counterparts. Some of the lines may not exist, so just copy and paste them. Then change #page’s width to 560px. Voila.

    Here’s a link to mine, so you can see what I mean:
    https://www.truthphoto.com/news/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Monotone Problem’ is closed to new replies.