اذهب إلى المحتوى
  • 1

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

جمهورية ستاردول

السؤال

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

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

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

 

تم التعديل في بواسطة عبد الهادي اطويل
تعديل العنوان ونص الموضوع
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

هذا طلبي 

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...