How do I attach label to image

I am in the very beginnings of my Technical Documentation page. I cannot get my cite a href="Free Photos, 14,690,000+ High Quality Stock Photos"Man photo created by wayhomestudio -</a to line up with the image.

I have added “figure” and “figcaption” but any variation in CSS did not work. I tried using table and table caption…

I’ve struggled with this in the other projects too. I am a visual person and like to embed pictures in my text. For my mind’s sake, can someone please help me?

Use fig and figcaption to label your text under the image

I am using figure and figcaption, but I can’t get the text to align and go under the picture.

I think I need more context at what you’re trying to achieve. The hyperlink is aligned with the image.

Yes, I figured out that part. I had measurements in my html that were messing with the CSS side.

But now I’m trying to align my text so that it’s to the left of the image.

Is it normal to spend hours obsessing about fixing something? I know I’m stubborn but… LOL

Hi @mainebells, the following i.e. should work for you:

<img src="myimage.jpg" align="right">

Just add you img file name.

I appreciate your help though!!

Hi @mainebells,
Are you trying to align the hypertext and if so are you wanting it center aligned to the right of the img?
Please share a little more info would help. Very specific.

I figured it out. Probably not the easiest way, but it works for now.

I am working on a project to import XML content into Drupal 7. I have parsed all the data in PHP. So far I have successfully imported the node body and its title. Drupal 7 has no documentation on how to attach images to nodes and labels. I really need help because I’ve spent two days trying to find a solution. I would be very grateful if someone came up with a solution. Please guide me somewhere.
function make_nodes($nodes) {
$new_node = $nodes[0];
$node = new stdClass();
$node->title = $new_node[‘title’];
$node->body[‘und’][0][‘value’] = $new_node[‘body’];
$node->type = ‘article’;
$node->created = $new_node[‘timestamp’];
$node->changed = $new_node[‘timestamp’];
$node->status = 1;
$node->promote = 1;
$node->sticky = 0;
$node->body[‘und’][0][‘format’] = 1;
$node->uid = (isset($local_user->uid) && !empty($local_user->uid)?$local_user->uid:1);
$node->language = ‘en’;
$node->timestamp = $new_node[‘timestamp’];
$node->revision = 0;

I think thats actually the right road to improve. You start working on projects. You acquire your own vision how things should be. You work to apply it, until it truly becomes what you wish it to be. You learn lot of side effects and methods during that time. It might take hours, but in the end you’ve improved. Much better to face that task now, then if you were working on a job assigment and encoutner such problem for the first time. No, you’ve already figured a way to solve such matters and a work flow to suite you.

I checked your codepen and i dont know if you have made some temporary changes, but i saw you have your image and captions put wrong. The Semantically correct way to put captions for an image(as you have understood) is to use figure and figcaption, but i noticed you didnt apply them correct. Here is a correct order:

  <img src="https://image.jpg" alt="Image">
  <figcaption>Caption text</figcaption>  

Its not mandatory to use that semantics, but its much more clear what the purpose of those elements is, contrary to simply using div and p tags for example, which are very ambigious.
Ive noticed you’ve got other images arround your project, which also use captions. You can use for them the same approach. You can add class to the figure and figcaption tags, to be able to style those elements similarly.
Your problem with making image and text go on separate lines, roots from the display setting of the img and text elements. The image, is <img> obviously, while i saw the text of question was an anchor(<a>). By default, images are with setting display: inline-block, which makes them take up only their width and can be put alongside other elements on the same “line”. Anchors are displayed as inline, which makes them take up only the space of their content, again letting them be placed alongside other elements on the same line. The difference between inline and inline-block is, inline-block can have additional settings like width, height, margins, paddings, which are innate to block elements(block elements are the ones which take up an entire row/line). As you can see, if you place an image and anchor together, if their combined width is less than the width of their container, they will stay next to each other. There are various ways to make them appear one above the other. One way could be to change their display setting, but i wouldnt choose that approach. Another way could be, to make sure their parent is the same with as the image for example, which will make the image take up one entire line, leaving no choice for the anchor, but to fo beneath.
In your case, you can put the anchor inside the figcaption, which is a block element and will go on the next line, after the image. I strongyl advise you not to use inline styles like you do with align: right, because its harder when you style both within the css and the html parts. Right now you apply two contradictory methods. You tell your image to align to the right, then you put your text beneath it, by using position: absolute and hardcode its position, which should be a last resort solution.

1 Like

I hope someone answers you! :blue_heart:

Oh this is so helpful!!! Yesterday I took out figure and figcaption as I could not get it. I added padding, etc which probably only looks good in my browser! I never thought the anchor was the issue! It’s the link the page said to use as an attribute so I thought I had to use the full code. I knew there was a totally simple issue I was missing.

THANK YOU so very much for taking the time to teach me. I’m going back to rework the pics. I’m loving coding; it’s like a puzzle! I’ll continue to let my stubbornness prevail in forcing me to learn :joy:

1 Like

Hi @likefans please read:

Preformatted textStep by step example of importing XML with Feeds Migrate | Feeds Migrate | Drupal Wiki guide on Drupal.orgPreformatted text

Preformatted textWorking with images | Image module | Drupal Wiki guide on Drupal.orgPreformatted text

1 Like

I changed it accordingly and now I know how to do it!
Thank you again!

1 Like

Im glad you were able to achieve your intention.
I checked your work and there is one mistake i found. You put your anchor src attribute in your <figcaption>. You should nest the anchor within the figcaption instead, so the link actually works. Source attribute(src) is innate to anchorts(<a>), it does not belong to figcaption.
Since you have other pairs of image/caption in your page, you can again use this syntax, put the whole thing in a figure tag and use figcaption for the caption, instead of paragraph as you did. I just think its more natural this way. Ofc, thats up to you.

I did it! I’m too afraid to try to do it for the whole page but will keep that in mind for the future. Thank you!!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.