Πως μεγαλώνουμε τις φωτογραφίες του blog στην προβολή από κινητό

Σήμερα έχουμε ένα θέμα που αφορά τον blogger και την προβολή από κινητό που μας βασανίζει αρκετά. Θα κάνουμε μια μικρή αλλά σημαντική αλλαγή στο template ώστε να εμφανίζονται πιο μεγάλες οι φωτογραφίες της αρχικής σελίδας.

Το Blogger έχει ένα ενσωματωμένο κινητό πρότυπο. Είναι ενεργοποιημένο από προεπιλογή, αλλά εάν το έχετε απενεργοποιήσει, είναι εύκολο να το ενεργοποιήσετε ξανά. Πηγαίνετε στο πρότυπο και κάντε κλικ στο εικονίδιο με το γρανάζι κάτω από το Κινητό. Πατήστε το κουμπί "Ναι. Εμφάνιση πρότυπων για κινητά σε κινητές συσκευές" και στη συνέχεια πατήστε το πορτοκαλί κουμπί Αποθήκευση. Το πρότυπο για κινητά του Blogger ρυθμίζει αυτόματα τις δημοσιεύσεις ανά σελίδα στις 4, εμφανίζει στον τίτλο μια μικρογραφία της πρώτης εικόνας και τις πρώτες φράσεις από το κείμενο σας.

Ξεκινάμε φυσικά με το απαραίτητο backup του template μας, την διαδικασία του οποίου θα βρείτε εδώ. Για να κάνουμε λοιπόν αλλαγή στο μέγεθος της μικρογραφίας θα κάνουμε edit το html και αφού βρούμε το < /head> (χωρίς το κενό μετά το <), κάνουμε paste τον παρακάτω κώδικα (που βρήκα από εδώ) ακριβώς από πάνω.

	<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
	<script type='text/javascript'>//<![CDATA[
	/** This script was written by Confluent Forms LLC http://www.confluentforms.com for the BlogXpertise website
	http://www.blogxpertise.com any updates to this script will be posted to BlogXpertise please leave this message
	and give credit where credit is due! **/
	$(document).ready(function() {
	// change the dimension variable below to be the pixel size you want
	var dimension = 640;
	// this identifies the Mobile Index Thumbnail div element, finds each image in it, and resizes it
	$('.mobile-index-thumbnail').find('img').each(function(n, image){
	var image = $(image);
	image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
	image.attr('width',dimension);
	image.attr('height',dimension);
	});
	});
	//]]></script>
	<style>
	.mobile-index-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	text-align: center;
	margin: 0 auto;
	padding: 5px;
	display: block;
	}
	.mobile-index-thumbnail {
	float: none;
	margin: 0 auto;
	padding: 5px;
	}
	</style>

view raw thumbnails blogger hosted with ❤ by GitHub

Αποθηκεύουμε και είμαστε έτοιμοι. Το blog σας πρέπει να δείχνει όπως στην παραπάνω φωτογραφία του Κυριακή στο σπίτι. Αν θέλετε να τεστάρετε το πόσο mobile friendly είναι το blog σας διαβάστε εδώ. Αν σας άρεσε το tutorial και θέλετε και άλλα για να βελτιώσετε την εμφάνιση του blog σας, ρίξτε μια ματιά εδώ!


Καλή εβδομάδα!