كيف أنقل أول صورة في التدوينة إلى مكان آخر فيها تلقائيا على بلوجر؟

لدي قالب قمت بتطويره، أظهر في صفحته الرئيسية وأيضا في أرشيف الأقسام التدوينات على شكل صور مع عنوان كل تدوينة، ولإظهار أول صورة مرفوعة على كل تدوينة أستعمل لهذا الغرض دالة بلغة Javascript تظهر أول صورة مرفوعة للتدوينة، وفي حالة انعدام أي صورة تظهر صورة افتراضية من اختياري، والكود هو التالي:

		<b:if cond='data:post.thumbnailUrl'>
		  <a expr:href='data:post.url'>
		<script type='text/javascript'>
		//<![CDATA[
		function bp_thumbnail_resize ( image_url, post_title ) {
			var image_size = 200;
				image_tag = ' <img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/>';
				return image_tag;
		}
		//]]>
		</script>
		<script type='text/javascript'>
		document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
		</script></a>
		<b:else/>
		<a expr:href='data:post.url'><img src='https://lh4.googleusercontent.com/-fBKfc2PwUbU/VADt8j6Z0AI/AAAAAAAAFLU/Awb9GJAZKm0/s200/img-placeholder-bg.png' expr:alt='data:post.title' /></a>
		</b:if>

بوضع الكود أعلاه في المكان المرغوب به في التدوينة، مثلا فوق عنوانها كما في تلك المدونة، ستظهر أول صورة في التدوينة، لكن يجب أخذ الأمور التالية بعين الاعتبار:

• لتغيير أبعاد الصورة يجب تغيير قيمة المتغير image_size في الكود أعلاه حسب ليوافق طول الصورة الذي ترغبين فيه (في قالبي أظهر الصور بعدها 200 بيكسل في الطول).
• الكود أعلاه يظهر صورة مربعة دائما، حيث يقوم بتقطيعها وجعل طولها مساويا لارتفاعها، لذلك فعند تحديد الطول المرغوب فيه عن طريق المتغير image_size فإن الارتفاع يكون أيضا مساويا له مع تقطيع الصورة تلقائيا لتظهر الصورة غير مشوهة إذا لم تكن مربعة. في حالة الرغبة في عدم تقطيع الصورة تلقائيا، سيتوجب حينها تحديد الطول المرغوب فيه عن طريق المتغير image_zise لكن الارتفاع سيكون هو الارتفاع المناسب للطول مع الحفاظ على تناسب الأبعاد الأصلي للصورة (مثلا إذا كانت مربعة ستبقى مربعة، وإذا كانت مستطيلة ستبقى كذلك مستطيلة وهكذا...)، وسيتوجب تبعا لذلك إجراء تعديل بسيط على الكود أعلاه ليصبح كما يلي:

		<b:if cond='data:post.thumbnailUrl'>
		  <a expr:href='data:post.url'>
		<script type='text/javascript'>
		//<![CDATA[
		function bp_thumbnail_resize ( image_url, post_title ) {
			var image_size = 200;
				image_tag = ' <img src="'+image_url.replace('/s72-c/','/s'+image_size)+'" alt="'+post_title+'"/>';
				return image_tag;
		}
		//]]>
		</script>
		<script type='text/javascript'>
		document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
		</script></a>
		<b:else/>
		<a expr:href='data:post.url'><img src='https://lh4.googleusercontent.com/-fBKfc2PwUbU/VADt8j6Z0AI/AAAAAAAAFLU/Awb9GJAZKm0/s200/img-placeholder-bg.png' expr:alt='data:post.title' /></a>
		</b:if>

• الكود أعلاه يظهر صورة افتراضية في حالة غياب صورة التدوينة هذا رابطها:

https://lh4.googleusercontent.com/-fBKfc2PwUbU/VADt8j6Z0AI/AAAAAAAAFLU/Awb9GJAZKm0/s200/img-placeholder-bg.png

يمكنك إما تغييرها بصورة تناسب قالبك، أو في حالتك أقترح أن تتخلي عن ميزة الصورة الافتراضية التي تظهر عند عدم وجود صورة بالتدوينة، فيصبح الوضع هو أن تظهر أول صورة في التدوينة عند وجودها، وإلا فلا يظهر شيء، ولهذا يصبح الكود كالتالي:

		<b:if cond='data:post.thumbnailUrl'>
		  <a expr:href='data:post.url'>
		<script type='text/javascript'>
		//<![CDATA[
		function bp_thumbnail_resize ( image_url, post_title ) {
			var image_size = 200;
				image_tag = ' <img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/>';
				return image_tag;
		}
		//]]>
		</script>
		<script type='text/javascript'>
		document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
		</script></a>
		</b:if>

مع ملاحظة أنه يجب فيه أيضا تغيير أبعاد الصورة حسب المرغوب فيه.

أنصحك أيضا بالاطلاع على الموضوع التالي (باللغة الإنجليزية) وهو يتطرق لمختلف الطرق المتاحة التي يمكن من خلالها استعمال صورة كصورة بارزة (كما في ووردبريس) بالنسبة للتدوينة:

http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html

لقد قمت بتعديل الجواب وأضفت إليه بعض التوضيحات، وفيما يخص التحكم في طول وارتفاع الصورة، فبالنسبة للطول فيتم عن طريق المتغير image_size أما الارتفاع فيكون تلقائيا حسب الصورة؛ إما مناسبا للطول إذا استعملت الكود الذي يقطع الصورة تلقائيا، أو يكون الارتفاع الموافق للطول مع الحفاظ على الشكل الأصلي للصورة، وهذا الأمر موضح في الجواب أعلاه لذا المرجو الرجوع إليه.

تسلم أخي شكرا لك.

بالفعل الكود يعمل، لكن المشكلة أني أريد وضع الصورة خارج إطار الموضوع في القائمة الجانبية.

وهل يمكن طريقة أخرى لحذف أول صورة من الموضوع؟

جوابي كان بناء على ما طلبته أختي، وحتى المثال في الرابط الذي أدرجته وضح ذلك، لكنك الآن تقولين أنك تريدين وضع الصورة خارج إطار الموضوع، في القائمة الجانبية تحديدا، علما أنك لم تذكري ذلك في السؤال، وأيضا تسألين عن كيفية حذف الصورة من التدوينة، ولذلك أدعوك لنشر سؤال آخر يتعلق بهذا الأمر، حتى نفرد له إجابة لوحده ليكون العمل منظما، وأيضا أرجو منك تجنب بعض الكلمات بالعامية، لأن ذلك مخالف لضوابط النشر بالأكاديمية، وشكرا على تفهمك.

لا مشكلة اخي 

بل ارجوا وضع جوابك في الأعلى كأفضل جواب  . 

أخي كيف اتحكم بالعرض و الطول ؟

اخي جميل جدا 

لكن الا يمكن التحكم بالطول ؟

أصلا الطول هو الذي يمكن التحكم فيه، بينما الارتفاع يكون تلقائيا بما يناسب الطول. ذلك مذكور في جوابي، لذلك أرجو منك قراءته مع بعض التركيز ففيه مجمل التوضيحات الضرورة.

ملاحظة: الصورة لها طول width وارتفاع height، وفي كودنا فإنه يتم التحكم في الطول من خلال المتغير image_size والارتفاع يكون موافقا بشكل تلقائي لذلك.

اخي اريد التحكم بالطول و الارتفاع و العرض .... 

هذا قصدي

الصورة لها طول وارتفاع فقط، فكيف يكون لها طول وارتفاع وعرض؟

حينما نتعامل مع الأشكال الهندسية على سطح مستو (أي سطح أفقي) فإننا حينها نتحدث عن الطول والعرض (مثل المستطيل مثلا)، لكن على الحاسوب وحيث إن الشاشة عمودية، فإن المستوى يصبح عموديا وليس أفقيا، لذلك نتحدث بالنسبة للصور مثلا أو الفيديوهات عن الطول والارتفاع (لاحظي أن العرض أصباح ارتفاعا بالنسبة للصور وغيرها على الحاسوب).

في الكود الذي كتبته لك تتعامل الدالة مع متغير هو image_size، هذا المتغير يعبر عن طول الصورة، والسؤال الآن هو: أين هو ارتفاع الصورة؟ الارتفاع أختي يتم تحديده تلقائيا ليناسب الصورة، الكود يتكفل بذلك، فلو قمت أنت باختيار طول معين وارتفاع معين فقد يحصل تشوه في الصورة بسبب عدم تناسب الطول والارتفاع فيها.

استعملي الكود بعد تركيزك على النقاط التي وضحتها، وستفهمين جيدا مع التطبيق.

اخي و الله فهمت اقسم بالله 

لكنني أريد أن أتحكم بالطول و العرض 

ليس ضروريا عندي جودة الصورة 

هذا طلبي