Ищу помощи: изменить размер картинки в нетривиальной ситуации

[Krakozavr]

Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора.
И столкнулся с проблемой, которую сам решить не могу.

Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится.

Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный CSS / жаваскрипт средствами конструктора.

Проблема в том, что я не могу описать эту картинку в CSS - выдаваемый сервером код не присваивает ей никаких уникальных и постоянных аттрибутов, которые можно было бы использовть в CSS! Все аттрибуты, которые присваиваются картинке и родительскому DIV - либо генерируются системой (т.е. меняют значения при перезагрузках), либо не являются уникальными для данного элемента. А вписать в шаблон свой собственный аттрибут, как я уже отметил, нет возиожности.

Есть единственный аттрибут, который удовлетворяет параметрам уникальности и неизменности - но он, собака, не явдяется ни классом, ни ID - а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS. Кроме того, этот аттрибут присваивается не самой картинке, а родительскому DIV. Вот это единственный аттрибут: data-slide-url="gallery-description" - и зацепиться можно только за него.

Насколько я понимаю, эта ситуация может быть обработана только скриптом, но тут я совершенный нуль. Или всё-таки есть более простое решение? Может ли кто-нибудь помочь решить этот ребус?

Вот кусок кода:

<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
            <img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="" data-image-resolution="750w">
            
</div>

Спасибо заранее!

[Dilettante_Pro]

Krakozavr,

<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
            <img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="http://javascript.ru/cat/list/donkey.gif" data-image-resolution="750w"/>
            
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
      $('div[data-slide-url="gallery-description"]').children().css({"height":"100px", "width":"200px"});
</script>

[Krakozavr]

Dilettante_Pro, спасибо огромное!

Ларчик просто открывался

Но - уточняющий вопрос. Я забыл упомянуть важный момент: размеры указываются не единовременно, а в зависимости от размера экрана. Виноват, упустил из виду, что это может быть важно.

Я пользуюсь констркуцией типа

@media only screen and (max-height:XXXpx){<!-- код с переменными параметрами -->}

Допустимо ли внедрение такой конструкции в код в таком формате? И.е. понятно, линк на скрипт уходит в шапку, а инструкции по размерам (вторая часть) - в такую конструкцию в кастомном CSS?

ДОБАВЛЕНО:
ну в CSS оно ожидаемо не исполняется, а внедрение кода в header не работает - потому что, видимо, код должен размещаться после искомого тэга, чтобы ему было чего обрабатывать, так?

Попробовал собрать конструкцию для внедрения в footer (это возможно):

<script>
$('div[data-slide-url="gallery-description"]').children().css( @media only screen and (max-height:1100px){"height":"800px", "width":"600px"} @media only screen and (max-height:900px){"height":"400px", "width":"400px"} @media only screen and (max-width:800px){"height":"100px", "width":"100%"});
</script>

Говорит, ошибка в скрипте.

[Deff]

размеры указываются не единовременно, а в зависимости от размера экрана. Виноват, упустил из виду, что это может быть важно.

Может тады удобней картинку ставить ставить резиновой, к примеру с width="33%"

[Krakozavr]

Чтобы было понятнее, чего добиваюсь (а то может я думаю совсем в неверном направлении):
вот ссылка на применение.
https://alex-potemkin.squarespace.com/

сайт на триале, надо нажать кнопку и ввести код для входа, уж простите

Собственно, субъект масшитабирования - белая подложка под описанием.

Проблема в том, что шаблон галереи не предусматривает такого блока вовсе, а мне он нужен. Я его создал хитрым хаком: загрузил белую картинку и дал ей в админке описание. Другие картинки в галерее тоже могут его иметь, но нету - так нету. Это описание выводится в специально размеченном DIV, свойства которого можно задат через CSS, а положение жестко привязано к картинке.

Более того, в принципе работает адаптивный дизайн - галерея и текст масштабируются взависимости от разрешения дисплея, я там кое-что еще подкрутил и теперь почти хорошо. Но не совсем.

Проблема в том, что картинка масштабируется пропорционально. И соответственно приходится "пропорционально" масштабировать текст. На маленьких разрешениях он становится слишком мелким - вот тут нужно бы увеличить ширину картинки-подложки. Казалось бы - пиши меньше, делай крупнее, и не морочь голову, ан нет. Это только половина беды. Вторая половина беды - раскладка страницы для мобильных девайсов Она имеет другую структуру - изображения в галерее выстраиваются в вертикальную ленту, масштабируясь по ширине экрана. И тогда все получается ровно наоборот: картинка-подкладка становится слишком высокой, с огромным белым пространством, которое приходится заполнять слишком крупным текстом, а сама галерея вообще выдавливается за край экрана.

P.S. Сам я ниразу не кодер, фотограф я кой-чего по HTML/CSS знаю, но весьма поверхностно. А со скриптами дружбы нету вовсе.

P.P.S. И кстати, думаю чо даже доступ к исходному коду поможет мало - потому что добавить уникальный идентификатор к одной отдельно взятой картинке в автоматически генерируемой галерее без анализа и переписывания всего кода скорее всего невозможно.

[Krakozavr]

искал примеры и решения.
нашел конструкцию, которая вроде почти как надо, но приспособленная к моим нуждам и предложенному решению - не работает.

<script>
var height=0;var width=0; 
if (self.screen) { 
width = screen.width 
height = screen.height 
} 

if (width<810) 
{ 
      $('div[data-slide-url="gallery-description"]').children().css({"height": "300px", "width":""});
} 

else 
{ 
if ((width>=810) && (height>=800)) 
{ 
      $('div[data-slide-url="gallery-description"]').children().css({"height":"", "width":""});
} 
else
{ 
      $('div[data-slide-url="gallery-description"]').children().css({"height":"400px", "width":"400px"});
} 
}</script>

смотрел тут http://www.i2r.ru/static/476/out_17033.shtml и тут Скрипт, изменения размера картинки и тут http://www.wellsait.ru/file_css.php

[Dilettante_Pro]

Krakozavr,
Эта конструкция будет работать при следующем размещении:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).on('ready', function () {
        var height = 0, width = 0;
        if (self.screen) {
            width = screen.width;
            height = screen.height;
        }
        var target = $('div[data-slide-url="gallery-description"]').children();
        if (width < 810) {
            target.css({ "height": "300px", "width": "" });
        }
        else {
            if ((width >= 810) && (height >= 800)) {
                target.css({ "height": "100px", "width": "100px" });
            }
            else {
                target.css({ "height": "400px", "width": "400px" });
            }
        }
    });
</script>
</head>
<body>
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
            <img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="http://javascript.ru/cat/list/donkey.gif" data-image-resolution="750w"/>
            <div style='background:yellow'></div>
</div>
</body>
</html>

div с желтым фоном я добавил, чтобы было видно, что изменение размеров действует для всех children, входящих в выбранный div.
Для предотвращения этого надо конкретизировать выбор целевого объекта, например

var target = $('div[data-slide-url="gallery-description"]').children('img');

Кроме того, целесообразно расширить действие этого скрипта также и на случай изменения размеров экрана - для этого строку 7 и следующие написать в виде

$(window).on('load resize', function () {
        var width = $(window).width(),
            height = $(window).height();
        var target = $('div[data-slide-url="gallery-description"]').children('img');

[Krakozavr]

Dilettante_Pro,
спасибо огромное что возитесь со мной
что-то идет не так. В тесте всё работает как часы, но в реальном сайте скрипт игнорируется, всё масштабирование идет по правилам, определенным в CSS. Более того - когда я масштабирую окно с выделенным в открытом инспекторе длементом IMG - я вижу, что в процессе изменения размеров окна картинка масштабируется по правилу скрипта при изменении высоты (в обычной раскладке), и в инспекторе мелькают в свойствах элемента правильные размеры, но как только отпускаю окно - все становится "по умолчанию".

в мобильной раскладке (масштаьирование по ширине) и этого не видно

вот итоговый код:

<!-- gallery description -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(window).on('load resize', function () {
        var width = $(window).width(),
            height = $(window).height();
var target = $('div[data-slide-url="gallery-description"]').children('img');
        if (width <= 800) {
            target.css({ "height": "400px", "width": "100%" });
        }
        else {
            if ((width > 800) && (height >= 700)) {
                target.css({ "height": "", "width": "" });
            }
            else {
                target.css({ "height": "400px", "width": "400px" });
            }
        }
    });
</script>
<!-- end gallery -->

вот на всякий случай фрагмент моего кастомного CSS, описывающий галерею для размера экрана, соответствующего установленному в скрипте:

@media only screen and (max-height:700px){.collection-type-gallery #slideshow{height:400px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 400px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 11pt;}.site-title .logo {font-size: 31pt;}.logo-subtitle {font-size: 10pt;} #header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 10pt; padding-left: 50px; } body {font-size: 12pt; }
div.image-description { top: -30px; margin-top: 0px; background-color: white; background: white;  margin-left: 40px; margin-right: 3px; }
.collection-type-gallery #slideshow .slide .image-description strong {
font-size: 18pt; color: #bbbbbb; font-weight: bold; line-height: 80%;}

.collection-type-gallery #slideshow .slide .image-description p {font-size: 11pt; margin-bottom: 5px; color: black; line-height: 116%;}}

Ест подозрение, чт это связано с указанием в оригинальном коде размеров элементов с маркером !important В инспекторе это выглядит например, так:

@media only screen and (max-width: 800px)
#slideshowWrapper.mobile-gallery #slideshow .slide img {
    position: static !important;
    height: auto !important;
    width: 100% !important;

Прорбовал лобавлят !important в скрипт, но тогда он совсем перестает работать, и в примере тоже

[Dilettante_Pro]

Krakozavr,
Попробуйте перед установкой своих параметров удалить классы на своем div

[Krakozavr]

Dilettante_Pro, проблма неожиданно решилась более простым способом. Оказывается, селектор аттрибута все-таки стандартно обрабатывается в CSS - в рещультате, помучавшись с выстраиванием определения тэга для повышения его веса, получилось в стандартной CSS-конструкции переопределить параметры картинки в рамках @media only screen ...

Тем не менее, огромное спасибо - как минимум понимания того, как оно работает, с Вашими подсказками прибавилось Без Вас я бы не добрался до решения.