• 1

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

السلام عليكم و رحمة الله وبركاته.

لقد لاحظت في كثير من مدونات بلوجر التحكم في أول صورة في التدوينة، فأراها تختفي من الموضوع وتظهر كخلفية مثلا، أو تظهر في مكان آخر من المدونة، مثلا فوق الموضوع!

هل يمكن الحصول على التقنية التي تم استخدامها؟

 

تمّ تعديل بواسطة عبد الهادي اطويل
تعديل العنوان ونص الموضوع

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 2

لدي قالب قمت بتطويره، أظهر في صفحته الرئيسية وأيضا في أرشيف الأقسام التدوينات على شكل صور مع عنوان كل تدوينة، ولإظهار أول صورة مرفوعة على كل تدوينة أستعمل لهذا الغرض دالة بلغة 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

تمّ تعديل بواسطة عبد الهادي اطويل
إغناء الجواب

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

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

 

تمّ تعديل بواسطة عبد الهادي اطويل
تدقيق لغوي

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

لا مشكلة اخي 

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

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

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

هذا طلبي 

 

تمّ تعديل بواسطة عبد الهادي اطويل
المرجو الكتابة باللغة العربية الفصحى

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن