انجمن


فراخوانی عکس ها در css  (۳ نوشته)

  • tahoom

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۴
    تشکر شده: ۱۱ بار
    # نوشته شده: ۹ سال پیش
    ۱۱ فروردین ۱۳۹۴ - ۱۷:۱۴

    با سلام
    من زیاد از کدنویسی سر در نمیارم و به مشکلی بر خوردم. یه قالب آماده برای وردپرس خریدم که دارم روش برای راه اندازی سایتم کار میکنم: http://www.tamtaragh.com
    قسمت پایین سایت رو اگه مشاهده کنید یه اسلایدر برای پست های سایت هست. تو این اسلایدر داره تصاویر بندانگشتی با اندازه 200×150 بارگذاری میشه ولی وقتی با GTMETRIX سایت رو آنالیز میکنم میگه داره تصویر 600×450 رو به جای اون لود میکنه (سایز تصویری که از قبل درون فایل functions.php به نام horizontal-2 تعریف شده) که تقریبا بیش از 150 کیلوبایت اضافه داره به صفحه تحمیل میکنه!! تنها جایی که کدهای بارگذاری شده این اسلایدر رو پیدا کردم (که اسمش vc-blog-post-slider هستش) درون فایل style.css هستش. میخوام خودم سایز تصویری رو که از قبل درون فایل functions.php به نام horizontal-4 تعریف شده رو فراخوانی کنم. این کدش هست:

    img {
    position: relative;
    z-index: 2;
    display: block;
    width: 200px;
    height: auto;
    @include float(left); // float: left;
    @include margin-right(20px); // margin-right: 20px;
    @include margin-left(-20px); // margin-left: -20px;
    }

    چطور میتونم این کار رو انجام بدم؟ تو فایل های php کار خیلی راحته ولی تو css هرچی گشتم به نتیجه ای نرسیدم! لطفا راهنماییم کنید.

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    آموزش وردپرس
  • آموزش وردپرس

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۸۳۹
    تشکر شده: ۱۷۶۷ بار
    # نوشته شده: ۹ سال پیش
    ۱۱ فروردین ۱۳۹۴ - ۱۸:۳۵

    به نام خدا
    عرض سلامو خسته نباشید حق با شماست گرچه نیازی به بررسی توسط جی تی متریکس نیست ! خیلی از دوستان در مورد بهینه سازی سرعت قالب ها اصلا این به موارد دقت نمی کنن خوشحالم که این مورد بهش دقت داشتین در این باره باید خدمتتون عرض کنم بعضی از موارد داخل انجمن امکان راهنمایی رو نداره چرا که که چشم ما بستس ! نمی بینیم داخل قالب شما چه کد هایی هست که بتونیم راهنمایی بدیم لذا دو راه وجود داره یک خودتون بگردین و با دقت بیشتری کد های قالب رو مشاهده کنید مشکل رو حل کنید یا اینکه با یک طراح در میان بزارید تا براتون ویرایش و بهینه سازی کنه که به نظرم خودتون انجام بدید اگر وقتشو دارید اگر نه ایمیلتون رو قرار بدین اگر کسی تمایل به انجام داشته باشه بهتون ایمیل بده با تشکر
    ارادتمند : مسلم فلاح نیت

    ___________________________________________
    تذکر : این یک تذکر برای تمام کاربران محترم می باشد . کاربر محترم پس از رفع مشکل در صورتی که خودتون حلال مشکل بودین با ذکر علت حل مشکل از منو سمت چپ بالا تاپیک رو حل شده قرار بدین و در صورتی که با راهنمایی شخص ناظر یا سایر اعضا مشکل حل شد نیازی به توضیح مجدد نیست و صرفا با قرار دادن تاپیک در حالت حل شده مشکل حل شده محسوب میشه و برای تشکر نیازی به ارسال پست جدید نیست کافیه روی دکمه تشکر کلیک بشه

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    tahoom
  • tahoom

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۴
    تشکر شده: ۱۱ بار
    # نوشته شده: ۹ سال پیش
    ۱۲ فروردین ۱۳۹۴ - ۰۹:۱۶

    خیلی ممنون آقای فلاح نیت
    منم بدم نمیومد قالب رو به یه حرفه ای بسپرم تا برام کار رو انچام بده ولی ترسیدم مشکلی برام پیش بیاد برا همین خودم رفتم دنبال یاد گرفتن یه سری چیز ها...
    وقتی صفحه اول سایت رو به حالت کد میارم اسم اون اسلایدر پست ها vc-blog-post-slider هستش که تنها جایی که کدهاش پیدا شد style.css هستش. شاید باورتون نشه ولی تمام کدهای موجود در قالب رو برای این اسم و اسم های مشابه گشتم ولی فقط همینجا بود....

    mpc-vc-blog-posts-slider {
    			.mpcth-slide-wrap {
    				float: left; // non-RTL
    			}
    			.mpcth-slide {
    				position: relative;
    				display: block;
    				overflow: hidden;
    				padding-right: 20px;
    				padding-left: 20px;
    				height: 152px;
    				float: none;
    				max-width: none;
    
    				&.mpcth-slide-row-gap {
    					margin-bottom: 1.5em;
    				}
    
    				img {
    					position: relative;
    					z-index: 2;
    					display: block;
    					width: 200px;
    					height: auto;
    					@include float(left); // float: left;
    					@include margin-right(20px); // margin-right: 20px;
    					@include margin-left(-20px); // margin-left: -20px;
    				}
    
    				.mpcth-slide-title {
    					text-transform: uppercase;
    					margin: 1em 0 .25em;
    				}
    				.mpcth-slide-time {
    					text-transform: uppercase;
    					color: #666666;
    					font-size: .923em;
    				}
    				.mpcth-slide-text {
    					color: #666666;
    					text-align: justify;
    					line-height: 1.5em;
    				}
    				.mpcth-slide-trim {
    					position: absolute;
    					bottom: 0;
    					left: 0; // non-RTL
    					background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 90%);
    					background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 1)));
    					background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
    					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
    					-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
    					width: 100%;
    					height: 2em;
    					z-index: 1;
    				}
    
    				@media #{$screen-large} {
    					.mpcth-responsive & {
    						height: 173px;
    
    						img {
    							width: 260px;
    						}
    					}
    				}
    				@media only screen and (max-width: 640px) {
    					.mpcth-responsive & {
    						height: auto;
    						padding-left: 0;
    						padding-right: 0;
    
    						img {
    							float: none;
    							width: 100%;
    							margin: 0 0 1em 0;
    						}
    
    						.mpcth-slide-wrapper {
    							padding-left: 20px;
    							padding-right: 20px;
    						}
    					}
    				}
    			}
    		}

    این تمام کدهای مربوط به اسلایدر پست ها هستش. تو پست قبلی هم پرسیدم، تو css کدی برا فراخوانی یه سایز عکس خاص (همونطور که تو php به راحتی میشه فراخوانی کرد) مثل thumbnail یا medium وجود داره؟ این کد داره سایز عکس 600×450 رو فراخوانی میکنه و من متوجه نمیشم چرا داره اون سایز رو فراخوانی میکنه!! حتی به سرم زده برم سایز اون عکس خاص رو تو functions.php عوض کنم و یه اسم جدید با سایز 600×450 تعریف کنم....

درباره‌ی این موضوع