For lack of a better term to reference them, does anyone know how I can use small images of (it seems, typically) laptop and mobile screen representations as I’ve sometimes seen devs/designers use them on their portfolio pages?
This was the first example I was able to find from a quick search, though I’ve seen instances of little laptops and phones displayed side-by-side that looked better.
Do you mean how to create the image, or how to add the image to a website? Or both?
I would save an image of a MacBook / iPhone or whatever you need and then open that image in photoshop (or any image editing software). Then drop a screenshot of the website you wish to represent onto the screen of the MacBook / iPhone image and then save it for web. You can then host that image somewhere. Any generic file hosting site will do, photobucket for example. Photobucket will provide a url for that image which you can use in your website
1 Like
I did exactly as you said for my portfolio page http://dmgcode.com/portfolio/ but instead of hosting it with photobucket i openned a blog with google were i can upload bunch of images hosting them there…
Those assets look an awful lot like these:
I’ve done some inline svg work, but never used a raster image within svg. But looks like it can be done:
What I was describing is totally doable. Demo:
The beauty of SVG is the scaling. The downside is the hideous amount of XML dumped into your markup. So, I suppose the ideal solution would be to make templates out of the SVG code. FCC doesn’t get into AngularJS, but an Angular directive would be perfect for this.
app.directive('macbookSvg', function () {
var template = 'all that hideous SVG XML goes here';
return {
restrict: 'E',
scope: {
imgUrl: '@'
},
template: template
}
}
Then you could use it as many times as you want in your markup, passing the image URL as a parameter:
<macbook-svg img-url="http://example.com/your_image1.png"></macbook-svg>
<macbook-svg img-url="http://example.com/your_image2.png"></macbook-svg>
<macbook-svg img-url="http://example.com/your_image3.png"></macbook-svg>
<macbook-svg img-url="http://example.com/your_image4.png"></macbook-svg>
<macbook-svg img-url="http://example.com/your_image5.png"></macbook-svg>
Here’s what I mean re: tucking all the XLM into an Angular directive:
I have no experience with AngularJS. I’m going to credit you in my code.
I did figure out how to use them in bootstrap columns. But I have no yet figured out how I am going to implement a hover or something to that effect showing title, description, links to githubUrl, demoUrl, etc. I see these sections in your code, but they’re not active on the SVG graphics. Would you care to share any pointers?
Ah, I copied that entire $scope.works = [] array from my old portfolio pen, just to have image URLs to work with. I suppose I should have removed all the other non-essential properties.
The way to get those properties working in Angular 1.x (not sure about Angular 2) is to pass them as attributes in the elements, and then render them in the directive template. The element gets each attribute’s data from the controller, and passes it to the directive.
So, add the other attributes to the element:
<macbook-svg
img-url="{{ w.imageUrl }}"
title="{{ w.title }}"
github-url="{{ w.githubUrl }}"
demo-url="{{ w.demoUrl }}">
</macbook-svg>
And add them to the directive DDO’s isolate scope property:
.directive('macbookSvg', [function () {
var template = "crazy XML string here";
return {
restrict: 'E',
scope: {
imgUrl: '@',
title: '@',
githubUrl: '@',
demoUrl: '@'
},
template: template
};
}])
Now you can use title, githubUrl, and demoUrl as variables in the template, like I did previously with imgUrl. Or you can create a new directive to contain the descriptive text and links, as in this update.
Hover is easy - that inline SVG is really XML, which is basically HTML. Inside the main SVG element are nested sub-elements. Note that they all have class names. For example, target the <g class="IPAD" ... > element in CSS:
.IPAD:hover {
stroke: #000;
}
Sadly, because this is SVG you’re limited to a small, foreign-looking subset of the traditional CSS effects.
What have you all got working so far?
I think you can achieve something similar without Angular. You could write a function that takes a string (the image URL), injects that into the svg XML string, and then returns the whole mess. Put that into a loop that creates Dom element from the string and appends it to some containing div.
I haven’t yet implemented anything further than just setting up the template and inserting my image URLs. I need to change my image dimensions; many aren’t lining up properly. (I just used some site for capturing screenshots of websites I found in a quick search, saved the images and uploaded to dropbox.)
I’ll work in some more of your Angular suggestions later. (Up all night, should sleep now.) Pretty straight-forward, so far. Thanks a lot. I may try it again in JS. Anyway, I’ll be sure to credit you/change my code around some (most of it for this section is yours copy/pasted at the moment). I’ll begin branching into learning some JS technologies after I move into the Data Vis section of FCC.
If I have time today I’ll try to implement what I was describing in jQuery/vanilla.
The data vis section appears to require React, which I have never touched.
I more or less landed on Angular by chance a few years ago. I started with this (free) Angular 1 Codecademy course.
I’m glad I picked up Angular, but it’s a holistic, opinionated (eg., the Angular Way), everything-AND-the-kitchen-sink framework. I learned Angular 1, which has been largely abandoned. Angular 2 is almost completely different. I bought a Udemy course on v2 but haven’t started it yet.
By contrast, my understanding is that React is more of a skeleton that YOU build on top of to achieve a functional app. From what I’ve heard about it, I think React will offend my Angular-soaked brain. So I’m currently planning on skipping data vis and going straight to back-end. I’ll come back to React at some point, if nothing else to check a box on my resume.
Your graphic design skills are fantastic, by the way. I’m sure you could easily whip up your own vector-based laptops, tablets and phones. Photoshop, Sketch, etc. can export SVG files. After that, just open the SVG in any text editor and you can extract the inline XML.
1 Like
Wow, they’re saying some bad things about React there. I recently started React.js Essential Training on Lynda 'cause I got a (temporary) free Lynda subscription with my new Wacom tablet.
Must be terribly annoying to have become skilled with a framework that has been largely abandoned. I guess that is part of the JS territory, though, from my understanding.
Seems I’m going to have to teach myself React to some extent before I start Data Vis, because it’s all Coming Soon until the projects begin.
I also downloaded a Node.js course a while back I plan to get into at some point.
Thanks for the compliment. I was actually already thinking about creating my own “About Me” and “Portfolio” icons (what are now Glyphicons) at the top of my page. Maybe I’ll start with those. Not sure I could do a better recreation of something so uniform as laptops, tablets and phones, but perhaps they could be a little “out of the box” or something like that.
And thanks again for all your help. I’ll let you know when I’ve taken the Angular and/or JS portfolio solution(s) further.