I'm currently designing a website for university.
I am using a 12 column layout for a responsive website and would like to know how to position an image lower down within said columns.
I am using a element and would like to move the y position of the
source srcset = "res/african.jpg" media = "(min-width:600px)"> element down.
surrounding this in div tags, targeting the individual columns and trying to position the actual picture element do not work as it either moves every column down or removes the image altogether.
<div class = "col-2 col-s-4">
<picture >
<source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">
<source srcset = "res/african.jpg" media = "(min-width:600px)" // i would like to individually move down>
<source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">
<img src "">
</picture>
Made separate picture element with new div>
<div class = "africantabletimage">
<picture>
<source srcset = "res/african.jpg" media = "(min-width:600px)" >
<img src "">
</picture>
<picture >
<source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">
</div>
<source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">
<img src "">
</picture>
</div>
CSS
.africantablet image{
padding-top:7%;
}
Related
I have a url with the following html part
<div class="shop cf">
<a class="shop-logo js-shop-logo" href="/m/3870/GMobile">
<noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" />
</noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//c.scdn.gr/assets/transparent-325472601571f31e1bf00674c368d335.gif" />
</a>
</div>
I want to get the first img alt inside the div class shop cf and I do
Set seller = Doc.querySelectorAll("img")
wks.Cells(i, "D").Value = seller.getAttribute("alt").Content(0)
I get nothing what I forget to include?!?
Can I get it from
<noscript>
tag?
I tried the following as well
Set seller = Doc.getElementsByClassName("js-lazy")
wks.Cells(i, "D").Value = seller.getAttribute("alt")
Use element with attribute selector
CSS:
img[alt]
VBA:
ie.document.querySelector("img[alt]")
You may need to add
ie.document.querySelector("img[alt]").getAttribute("alt")
To include the class use
ie.document.querySelector("img.js-lazy[alt]")
If more than one element then use querySelectorAll and index into returned nodeList e.g.
Set list = ie.document.querySelectorAll("img.js-lazy[alt]")
list.item(0).getAttribute('alt')
list.item(1).getAttribute('alt')
have you try this way?
let lazy1 = document.querySelectorAll(".js-lazy")[0]
let lazyalt = lazy1.getAttribute("alt");
let shop = document.querySelector('.shop');
shop.classList.add(lazyalt);
console.log(lazyalt)
I added an image in typo3. It showed up with extra div in page.
<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap" data-csc-images="1" data-csc-cols="2">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt=""></figure>
</div>
</div>
</div>
</div>
I want something like this
<img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt="">
with no extra wrapper.
I can do something like this for removing extra wapper around content.
tt_content.stdWrap.innerWrap >
How to do it for image?
Regarding your specific question
The following code should remove all wraps around the image. Keep in mind that this also removes the positioning and floating abilities.
# Remove some wraps
tt_content.image.20.imageStdWrap.dataWrap >
tt_content.image.20.imageStdWrapNoWidth.dataWrap >
tt_content.image.20.imageColumnStdWrap.dataWrap >
# Redefine the layout switch with only one default case
tt_content.image.20.layout >
tt_content.image.20.layout = CASE
tt_content.image.20.layout.key.field = imageorient
tt_content.image.20.layout.default = TEXT
tt_content.image.20.layout.default.value = ###IMAGES### ###TEXT###
# Remove the wrap around the image subtext
tt_content.textpic.20.text.wrap = |
# Define a new rendering method without wraps
tt_content.image.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
}
# Set this as active rendering method
tt_content.image.20.renderMethod = noWraps
.
How to do that for any content element
Use the Template view in Typo3
Go to the page with your template
Edit your template
Select the Typoscript-Object-Browser at the top (instead of Info/Edit)
Use the search form to find a wrap, e.g. "csc-textpic"
Identify the wraps or templates that you want to remove
Overwrite or delete > them in you Typoscript code
Pretty basic question.
How simple would it be to give an image an ID tag (obvs not that part..) and count how many of the images are on the page with that tag?
As ID's should be unique on a page, you should be using a class instead:
<img src="/img/src.jpg" class="my_image" />
You could then use javascript to count the number of elements
var imgCount = document.querySelectorAll('.my_image').length;
the variable imgCount now contains the number of img tags with the class my_image
DEMO
var imgCount = document.querySelectorAll('.my_image').length;
alert(imgCount);
<img src="/img/src.jpg" class="my_image" />
<img src="/img/src.jpg" class="my_image" />
If you absolutely must use the same ID on multiple elements (maybe these are generated by some third party scripts or CRM?) the above does work (in Chrome at least). Demo below.
var imgCount = document.querySelectorAll('#my_image').length;
alert(imgCount);
<img src="/img/src.jpg" id="my_image" />
<img src="/img/src.jpg" id="my_image" />
If you're using query better to used .length.
<div id="some_id">
<img src="some_image.png">
<img src="some_image.png">
<div class="another_div"></div>
<div class="another_div"></div>
</div>
<script>
var x = $("#some_id img").length
alert(x);
</script>
Check this link.
Im trying to make a site compatible with IE8. It all looks good save one image not scaling. Any suggestions for a possible fix? Heres the appropriate code. The large picture is the one giving me issues
<div class = 'picture-container' id = 'pc1'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;max-width:45%;height:auto'>
<img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for
one, two and three person filmed interviews and conversations.
We have studio lights, a three camera set-up and remote
monitoring. Additionally, our Infinity Wall creates a clean and
professional look that allows the film to be about the message.</div>
<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>
</div>
</div>
</div>
I have a client that wants a video gallery that has a list of thumbnails on the left and a player area on the right. So far so good. I have some html5, jQuery and CSS that is playing a single video in the right pane when a thumbnail is clicked.
My problem is, my client wants what is in essence two playlist. For instance, a gallery of individuals that had a procedure would have a patient's photo as a thumbnail on the left, when the thumbnail is clicked, a video will start playing on the right about that patients experience. Then under that video there would be other links such as 1 week after surgery, 2 weeks after surgery etc.. Sort of a diary on an individual.
To see what I'm asking for, you can see a working one I have put together at http://www.smartlaserlift.com/video-diaries.html. This is a total hackjob using some ajax and really is not working cross platform the way I'd like.
Here is some markup I am currently working on just to display the thumbnails and play the video on the left. I am looking for suggestions on handling the second playlist or perhaps an idea on scrapping this and maybe a better way of doing it.
The HTML
<div class="video_gallery_container">
<div id="thumbs">
<a class="videoLink" videowidth="680" videoheight="383" videofile="Peggy_Web1" videothumb="peggy-vid-thumb" videocaption="Meet Peggy" videodescription="Meet Peggy as she begins her SmartLaser Lift Journey." ></a>
</div>
<div id="vidContainer">
<div id="videoPlayer">
</div>
</div>
The JavaScript
$(document).ready(function() {
$('a.videoLink').each(function() {
var thumbnailFilePath = 'video/' + $(this).attr('videothumb') + '.jpg';
var videoCaption = $(this).attr('videocaption');
$(this).css('background-image','url('+thumbnailFilePath+')');
$(this).html('<div class="caption">' + videoCaption + '</div><img class="play" src="images/play_icon.png" />');
});
$('.videoLink').click(function(){
var videoFile = $(this).attr('videofile');
var videoPoster = $(this).attr('videofile');
var videoCaption = $(this).attr('videocaption');
var videoWidth = Number($(this).attr('videowidth'));
var videoHeight = Number($(this).attr('videoheight'));
var videoDescription = $(this).attr('videoDescription');
var videoCode = '<video width="'+videoWidth+'" height="'+videoHeight+'" controls autoplay autobuffer><source src="video/'+videoFile+'.ogv" type="video/ogg" /><source src="video/'+videoFile+'.mp4" type="video/mp4" /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+videoWidth+'" height="'+(videoHeight+40)+'" id="video_player" align="middle"><param name="allowScriptAccess" value="sameDomain"><param name="allowFullScreen" value="true"><param name="movie" value="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="scale" value="noscale"><param name="salign" value="lt"><embed src="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'" quality="high" width="'+videoWidth+'" height="'+(videoHeight+40)+'" name="video_player" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" scale="noscale" salign="lt" wmode="transparent" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></video>';
var playerBlock = '<div id="playerBlock"><div id="playerHeader">' + videoCaption + '</div>' + '<div id="player">' + videoCode + '</div><div id="videoDescription">' + videoDescription +'</div></div>';
$('#videoPlayer').html(playerBlock);
$('#videoPlayer').css('display', 'block');
});
});//end document.ready function
Im not sure if you got your links to work, but i need a code that will allow me to simply have 5 thumbnails on the left with a diffrent video playing when each thumbnail in click, similar to what you used, I'm not a coding expert and can not figure this out on my own.